- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Recommended for new projects: Use shadcn/create to build your preset visually and generate the right setup command for your framework.
Choose the setup that matches your starting point.
Build your preset visually and generate a setup command.
Scaffold a supported template directly from the terminal.
Add StyleDriven UI to an app you already created.
Use shadcn/create
Build your preset visually, preview your choices, and generate a framework-specific setup command.
Open shadcn/create
Available for Next.js, Vite, Laravel, React Router, Astro, and TanStack Start.
Use the CLI
Use the CLI to scaffold a new project directly from the terminal:
pnpm dlx shadcn@latest init -t [framework]
Supported templates: next, vite, start, react-router, and astro.
For Laravel, create the app first with laravel new, then run npx shadcn@latest init.
Existing Project
Each framework guide includes an Existing Project section with the manual setup steps for that framework.
Pick your framework below and follow that path.
Choose Your Framework
For Laravel, start with laravel new before using shadcn/create or sd-ui init.