Embossed UI

shadcn components rebuilt on Base UI with our own design (see DESIGN.md), distributed through the shadcn CLI. Each component is a drop-in for its shadcn base-nova counterpart: same file name, exports, props, variants, sizes, data-slot attributes and Base UI primitive. Only the styling changes.

Installing

# once: the theme variables and the Inter font
npx shadcn@latest add https://ui.ikramhasan.com/r/style.json

# then any component
npx shadcn@latest add https://ui.ikramhasan.com/r/button.json

# or everything at once: the style, every component and hook
pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/all.json

Components only use the standard shadcn variables (--primary, --secondary, --accent, --input, --ring, …), so they also work with any other shadcn theme. Colors the design needs beyond those, like the button gradients, are derived in the component with color-mix(), the way base-nova does it. The one added color, --success, follows shadcn's "adding new colors" pattern.

Components

Every registry:ui item in shadcn's base-nova registry (65 total, from https://ui.shadcn.com/r/styles/base-nova/registry.json). Tick a box when the component is in registry/ui/, in registry.json and has a docs page.

Progress: 65 / 65

• Accordion (accordion)
• Alert (alert)
• Alert Dialog (alert-dialog)
• Aspect Ratio (aspect-ratio)
• Attachment (attachment)
• Avatar (avatar)
• Badge (badge)
• Breadcrumb (breadcrumb)
• Bubble (bubble)
• Button (button)
• Button Group (button-group)
• Calendar (calendar)
• Card (card)
• Carousel (carousel)
• Chart (chart)
• Checkbox (checkbox)
• Code Block (code-block, with the use-highlighted-code hook)
• Collapsible (collapsible)
• Combobox (combobox)
• Command (command)
• Context Menu (context-menu)
• Dialog (dialog)
• Direction (direction)
• Drawer (drawer)
• Dropdown Menu (dropdown-menu)
• Empty (empty)
• Field (field)
• Form (form, a guide on Field with React Hook Form and Zod; base-nova's item ships no files)
• Hover Card (hover-card)
• Input (input)
• Input Group (input-group)
• Input OTP (input-otp)
• Item (item)
• Kbd (kbd)
• Label (label)
• Marker (marker)
• Menubar (menubar)
• Message (message)
• Message Scroller (message-scroller)
• Native Select (native-select)
• Navigation Menu (navigation-menu)
• Pagination (pagination)
• Popover (popover)
• Progress (progress)
• Questionnaire (questionnaire)
• Radio Group (radio-group)
• Resizable (resizable)
• Scroll Area (scroll-area)
• Select (select)
• Separator (separator)
• Sheet (sheet)
• Sidebar (sidebar)
• Skeleton (skeleton)
• Slider (slider)
• Sonner (sonner)
• Spinner (spinner)
• Switch (switch)
• Table (table)
• Tabs (tabs)
• Textarea (textarea)
• Toast (toast)
• Toggle (toggle)
• Toggle Group (toggle-group)
• Tooltip (tooltip)
• Trace (trace)

Guides built from those components (shadcn ships them as docs pages, not registry items):

• Data Table (data-table, on Table with TanStack Table v9)

AI Elements

shadcn's AI Elements (the successor to elements.ai-sdk.dev): patterns for agentic interfaces composed from the components above, shipped as docs pages with live demos, like upstream. The demos script their chats with createChat from @shadcn/helpers/ai-sdk and the AI SDK's useChat.

Progress: 21 / 21

• Chain Of Thought (chain-of-thought)
• Chat (chat)
• Checkpoint (checkpoint)
• Confirmation (confirmation)
• Context (context)
• File Tree (file-tree)
• Inline Citation (inline-citation)
• Message (message)
• Model Selector (model-selector)
• Plan (plan)
• Prompt Input (prompt-input)
• Queue (queue)
• Reasoning (reasoning)
• Sources (sources)
• Stack Trace (stack-trace)
• Subagent (subagent)
• Suggestion (suggestion)
• Task (task)
• Terminal (terminal)
• Test Results (test-results)
• Tool (tool)

Structure

A pnpm workspace laid out like shadcn/ui, the site is apps/v1.

apps/v1
├── app/                  # Next.js routes: home, docs, blocks, charts
│   └── (app)/docs/       # the docs, rendered from content/docs
├── components/           # site chrome: header, docs sidebar, previews, code blocks
├── content/docs/         # MDX: Getting Started, one page per component, AI Elements patterns
├── examples/             # one file per example shown in the docs
│   └── __index__.tsx     # generated by registry:build
├── lib/                  # config, site URL, page tree, registry and highlighting helpers
├── registry/ui/          # component sources: what the CLI installs
├── registry.json         # registry items
└── scripts/build-registry.mjs

Charts is a gallery of every chart type, two variants each. Blocks shows shadcn's five featured blocks (dashboard-01, sidebar-07, sidebar-03, login-03, login-04), each installable with shadcn add. The docs are complete.

Development

pnpm install
pnpm dev            # the site at http://localhost:3000 (builds the registry first)
pnpm registry:build # regenerates examples/__index__.tsx and public/r/*.json
pnpm build          # registry + production build
pnpm lint
pnpm typecheck

Registry URL

The registry url is https://ui.ikramhasan.com

Adding a component

1. Install the upstream one for reference: pnpm exec shadcn add <name> (base-nova, from apps/v1). Read it, then delete it.
2. Recreate it in apps/v1/registry/ui/<name>.tsx with the same API, restyled per DESIGN.md.
3. Add an item to apps/v1/registry.json with the same dependencies as upstream.
4. Add examples to apps/v1/examples/ (<name>-demo.tsx plus one file per variant or state), then run pnpm registry:build.
5. Write apps/v1/content/docs/components/<name>.mdx (copy an existing page) and add it to content/docs/components/meta.json.

A component that uses another one of ours (e.g. Dialog uses Button) lists it in registryDependencies by full URL (http://localhost:3000/r/button.json; the build swaps in the real one). A bare name like "button" resolves to shadcn's own registry and would install shadcn's button instead of ours.