GitHub - marvkr/better-design: Open-source design systems...

29 open-source design systems for shadcn/ui. Drop any of them into your app with one command.

Browse and preview them all at better-design.com.

Every design system ships the same ~87 components (accordion → typography), themed end-to-end. Pick a style, install the components you need, keep iterating.

Install

Install any component into your shadcn/ui project:

npx shadcn@latest add https://www.better-design.com/registry/<design-system>/<component>.json

Example — install Linear's button:

npx shadcn@latest add https://www.better-design.com/registry/linear/button.json

The CLI handles dependencies, CSS variables, and globals.css automatically.

Design systems

Design System	Slug	Preview
Airbnb	`airbnb`	view
Apple	`apple`	view
Beam Custom	`beam-custom`	view
Beam Lib	`beam-lib`	view
Cinematic Dark	`cinematic-dark`	view
Column (Corporate Fintech)	`corporate-fintech`	view
Dark Orange	`dark-orange`	view
Editorial Dark	`editorial-dark`	view
Figma	`figma`	view
Glassmorphic Dark	`glassmorphic-dark`	view
Inset Dark	`inset-dark`	view
Light Marketplace	`light-marketplace`	view
Linear	`linear`	view
Linear Quality	`linear-quality`	view
Lumen Dark	`lumen-dark`	view
Metal FX	`metal-fx`	view
Midnight Glass	`midnight-glass`	view
Minimal Light	`minimal-light`	view
Monochrome Industrial	`monochrome-industrial`	view
Neutral Monochrome	`neutral-monochrome`	view
Notion	`notion`	view
Pillow Light	`pillow-light`	view
Precision Light	`precision-light`	view
Stripe	`stripe`	view
Supabase	`supabase`	view
Tactile Minimal	`tactile-minimal`	view
TV Style	`tv-style`	view
Vercel	`vercel`	view
Vibrant Dark	`vibrant-dark`	view

Repo layout

registry/
  <design-system>/
    button.json        # shadcn registry entry — what the CLI installs
    card.json
    ...
  index.json           # registry manifest

components/
  <design-system>/
    components/ui/     # extracted .tsx source — readable, forkable
      button.tsx
      card.tsx
      ...
    globals.css        # CSS variables + tokens for the theme
    lib/utils.ts       # cn() helper

registry/ is the source of truth — what shadcn add reads.
components/ is a mirror of the same code as plain .tsx files for browsing, copying, or diffing on GitHub.

Both stay in sync. If you fork or copy directly, grab the matching globals.css for that design system so the tokens resolve.

Browse, fork, contribute

Want to browse the code? Open components/<design-system>/components/ui/ for any DS.
Want a new theme? Open an issue or PR — every DS is a folder under registry/ plus a matching folder under components/.
Found a bug or want to tweak a token? PRs welcome.

License

MIT — use these in personal, commercial, and client work. Attribution appreciated but not required.

推荐订阅源