shadcn-ui/ui: A set of beautifully-designed, accessible components and a code distribution platform

🔗 View on GitHub: shadcn-ui/ui

🚀 Quick Installation

Beautifully-designed components that you can customize, extend, and build on.

npx

npx shadcn@latest init
npx shadcn add button card dialog

Manual

npx skills add shadcn-ui/ui --skill shadcn

What It Does

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code. Use this to build your own component library.

Key Features

• 🎨 Beautiful Design — Carefully crafted components with attention to detail
• ♿ Accessible — WCAG compliant with proper ARIA attributes
• 🔧 Customizable — Copy-paste and make it your own
• 📦 Framework Agnostic — Works with React, Vue, Svelte, and more
• 🎯 Type-Safe — Built with TypeScript for better DX

Component Collection

50+ components including:

• Form elements: Button, Input, Textarea, Select, Checkbox, Radio
• Layout: Card, Dialog, Sheet, Tabs, Accordion, Collapsible
• Navigation: Menubar, Dropdown Menu, Context Menu, Command
• Feedback: Alert, Toast, Progress, Skeleton, Spinner
• Data Display: Table, Data Table, Calendar, Chart
• Overlays: Tooltip, Popover, Hover Card, Drawer

Design Principles

• ✅ Unopinionated styling — bring your own design system
• ✅ Composition over configuration
• ✅ Copy-paste friendly — own your code
• ✅ Accessible by default

Example Usage

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export default function Page() {
  return (
    
      
        Welcome
      
      
        Get Started
      
    
  )
}

📚 Documentation | 💻 Website | 🐛 Issues