sumfxn · sumfxn · May 14, 2026
@@ -2,22 +2,32 @@
   "name": "@usdh-kit-apps/demo",
   "version": "0.0.1",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "next dev -p 3000",
     "build": "next build && node scripts/assert-widget-css.mjs",
     "start": "next start -p 3000",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-scroll-area": "1.2.10",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-toggle-group": "1.1.11",
+    "@radix-ui/react-tooltip": "1.2.8",
     "@tanstack/react-query": "5.62.7",
     "@usdh-kit/sdk": "workspace:*",
     "@usdh-kit/widget": "workspace:*",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
     "connectkit": "1.8.2",
+    "geist": "1.7.0",
     "lucide-react": "1.14.0",
     "next": "15.5.18",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "tailwind-merge": "3.6.0",
     "viem": "2.21.55",
     "wagmi": "2.14.6"
   },

@@ -0,0 +1,61 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { ComponentDetailExperience } from '../../../components/ComponentDetailExperience'
+import { ComponentDocsShell } from '../../../components/ComponentDocsShell'
+import {
+  componentEntries,
+  getComponentEntry,
+  parseRegistryDataMode,
+} from '../../../lib/component-registry'
+import { loadGallerySnapshot } from '../../../lib/gallery-data'
+
+export const dynamic = 'force-dynamic'
+
+type Params = Promise<{ slug: string }>
+type SearchParams = Promise<Record<string, string | string[] | undefined>>
+
+export function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
+  return params.then(({ slug }) => {
+    const entry = getComponentEntry(slug)
+    if (!entry) return { title: 'Component not found - usdh-kit' }
+    return {
+      title: `${entry.title} - usdh-kit components`,
+      description: entry.description,
+    }
+  })
+}
+
+export function generateStaticParams() {
+  return componentEntries.map((entry) => ({ slug: entry.slug }))
+}
+
+export default async function ComponentDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Params
+  searchParams?: SearchParams
+}) {
+  const [{ slug }, query] = await Promise.all([params, searchParams])
+  const entry = getComponentEntry(slug)
+  if (!entry) notFound()
+
+  const dataMode = parseRegistryDataMode(query?.data)
+  const effectiveDataMode = entry.liveCapable ? dataMode : 'sample'
+  const bookCoin = typeof query?.coin === 'string' ? query.coin : undefined
+  const snapshot = await loadGallerySnapshot({
+    mode: effectiveDataMode,
+    bookCoin,
+  })
+
+  return (
+    <ComponentDocsShell activeSlug={entry.slug}>
+      <ComponentDetailExperience
+        slug={entry.slug}
+        dataMode={effectiveDataMode}
+        snapshot={snapshot}
+      />
+    </ComponentDocsShell>
+  )
+}
@@ -0,0 +1,10 @@
+import { ComponentDocsShell } from '../../components/ComponentDocsShell'
+import { ComponentRegistryExperience } from '../../components/ComponentRegistryExperience'
+
+export default function ComponentsPage() {
+  return (
+    <ComponentDocsShell>
+      <ComponentRegistryExperience />
+    </ComponentDocsShell>
+  )
+}
@@ -1,3 +1,5 @@
+import { GeistMono } from 'geist/font/mono'
+import { GeistSans } from 'geist/font/sans'
 import type { Metadata, Viewport } from 'next'
 import type { ReactNode } from 'react'
 
@@ -18,7 +20,9 @@ export const viewport: Viewport = {
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <body className="min-h-screen overflow-x-hidden antialiased font-sans">
+      <body
+        className={`${GeistSans.variable} ${GeistMono.variable} min-h-screen overflow-x-hidden font-sans antialiased`}
+      >
         <Providers>{children}</Providers>
       </body>
     </html>

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function RegistryPage() {
+  redirect('/components')
+}