better-design-shadcn-themes

# better-design-shadcn-themes > Skill by [ara.so](https://ara.so) — Design Skills collection. ## Overview Better Design provides 31+ production-ready design systems for shadcn/ui. Each design system includes ~89 fully themed components (buttons, cards, dialogs, forms, etc.) that you can install directly into your shadcn/ui project with a single CLI command. All design systems are MIT licensed and include popular styles like Linear, Stripe, Airbnb, Apple, Notion, Vercel, Supabase, and Figma. Browse all design systems at: https://better-design.com/design-systems ## Installation Better Design components install directly into existing shadcn/ui projects using the shadcn CLI. There's no separate package to install — you pull individual components on-demand. ### Prerequisites Your project must already have shadcn/ui initialized: ```bash npx shadcn@latest init ``` ## Core Commands ### Install a Single Component ```bash npx shadcn@latest add https://www.better-design.com/registry/<design-system>/<component>.json ``` **Examples:** ```bash # Install Linear-styled button npx shadcn@latest add https://www.better-design.com/registry/linear/button.json # Install Stripe-styled card npx shadcn@latest add https://www.better-design.com/registry/stripe/card.json # Install Apple-styled dialog npx shadcn@latest add https://www.better-design.com/registry/apple/dialog.json # Install Notion-styled input npx shadcn@latest add https://www.better-design.com/registry/notion/input.json ``` The CLI automatically: - Downloads the component TypeScript file - Installs required dependencies - Updates CSS variables in `globals.css` - Handles component dependencies ### Install Multiple Components ```bash # Install several components from the same design system npx shadcn@latest add \ https://www.better-design.com/registry/linear/button.json \ https://www.better-design.com/registry/linear/input.json \ https://www.better-design.com/registry/linear/card.json ``` ## Available Design Systems | Design System Slug | Style | Best For | |-------------------|-------|----------| | `linear` | Clean, modern, dark | Project management, SaaS | | `stripe` | Professional, minimal | Fintech, payments | | `apple` | Polished, refined | Consumer apps | | `notion` | Soft, approachable | Note-taking, docs | | `vercel` | Sleek, high-contrast | Developer tools | | `supabase` | Bold, green accent | Backend tools, dashboards | | `figma` | Colorful, playful | Design tools | | `airbnb` | Warm, friendly | Marketplace, social | | `beam-lib` | Gradient, modern | Creative tools | | `corporate-fintech` | Conservative, trust | Enterprise, finance | | `glassmorphic-dark` | Frosted glass effect | Modern dark UIs | | `minimal-light` | Ultra-clean light | Content-first apps | | `midnight-glass` | Dark with glass | Premium apps | | `vibrant-dark` | High-saturation dark | Gaming, entertainment | Full list of 31 design systems: https://better-design.com/design-systems ## Component Usage Patterns ### Basic Component Import After installing a component, import and use it like any shadcn component: ```tsx import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" export default function MyPage() { return ( <Card> <CardHeader> <CardTitle>Linear-styled Card</CardTitle> </CardHeader> <CardContent> <Input placeholder="Enter text..." /> <Button>Submit</Button> </CardContent> </Card> ) } ``` ### Mixing Design Systems You can install components from different design systems in the same project: ```tsx // Linear button with Stripe card import { Button } from "@/components/ui/button" // Linear import { Card } from "@/components/ui/card" // Stripe export default function MixedDesign() { return ( <Card className="p-6"> <h2>Checkout</h2> <Button>Pay with Linear button style</Button> </Card> ) } ``` **Note:** CSS variables may conflict when mixing design systems. For best results, stick to one design system per project or carefully test combinations. ### Form Components Example ```tsx import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function ContactForm() { return ( <form className="space-y-4"> <div> <Label htmlFor="name">Name</Label> <Input id="name" placeholder="John Doe" /> </div> <div> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="john@example.com" /> </div> <div> <Label htmlFor="topic">Topic</Label> <Select> <SelectTrigger id="topic"> <SelectValue placeholder="Select a topic" /> </SelectTrigger> <SelectContent> <SelectItem value="support">Support</SelectItem> <SelectItem value="sales">Sales</SelectItem> <SelectItem value="feedback">Feedback</SelectItem> </SelectContent> </Select> </div> <div> <Label htmlFor="message">Message</Label> <Textarea id="message" placeholder="Your message..." /> </div> <Button type="submit">Send Message</Button> </form> ) } ``` ### Dialog Component Example ```tsx import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export default function EditProfileDialog() { return ( <Dialog> <DialogTrigger asChild> <Button variant="outline">Edit Profile</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Edit profile</DialogTitle> <DialogDescription> Make changes to your profile here. Click save when you're done. </DialogDescription> </DialogHeader> <div className="grid gap-4 py-4"> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="username" className="text-right"> Username </Label> <Input id="username" defaultValue="@johndoe" className="col-span-3" /> </div> </div> <DialogFooter> <Button type="submit">Save changes</Button> </DialogFooter> </DialogContent> </Dialog> ) } ``` ### Data Table Example ```tsx import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" const invoices = [ { id: "INV001", status: "Paid", amount: "$250.00" }, { id: "INV002", status: "Pending", amount: "$150.00" }, { id: "INV003", status: "Paid", amount: "$350.00" }, ] export default function InvoiceTable() { return ( <Table> <TableCaption>A list of your recent invoices.</TableCaption> <TableHeader> <TableRow> <TableHead>Invoice</TableHead> <TableHead>Status</TableHead> <TableHead>Amount</TableHead> <TableHead className="text-right">Actions</TableHead> </TableRow> </TableHeader> <TableBody> {invoices.map((invoice) => ( <TableRow key={invoice.id}> <TableCell className="font-medium">{invoice.id}</TableCell> <TableCell> <Badge variant={invoice.status === "Paid" ? "default" : "secondary"}> {invoice.status} </Badge> </TableCell> <TableCell>{invoice.amount}</TableCell> <TableCell className="text-right"> <Button variant="ghost" size="sm">View</Button> </TableCell> </TableRow> ))} </TableBody> </Table> ) } ``` ## Available Components Each design system includes ~89 components: **Layout & Structure:** - `accordion`, `card`, `separator`, `tabs`, `table` **Forms & Input:** - `button`, `input`, `textarea`, `checkbox`, `radio-group`, `select`, `slider`, `switch`, `form`, `label` **Feedback & Overlays:** - `dialog`, `alert-dialog`, `drawer`, `sheet`, `popover`, `tooltip`, `toast`, `alert`, `badge`, `progress`, `skeleton` **Navigation:** - `navigation-menu`, `menubar`, `dropdown-menu`, `context-menu`, `breadcrumb`, `pagination`, `command` **Data Display:** - `avatar`, `calendar`, `chart`, `carousel`, `collapsible`, `data-table`, `hover-card`, `aspect-ratio` **Typography:** - `typography` ## Configuration ### CSS Variables Each design system uses CSS variables defined in `globals.css`. When you install your first component from a design system, the CLI updates `globals.css` with theme tokens: ```css @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; /* ... more variables */ } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; /* ... dark mode overrides */ } } ``` These variables are automatically configured — you don't need to manually edit them. ### Tailwind Configuration Better Design components use your existing shadcn Tailwind config. Ensure your `tailwind.config.ts` has the shadcn setup: ```typescript import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, // ... other color definitions }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } export default config ``` ## Repository Structure If forking or contributing to the Better Design repo: ``` registry/