Get Started
Migration
Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Formsnap
- Hover Card
- Input OTP
- Input
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Range Calendar
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toggle Group
- Toggle
- Tooltip
- Typography
Installation
Special sponsor
We're looking for one partner to be featured here.
Support the project and reach thousands of developers.
Reach outThis project and the components are written in TypeScript. We recommend using TypeScript for your project as well.
However, we provide a JavaScript version of the components as well. The JavaScript version is only available via the CLI.
To opt-out of TypeScript, you can use the typescript
flag in your components.json
file.
{
"style": "default",
"tailwind": {
"css": "src/app.css"
},
"typescript": false,
"aliases": {
"utils": "$lib/utils",
"components": "$lib/components",
"hooks": "$lib/hooks",
"ui": "$lib/components/ui"
},
"registry": "https://shadcn-svelte.com/registry"
}
To configure import aliases, create a jsconfig.json
file:
{
"compilerOptions": {
"paths": {
"$lib/*": ["./src/lib/*"]
}
}
}