From ab4a1ca1a96dfb36f47d7ced3bcf774f1bc62a57 Mon Sep 17 00:00:00 2001
From: Alexander Chen <alexander.qili.chen@gmail.com>
Date: Wed, 16 Sep 2026 21:08:54 -0400
Subject: [PATCH] docs: make npm package links more prominent

---
 README.md        |  4 +++-
 demo/src/App.tsx | 27 ++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b9cb4e7..25e5e80 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # orb-ui
 
+[![npm version](https://img.shields.io/npm/v/orb-ui.svg)](https://www.npmjs.com/package/orb-ui)
+
 **Voice agent UI that feels alive.**
 
 Expressive, accessible React components for realtime voice agents. Connect Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Realtime, Gemini Live, or your own voice stack through one consistent UI layer.
@@ -32,7 +34,7 @@ speaking motion. The adapter keeps microphone and output calibration separate.
 
 ## Install
 
-Install the component package:
+Install the [orb-ui package from npm](https://www.npmjs.com/package/orb-ui):
 
 ```bash
 npm install orb-ui
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index b8ad7ba..6c30ff8 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -7,6 +7,7 @@ import { highlightTsx } from './syntax-highlight'
 const STATES: OrbState[] = ['idle', 'connecting', 'listening', 'thinking', 'speaking', 'error']
 const THEMES: OrbThemeName[] = ['circle', 'bars', 'cloud', 'radial', 'debug']
 const GITHUB_REPO_URL = 'https://github.com/alexanderqchen/orb-ui'
+const NPM_PACKAGE_URL = 'https://www.npmjs.com/package/orb-ui'
 const GITHUB_STAR_COLOR = '#8bc7ff'
 
 type DemoMode = 'simulation' | 'manual'
@@ -628,6 +629,21 @@ export default function App() {
           margin-top: 34px;
         }
 
+        .hero-copy__package-link {
+          color: #858585;
+          display: inline-flex;
+          font-size: 13px;
+          gap: 6px;
+          margin-top: 14px;
+          text-decoration: none;
+          transition: color 160ms ease;
+        }
+
+        .hero-copy__package-link:hover,
+        .hero-copy__package-link:focus-visible {
+          color: #fff;
+        }
+
         .install-command {
           align-items: center;
           background: rgba(16, 16, 16, 0.9);
@@ -1757,6 +1773,15 @@ export default function App() {
               </a>
             </div>
 
+            <a
+              href={NPM_PACKAGE_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="hero-copy__package-link"
+            >
+              View package on npm <span aria-hidden="true">↗</span>
+            </a>
+
             <div className="hero-providers" aria-label="Supported provider guides">
               <span>Native paths</span>
               {PROVIDER_GUIDES.slice(0, 6).map((provider) => (
@@ -2058,7 +2083,7 @@ export default function App() {
             <h2>Product</h2>
             <a href="/docs">Documentation</a>
             <a href="/playground">Playground</a>
-            <a href="https://www.npmjs.com/package/orb-ui" target="_blank" rel="noreferrer">
+            <a href={NPM_PACKAGE_URL} target="_blank" rel="noreferrer">
               npm package
             </a>
           </div>