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/*"]
    }
  }
}