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
Guides built from those components (shadcn ships them as docs pages, not registry items):
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
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
- Install the upstream one for reference:
pnpm exec shadcn add <name> (base-nova, from apps/v1). Read it, then delete it.
- Recreate it in
apps/v1/registry/ui/<name>.tsx with the same API, restyled per DESIGN.md.
- Add an item to
apps/v1/registry.json with the same dependencies as upstream.
- Add examples to
apps/v1/examples/ (<name>-demo.tsx plus one file per variant or state), then run pnpm registry:build.
- 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.
