Component Registry

shadcn-compatible registry: 73 design systems

Better Design ships every component as a shadcn registry item. Install with npx shadcn@latest add, land it in your components/ui/ folder, edit the source. No SDK lock-in, no runtime wrapper.

Install any component

# 1. Initialize shadcn in your project (once)
npx shadcn@latest init

# 2. Add a Better Design component (any DS, any component)
npx shadcn@latest add https://better-design.com/registry/linear/button.json
npx shadcn@latest add https://better-design.com/registry/airbnb/calendar.json
npx shadcn@latest add https://better-design.com/registry/apple/sheet.json

Pattern: /registry/<design-system>/<component>.json. The CLI resolves dependencies, fetches source, writes to components/ui/.

Featured design systems

Each design system ships ~80 components built on the same shadcn primitives: Radix UI for behavior, Tailwind v4 for styling.

Linear

Dark dev tool with purple accents

Airbnb

Warm light, coral primary, rounded

Apple

SF Pro, soft surfaces, premium

Vercel

Pure black, Geist, 6px radius

Stripe

Sohne, indigo, fintech aesthetic

Supabase

Dark with green accent

Notion

Light minimal, system-ui

Figma

Electric violet, design tool

Browse all 73 design systems →

What you get

  • •Source code in your repo. Every install writes .tsx files into components/ui/. Edit, fork, delete. Your choice.
  • •Same primitives, different aesthetics. Built on Radix UI + Tailwind v4 like shadcn/ui. Better Design re-skins for 73 visual systems.
  • •Mixes with shadcn/ui. Add Better Design components to a project that already uses default shadcn. They share the same folder, Tailwind config, and patterns.
  • •MCP-native.Use Better Design's MCP server in Cursor, Claude Code, Windsurf to prompt components in your DS.

FAQ

What is a shadcn registry?

A JSON-based distribution format for React components. Each component is a JSON file describing its source code, dependencies, and registry dependencies. The shadcn CLI fetches the JSON, resolves deps, and writes the source into your repo at components/ui/.

How is this different from shadcn/ui's default?

Same registry format. The difference is what's inside: 73 visual design systems instead of one default theme. Pick the system whose feel matches your product.

Do I need to install shadcn first?

Yes. Run npx shadcn@latest init once in your project, then npx shadcn@latest add <url> for each component.

Can I mix Better Design with my existing shadcn setup?

Yes. They share the same components/ui/ folder, the same Tailwind variables, the same Radix primitives. Add Better Design components alongside your existing ones and they coexist.

More from Better Design

Browse component pages →Browse 73 design systems →MCP setup →