better-design-shadcn-themes

Install themed shadcn/ui components from 31 design systems via the shadcn CLI.

4|Updated May 16, 2026
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill better-design-shadcn-themes-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: better-design-shadcn-themes
Source: https://github.com/reason-machines/design-skills/tree/main/skills/better-design-shadcn-themes
Command: npx skills add https://github.com/reason-machines/design-skills --skill better-design-shadcn-themes-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building visually consistent UIs with shadcn/ui requires manually designing themes and restyling every component, which is slow and error-prone. This Skill provides 31+ ready-made design systems (Linear, Stripe, Apple, Notion, and more) with ~89 themed components each, installable directly into an existing shadcn/ui project with a single CLI command. ## Core Features & Use Cases - One-command component installation: Pull themed components (buttons, cards, dialogs, forms, tables) from any design system using the standard shadcn CLI, with automatic dependency installation and CSS variable updates. - 31+ design systems: Choose from styles like Linear, Stripe, Apple, Notion, Vercel, Supabase, Figma, glassmorphic-dark, and minimal-light, all MIT licensed. - Automatic theme configuration: The CLI updates globals.css with design tokens and works with your existing Tailwind and shadcn setup. - Use Case: You are building a fintech dashboard and want a Stripe-like look. Run the install command for the stripe design system's card, table, and button components, then import them in your React pages like any shadcn component. ## Quick Start Install a Linear-styled button into my shadcn/ui project using the better-design registry URL with the shadcn CLI.

Frequently Asked Questions about better-design-shadcn-themes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install themed shadcn/ui components from a design system?▼

Run npx shadcn@latest add followed by the registry URL for the design system and component, such as https://www.better-design.com/registry/linear/button.json. The CLI downloads the component, installs dependencies, and updates your CSS variables automatically.

What design systems are available for shadcn/ui themes?▼

There are 31+ design systems including Linear, Stripe, Apple, Notion, Vercel, Supabase, Figma, Airbnb, glassmorphic-dark, minimal-light, and corporate-fintech. Each includes roughly 89 themed components covering forms, dialogs, tables, and navigation.

Can I mix components from different design systems in one project?▼

Yes, but CSS variables may conflict when mixing design systems, causing inconsistent styling. For best results, stick to one design system per project or test combinations thoroughly in both light and dark modes.

Why do installed shadcn components not match the theme preview?▼

This usually happens when globals.css was not updated with the theme's CSS variables or the Tailwind config lacks shadcn color definitions. Verify globals.css is imported in your root layout and clear the Next.js cache by deleting the .next directory.

Does better-design require a separate npm package?▼

No, there is no separate package to install. Components are pulled on-demand through the standard shadcn CLI from the better-design registry, but your project must already have shadcn/ui initialized with npx shadcn@latest init.