# Table of Contents - [Introduction - shadcn-svelte](#introduction-shadcn-svelte) - [Components - shadcn-svelte](#components-shadcn-svelte) - [Installation - shadcn-svelte](#installation-shadcn-svelte) - [components.json - shadcn-svelte](#components-json-shadcn-svelte) - [Dark Mode - shadcn-svelte](#dark-mode-shadcn-svelte) - [JavaScript - shadcn-svelte](#javascript-shadcn-svelte) - [Theming - shadcn-svelte](#theming-shadcn-svelte) - [CLI - shadcn-svelte](#cli-shadcn-svelte) - [Figma - shadcn-svelte](#figma-shadcn-svelte) - [Legacy Docs - shadcn-svelte](#legacy-docs-shadcn-svelte) - [Changelog - shadcn-svelte](#changelog-shadcn-svelte) - [Svelte 5 - shadcn-svelte](#svelte-5-shadcn-svelte) - [Accordion - shadcn-svelte](#accordion-shadcn-svelte) - [Tailwind v4 - shadcn-svelte](#tailwind-v4-shadcn-svelte) - [Alert Dialog - shadcn-svelte](#alert-dialog-shadcn-svelte) - [Alert - shadcn-svelte](#alert-shadcn-svelte) - [Aspect Ratio - shadcn-svelte](#aspect-ratio-shadcn-svelte) - [Avatar - shadcn-svelte](#avatar-shadcn-svelte) - [Badge - shadcn-svelte](#badge-shadcn-svelte) - [Button - shadcn-svelte](#button-shadcn-svelte) - [Breadcrumb - shadcn-svelte](#breadcrumb-shadcn-svelte) - [Card - shadcn-svelte](#card-shadcn-svelte) - [Checkbox - shadcn-svelte](#checkbox-shadcn-svelte) - [Collapsible - shadcn-svelte](#collapsible-shadcn-svelte) - [Calendar - shadcn-svelte](#calendar-shadcn-svelte) - [Carousel - shadcn-svelte](#carousel-shadcn-svelte) - [Combobox - shadcn-svelte](#combobox-shadcn-svelte) - [Command - shadcn-svelte](#command-shadcn-svelte) - [Chart - shadcn-svelte](#chart-shadcn-svelte) - [Context Menu - shadcn-svelte](#context-menu-shadcn-svelte) - [Dialog - shadcn-svelte](#dialog-shadcn-svelte) - [Date Picker - shadcn-svelte](#date-picker-shadcn-svelte) - [Drawer - shadcn-svelte](#drawer-shadcn-svelte) - [Dropdown Menu - shadcn-svelte](#dropdown-menu-shadcn-svelte) - [Hover Card - shadcn-svelte](#hover-card-shadcn-svelte) - [Data Table - shadcn-svelte](#data-table-shadcn-svelte) - [Formsnap - shadcn-svelte](#formsnap-shadcn-svelte) - [Input - shadcn-svelte](#input-shadcn-svelte) - [Label - shadcn-svelte](#label-shadcn-svelte) - [Input OTP - shadcn-svelte](#input-otp-shadcn-svelte) - [Pagination - shadcn-svelte](#pagination-shadcn-svelte) --- # Introduction - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Open Code](https://www.shadcn-svelte.com/docs#open-code) [Composition](https://www.shadcn-svelte.com/docs#composition) [Distribution](https://www.shadcn-svelte.com/docs#distribution) [Beautiful Defaults](https://www.shadcn-svelte.com/docs#beautiful-defaults) [AI-Ready](https://www.shadcn-svelte.com/docs#ai-ready) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Introduction ============ [Next](https://www.shadcn-svelte.com/docs/installation) Re-usable components built with Bits UI and Tailwind CSS. An unofficial, community-led [Svelte](https://svelte.dev/) port of [shadcn/ui](https://ui.shadcn.com/) . We are not affiliated with [shadcn](https://twitter.com/shadcn) , but we did get his blessing before creating a Svelte version of his work. This project was born out of the need for a similar project for the Svelte ecosystem. **This is not a component library. It is how you build your component library.** You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app. This approach works well until you need to customize a component to fit your design system or require one that isn’t included in the library. **Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.** This is what shadcn-svelte aims to solve. It is built around the following principles: * **Open Code:** The top layer of your component code is open for modification. * **Composition:** Every component uses a common, composable interface, making them predictable. * **Distribution:** A flat-file schema and command-line tool make it easy to distribute components. * **Beautiful Defaults:** Carefully chosen default styles, so you get great design out-of-the-box. * **AI-Ready:** Open code for LLMs to read, understand, and improve. Open Code --------- shadcn-svelte hands you the actual component code. You have full control to customize and extend the components to your needs. This means: * **Full Transparency:** You see exactly how each component is built. * **Easy Customization:** Modify any part of a component to fit your design and functionality requirements. * **AI Integration:** Access to the code makes it straightforward for LLMs to read, understand, and even improve your components. _In a typical library, if you need to change a button’s behavior, you have to override styles or wrap the component. With shadcn-svelte, you simply edit the button code directly._ How do I pull upstream updates in an Open Code approach? shadcn-svelte follows a headless component architecture. This means the core of your app can receive fixes by updating your dependencies, for instance, bits-ui or paneforge. The topmost layer, i.e., the one closest to your design system, is not coupled with the implementation of the library. It stays open for modification. Composition ----------- Every component in shadcn-svelte shares a common, composable interface. **If a component does not exist, we bring it in, make it composable, and adjust its style to match and work with the rest of the design system.** _A shared, composable interface means it's predictable for both your team and LLMs. You are not learning different APIs for every new component. Even for third-party ones._ Distribution ------------ shadcn-svelte is also a code distribution system. It defines a schema for components and a CLI to distribute them. * **Schema:** A flat-file structure that defines the components, their dependencies, and properties. * **CLI:** A command-line tool to distribute and install components across projects with cross-framework support. _You can use the schema to distribute your components to other projects or have AI generate completely new components based on existing schema._ Beautiful Defaults ------------------ shadcn-svelte comes with a large collection of components that have carefully chosen default styles. They are designed to look good on their own and to work well together as a consistent system: * **Good Out-of-the-Box:** Your UI has a clean and minimal look without extra work. * **Unified Design:** Components naturally fit with one another. Each component is built to match the others, keeping your UI consistent. * **Easily Customizable:** If you want to change something, it's simple to override and extend the defaults. AI-Ready -------- The design of shadcn-svelte makes it easy for AI tools to work with your code. Its open code and consistent API allow AI models to read, understand, and even generate new components. _An AI model can learn how your components work and suggest improvements or even create new components that integrate with your existing design._ [Installation](https://www.shadcn-svelte.com/docs/installation) --- # Components - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Components ========== [Previous](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) [Next](https://www.shadcn-svelte.com/docs/components/accordion) Here you can find all the components available in the library. We are working on adding more components. [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) [Alert](https://www.shadcn-svelte.com/docs/components/alert) [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) [Badge](https://www.shadcn-svelte.com/docs/components/badge) [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) [Button](https://www.shadcn-svelte.com/docs/components/button) [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) [Card](https://www.shadcn-svelte.com/docs/components/card) [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) [Chart](https://www.shadcn-svelte.com/docs/components/chart) [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) [Command](https://www.shadcn-svelte.com/docs/components/command) [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) [Formsnap](https://www.shadcn-svelte.com/docs/components/form) [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) [Input](https://www.shadcn-svelte.com/docs/components/input) [Label](https://www.shadcn-svelte.com/docs/components/label) [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) [Popover](https://www.shadcn-svelte.com/docs/components/popover) [Progress](https://www.shadcn-svelte.com/docs/components/progress) [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) [Select](https://www.shadcn-svelte.com/docs/components/select) [Separator](https://www.shadcn-svelte.com/docs/components/separator) [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) [Slider](https://www.shadcn-svelte.com/docs/components/slider) [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) [Switch](https://www.shadcn-svelte.com/docs/components/switch) [Table](https://www.shadcn-svelte.com/docs/components/table) [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) [Typography](https://www.shadcn-svelte.com/docs/components/typography) [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) --- # Installation - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Guides](https://www.shadcn-svelte.com/docs/installation#guides) [Imports](https://www.shadcn-svelte.com/docs/installation#imports) [VSCode extension](https://www.shadcn-svelte.com/docs/installation#vscode-extension) [JetBrains IDEs extension](https://www.shadcn-svelte.com/docs/installation#jetbrains-ides-extension) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Installation ============ [Previous](https://www.shadcn-svelte.com/docs) [Next](https://www.shadcn-svelte.com/docs/components-json) How to install dependencies and structure your app. Guides ------ [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) [Astro\ \ Astro](https://www.shadcn-svelte.com/docs/installation/astro) [Vite\ \ Vite](https://www.shadcn-svelte.com/docs/installation/vite) [Manual](https://www.shadcn-svelte.com/docs/installation/manual) Imports ------- Unlike the original [shadcn/ui](https://ui.shadcn.com/) for React, where the full components can exist in a single file, components in this port are split into multiple files. This is because Svelte doesn't support defining multiple components in a single file, so utilizing the CLI to add components will be the optimal approach. The CLI will create a folder for _each_ component, which will sometimes just contain a single Svelte file, and in other times, multiple files. Within each folder, there will be an `index.ts` file that exports the component(s), so you can import them from a single file. For example, the Accordion component is split into four `.svelte` files: * `accordion.svelte` * `accordion-content.svelte` * `accordion-item.svelte` * `accordion-trigger.svelte` They can then be imported from the `accordion/index.ts` file like so: `import * as Accordion from '$lib/components/ui/accordion" // or import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "$lib/components/ui/accordion"` Copy Regardless of the import approach you take, the components will be tree-shaken by Rollup, so you don't have to worry about unused components being bundled into your app. VSCode extension ---------------- Install the shadcn-svelte [VSCode extension](https://marketplace.visualstudio.com/items?itemName=Selemondev.vscode-shadcn-svelte) by [@selemondev](https://github.com/selemondev) in Visual Studio Code to easily add Shadcn Svelte components to your project. This extension offers a range of features: * Ability to initialize the shadcn-svelte CLI * Add components to your project * Navigate to a specific component's documentation page directly from your IDE * Handy snippets for quick component imports and markup JetBrains IDEs extension ------------------------ Install the shadcn/ui Components Manager [JetBrains extension](https://plugins.jetbrains.com/plugin/23479-shadcn-ui-components-manager) by [@WarningImHack3r](https://github.com/WarningImHack3r) in any JetBrains IDE (IntelliJ IDEA, WebStorm...) to easily manage shadcn components within your project. This extension offers a range of features, including: * Automatically detect shadcn/ui components in your project * Instantly add, remove, and update them with a single click * Supports all shadcn/ui implementations: Svelte, React, Vue, and Solid * Easily search for remote or existing components [Introduction](https://www.shadcn-svelte.com/docs) [components.json](https://www.shadcn-svelte.com/docs/components-json) --- # components.json - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [$schema](https://www.shadcn-svelte.com/docs/components-json#schema) [tailwind](https://www.shadcn-svelte.com/docs/components-json#tailwind) [tailwind.css](https://www.shadcn-svelte.com/docs/components-json#tailwindcss) [tailwind.baseColor](https://www.shadcn-svelte.com/docs/components-json#tailwindbasecolor) [aliases](https://www.shadcn-svelte.com/docs/components-json#aliases) [aliases.lib](https://www.shadcn-svelte.com/docs/components-json#aliaseslib) [aliases.utils](https://www.shadcn-svelte.com/docs/components-json#aliasesutils) [aliases.components](https://www.shadcn-svelte.com/docs/components-json#aliasescomponents) [aliases.ui](https://www.shadcn-svelte.com/docs/components-json#aliasesui) [aliases.hooks](https://www.shadcn-svelte.com/docs/components-json#aliaseshooks) [Typescript](https://www.shadcn-svelte.com/docs/components-json#typescript) [Registry](https://www.shadcn-svelte.com/docs/components-json#registry) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) components.json =============== [Previous](https://www.shadcn-svelte.com/docs/installation) [Next](https://www.shadcn-svelte.com/docs/theming) Configuration for your project. The `components.json` file holds configuration for your project. We use it to understand how your project is set up and how to generate components customized for your project. Note: The `components.json` file is optional and **only required if you're using the CLI** to add components to your project. If you're using the copy and paste method, you don't need this file. You can create a `components.json` file in your project by running the following command: pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest init npx shadcn-svelte@latest init bun x shadcn-svelte@latest init npx shadcn-svelte@latest init Copy See the [CLI section](https://www.shadcn-svelte.com/docs/cli) for more information. $schema ------- You can see the JSON Schema for `components.json` [here](https://shadcn-svelte.com/schema.json) . components.json `{ "$schema": "https://shadcn-svelte.com/schema.json" }` Copy tailwind -------- Configuration to help the CLI understand how Tailwind CSS is set up in your project. See the [installation section](https://www.shadcn-svelte.com/docs/installation) for how to set up Tailwind CSS. ### tailwind.css Path to the CSS file that imports Tailwind CSS into your project. components.json `{ "tailwind": { "css": "src/app.{p,post}css" } }` Copy ### tailwind.baseColor This is used to generate the default color palette for your components. **This cannot be changed after initialization.** components.json `{ "tailwind": { "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc" } }` Copy aliases ------- The CLI uses these values and the `alias` config from your `svelte.config.js` file to place generated components in the correct location. Path aliases have to be set up in your `svelte.config.js` file. ### aliases.lib Import alias for your library, which is _typically_ where you store your components, utils, hooks, etc. components.json `{ "aliases": { "lib": "$lib" } }` Copy ### aliases.utils Import alias for your utility functions. components.json `{ "aliases": { "utils": "$lib/utils" } }` Copy ### aliases.components Import alias for your components. components.json `{ "aliases": { "components": "$lib/components" } }` Copy ### aliases.ui Import alias for your UI components. components.json `{ "aliases": { "ui": "$lib/components/ui" } }` Copy ### aliases.hooks Import alias for your hooks, which in Svelte 5 are reactive functions/classes whose files typically end in `.svelte.ts` or `.svelte.js`. components.json `{ "aliases": { "hooks": "$lib/hooks" } }` Copy Typescript ---------- Typescript can be enabled or disabled. components.json `{ "typescript": true | false }` Copy You can also specify a path to your own custom Typescript config file if it has a different name from `tsconfig.json` or `jsconfig.json`, or if it is located in a different directory: components.json `{ "typescript": { "config": "path/to/tsconfig.custom.json" } }` Copy Registry -------- The registry URL tells the CLI where to fetch the shadcn-svelte components/registry from. You can pin this to a specific preview release or your own fork of the registry. components.json `{ "registry": "https://shadcn-svelte.com/registry" }` Copy [Installation](https://www.shadcn-svelte.com/docs/installation) [Theming](https://www.shadcn-svelte.com/docs/theming) --- # Dark Mode - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Dark Mode ========= [Previous](https://www.shadcn-svelte.com/docs/theming) [Next](https://www.shadcn-svelte.com/docs/cli) Adding dark mode to your site. [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) [Astro\ \ Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) [Theming](https://www.shadcn-svelte.com/docs/theming) [CLI](https://www.shadcn-svelte.com/docs/cli) --- # JavaScript - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) JavaScript ========== [Previous](https://www.shadcn-svelte.com/docs/cli) [Next](https://www.shadcn-svelte.com/docs/figma) How to use shadcn-svelte with JavaScript. This 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](https://www.shadcn-svelte.com/docs/cli) . To opt-out of TypeScript, you can use the `typescript` flag in your `components.json` file. components.json `{ "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" }` Copy To configure import aliases, create a `jsconfig.json` file: jsconfig.json `{ "compilerOptions": { "paths": { "$lib/*": ["./src/lib/*"] } } }` Copy [CLI](https://www.shadcn-svelte.com/docs/cli) [Figma](https://www.shadcn-svelte.com/docs/figma) --- # Theming - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Convention](https://www.shadcn-svelte.com/docs/theming#convention) [List of variables](https://www.shadcn-svelte.com/docs/theming#list-of-variables) [Adding new colors](https://www.shadcn-svelte.com/docs/theming#adding-new-colors) [Other color formats](https://www.shadcn-svelte.com/docs/theming#other-color-formats) [Base Colors](https://www.shadcn-svelte.com/docs/theming#base-colors) [Neutral](https://www.shadcn-svelte.com/docs/theming#neutral) [Stone](https://www.shadcn-svelte.com/docs/theming#stone) [Zinc](https://www.shadcn-svelte.com/docs/theming#zinc) [Gray](https://www.shadcn-svelte.com/docs/theming#gray) [Slate](https://www.shadcn-svelte.com/docs/theming#slate) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Theming ======= [Previous](https://www.shadcn-svelte.com/docs/components-json) [Next](https://www.shadcn-svelte.com/docs/dark-mode) Use CSS Variables to customize the look and feel of your application. We use CSS variables for styling. This allows you to easily change the colors of components without having to update class names. Convention ---------- We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color. The `background` suffix is omitted when the variable is used for the background color of the component. Given the following CSS variables: `--primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0);` Copy The `background` color of the following component will be `var(--primary)` and the `foreground` color will be `var(--primary-foreground)`. `
Hello
` Copy List of variables ----------------- Here's the list of variables available for customization: src/app.css `:root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.269 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.371 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.439 0 0); }` Copy Adding new colors ----------------- To add new colors, you need to add them to your CSS file. src/app.css `:root { --warning: oklch(0.84 0.16 84); --warning-foreground: oklch(0.28 0.07 46); } .dark { --warning: oklch(0.41 0.11 46); --warning-foreground: oklch(0.99 0.02 95); } @theme inline { --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); }` Copy You can now use the `warning` utility class in your components. `
` Copy Other color formats ------------------- See the [Tailwind CSS documentation](https://tailwindcss.com/docs/colors) for more information on using colors in Tailwind CSS. Base Colors ----------- For reference, here's a list of the base colors that are available. ### Neutral Expand src/app.css `:root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); }` Copy Expand ### Stone Expand src/app.css `:root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.147 0.004 49.25); --card: oklch(1 0 0); --card-foreground: oklch(0.147 0.004 49.25); --popover: oklch(1 0 0); --popover-foreground: oklch(0.147 0.004 49.25); --primary: oklch(0.216 0.006 56.043); --primary-foreground: oklch(0.985 0.001 106.423); --secondary: oklch(0.97 0.001 106.424); --secondary-foreground: oklch(0.216 0.006 56.043); --muted: oklch(0.97 0.001 106.424); --muted-foreground: oklch(0.553 0.013 58.071); --accent: oklch(0.97 0.001 106.424); --accent-foreground: oklch(0.216 0.006 56.043); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.923 0.003 48.717); --input: oklch(0.923 0.003 48.717); --ring: oklch(0.709 0.01 56.259); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0.001 106.423); --sidebar-foreground: oklch(0.147 0.004 49.25); --sidebar-primary: oklch(0.216 0.006 56.043); --sidebar-primary-foreground: oklch(0.985 0.001 106.423); --sidebar-accent: oklch(0.97 0.001 106.424); --sidebar-accent-foreground: oklch(0.216 0.006 56.043); --sidebar-border: oklch(0.923 0.003 48.717); --sidebar-ring: oklch(0.709 0.01 56.259); } .dark { --background: oklch(0.147 0.004 49.25); --foreground: oklch(0.985 0.001 106.423); --card: oklch(0.216 0.006 56.043); --card-foreground: oklch(0.985 0.001 106.423); --popover: oklch(0.216 0.006 56.043); --popover-foreground: oklch(0.985 0.001 106.423); --primary: oklch(0.923 0.003 48.717); --primary-foreground: oklch(0.216 0.006 56.043); --secondary: oklch(0.268 0.007 34.298); --secondary-foreground: oklch(0.985 0.001 106.423); --muted: oklch(0.268 0.007 34.298); --muted-foreground: oklch(0.709 0.01 56.259); --accent: oklch(0.268 0.007 34.298); --accent-foreground: oklch(0.985 0.001 106.423); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.553 0.013 58.071); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.216 0.006 56.043); --sidebar-foreground: oklch(0.985 0.001 106.423); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0.001 106.423); --sidebar-accent: oklch(0.268 0.007 34.298); --sidebar-accent-foreground: oklch(0.985 0.001 106.423); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.553 0.013 58.071); }` Copy Expand ### Zinc Expand src/app.css `:root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.21 0.006 285.885); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.705 0.015 286.067); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.21 0.006 285.885); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.705 0.015 286.067); } .dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.92 0.004 286.32); --primary-foreground: oklch(0.21 0.006 285.885); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.552 0.016 285.938); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.552 0.016 285.938); }` Copy Expand ### Gray Expand src/app.css `:root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.13 0.028 261.692); --card: oklch(1 0 0); --card-foreground: oklch(0.13 0.028 261.692); --popover: oklch(1 0 0); --popover-foreground: oklch(0.13 0.028 261.692); --primary: oklch(0.21 0.034 264.665); --primary-foreground: oklch(0.985 0.002 247.839); --secondary: oklch(0.967 0.003 264.542); --secondary-foreground: oklch(0.21 0.034 264.665); --muted: oklch(0.967 0.003 264.542); --muted-foreground: oklch(0.551 0.027 264.364); --accent: oklch(0.967 0.003 264.542); --accent-foreground: oklch(0.21 0.034 264.665); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.928 0.006 264.531); --input: oklch(0.928 0.006 264.531); --ring: oklch(0.707 0.022 261.325); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0.002 247.839); --sidebar-foreground: oklch(0.13 0.028 261.692); --sidebar-primary: oklch(0.21 0.034 264.665); --sidebar-primary-foreground: oklch(0.985 0.002 247.839); --sidebar-accent: oklch(0.967 0.003 264.542); --sidebar-accent-foreground: oklch(0.21 0.034 264.665); --sidebar-border: oklch(0.928 0.006 264.531); --sidebar-ring: oklch(0.707 0.022 261.325); } .dark { --background: oklch(0.13 0.028 261.692); --foreground: oklch(0.985 0.002 247.839); --card: oklch(0.21 0.034 264.665); --card-foreground: oklch(0.985 0.002 247.839); --popover: oklch(0.21 0.034 264.665); --popover-foreground: oklch(0.985 0.002 247.839); --primary: oklch(0.928 0.006 264.531); --primary-foreground: oklch(0.21 0.034 264.665); --secondary: oklch(0.278 0.033 256.848); --secondary-foreground: oklch(0.985 0.002 247.839); --muted: oklch(0.278 0.033 256.848); --muted-foreground: oklch(0.707 0.022 261.325); --accent: oklch(0.278 0.033 256.848); --accent-foreground: oklch(0.985 0.002 247.839); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.551 0.027 264.364); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.034 264.665); --sidebar-foreground: oklch(0.985 0.002 247.839); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0.002 247.839); --sidebar-accent: oklch(0.278 0.033 256.848); --sidebar-accent-foreground: oklch(0.985 0.002 247.839); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.551 0.027 264.364); }` Copy Expand ### Slate Expand src/app.css `:root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.129 0.042 264.695); --card: oklch(1 0 0); --card-foreground: oklch(0.129 0.042 264.695); --popover: oklch(1 0 0); --popover-foreground: oklch(0.129 0.042 264.695); --primary: oklch(0.208 0.042 265.755); --primary-foreground: oklch(0.984 0.003 247.858); --secondary: oklch(0.968 0.007 247.896); --secondary-foreground: oklch(0.208 0.042 265.755); --muted: oklch(0.968 0.007 247.896); --muted-foreground: oklch(0.554 0.046 257.417); --accent: oklch(0.968 0.007 247.896); --accent-foreground: oklch(0.208 0.042 265.755); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.929 0.013 255.508); --input: oklch(0.929 0.013 255.508); --ring: oklch(0.704 0.04 256.788); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.984 0.003 247.858); --sidebar-foreground: oklch(0.129 0.042 264.695); --sidebar-primary: oklch(0.208 0.042 265.755); --sidebar-primary-foreground: oklch(0.984 0.003 247.858); --sidebar-accent: oklch(0.968 0.007 247.896); --sidebar-accent-foreground: oklch(0.208 0.042 265.755); --sidebar-border: oklch(0.929 0.013 255.508); --sidebar-ring: oklch(0.704 0.04 256.788); } .dark { --background: oklch(0.129 0.042 264.695); --foreground: oklch(0.984 0.003 247.858); --card: oklch(0.208 0.042 265.755); --card-foreground: oklch(0.984 0.003 247.858); --popover: oklch(0.208 0.042 265.755); --popover-foreground: oklch(0.984 0.003 247.858); --primary: oklch(0.929 0.013 255.508); --primary-foreground: oklch(0.208 0.042 265.755); --secondary: oklch(0.279 0.041 260.031); --secondary-foreground: oklch(0.984 0.003 247.858); --muted: oklch(0.279 0.041 260.031); --muted-foreground: oklch(0.704 0.04 256.788); --accent: oklch(0.279 0.041 260.031); --accent-foreground: oklch(0.984 0.003 247.858); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.551 0.027 264.364); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.208 0.042 265.755); --sidebar-foreground: oklch(0.984 0.003 247.858); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.984 0.003 247.858); --sidebar-accent: oklch(0.279 0.041 260.031); --sidebar-accent-foreground: oklch(0.984 0.003 247.858); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.551 0.027 264.364); }` Copy Expand [components.json](https://www.shadcn-svelte.com/docs/components-json) [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) --- # CLI - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [init](https://www.shadcn-svelte.com/docs/cli#init) [Options](https://www.shadcn-svelte.com/docs/cli#options) [add](https://www.shadcn-svelte.com/docs/cli#add) [Options](https://www.shadcn-svelte.com/docs/cli#options-1) [registry build](https://www.shadcn-svelte.com/docs/cli#registry-build) [Options](https://www.shadcn-svelte.com/docs/cli#options-2) [Outgoing Requests](https://www.shadcn-svelte.com/docs/cli#outgoing-requests) [Proxy](https://www.shadcn-svelte.com/docs/cli#proxy) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) CLI === [Previous](https://www.shadcn-svelte.com/docs/dark-mode) [Next](https://www.shadcn-svelte.com/docs/javascript) Use the CLI to add components to your project. init ---- Use the `init` command to initialize dependencies for a new project. The `init` command installs dependencies, adds the `cn` util, and creates CSS variables for the project. pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest init npx shadcn-svelte@latest init bun x shadcn-svelte@latest init npx shadcn-svelte@latest init Copy You will be asked a few questions to configure `components.json`: `Which base color would you like to use? › Slate Where is your global CSS file? (this file will be overwritten) › src/app.css Configure the import alias for lib: › $lib Configure the import alias for components: › $lib/components Configure the import alias for utils: › $lib/utils Configure the import alias for hooks: › $lib/hooks Configure the import alias for ui: › $lib/components/ui` Copy ### Options `Usage: shadcn-svelte init [options] initialize your project and install dependencies Options: -c, --cwd the working directory (default: the current directory) -o, --overwrite overwrite existing files (default: false) --no-deps disable adding & installing dependencies --base-color the base color for the components (choices: "slate", "gray", "zinc", "neutral", "stone") --css path to the global CSS file --components-alias import alias for components --lib-alias import alias for lib --utils-alias import alias for utils --hooks-alias import alias for hooks --ui-alias import alias for ui --proxy fetch items from registry using a proxy -h, --help display help for command` Copy add --- Use the `add` command to add components and dependencies to your project. pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add [component] npx shadcn-svelte@latest add [component] bun x shadcn-svelte@latest add [component] npx shadcn-svelte@latest add [component] Copy You will be presented with a list of components to choose from: `Which components would you like to add? › Space to select. Return to submit. ◯ accordion ◯ alert ◯ alert-dialog ◯ aspect-ratio ◯ avatar ◯ badge ◯ button ◯ card ◯ checkbox ◯ collapsible` Copy ### Options `Usage: shadcn-svelte add [options] [components...] add components to your project Arguments: components the components to add or a url to the component Options: -c, --cwd the working directory (default: the current directory) --no-deps skips adding & installing package dependencies -a, --all install all components to your project (default: false) -y, --yes skip confirmation prompt (default: false) -o, --overwrite overwrite existing files (default: false) --proxy fetch components from registry using a proxy -h, --help display help for command` Copy registry build -------------- Use the `registry build` command to generate the registry JSON files. pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest registry build [registry.json] npx shadcn-svelte@latest registry build [registry.json] bun x shadcn-svelte@latest registry build [registry.json] npx shadcn-svelte@latest registry build [registry.json] Copy This command reads the `registry.json` file and generates the registry JSON files into the `static/r` directory. ### Options `Usage: shadcn-svelte registry build [options] [registry] build components for a shadcn-svelte registry Arguments: registry path to registry.json file (default: ./registry.json) Options: -c, --cwd the working directory (default: the current directory) -o, --output destination directory for json files (default: ./static/r) -h, --help display help for command` Copy Outgoing Requests ----------------- ### Proxy This enables the use of a proxy when sending out requests to fetch from the `shadcn-svelte` registry. If the `HTTP_PROXY` or `http_proxy` environment variables have been set, the request library underneath will respect the proxy settings. `HTTP_PROXY="" npx shadcn-svelte@latest init` Copy [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) [JavaScript](https://www.shadcn-svelte.com/docs/javascript) --- # Figma - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Grab a copy](https://www.shadcn-svelte.com/docs/figma#grab-a-copy) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Figma ===== [Previous](https://www.shadcn-svelte.com/docs/javascript) [Next](https://www.shadcn-svelte.com/docs/changelog) Every component recreated in Figma. With customizable props, typography and icons. The Figma UI Kit is open sourced by [Pietro Schirano](https://twitter.com/skirano) . Grab a copy ----------- [https://www.figma.com/community/file/1203061493325953101](https://www.figma.com/community/file/1203061493325953101) [JavaScript](https://www.shadcn-svelte.com/docs/javascript) [Changelog](https://www.shadcn-svelte.com/docs/changelog) --- # Legacy Docs - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Legacy Docs =========== [Previous](https://www.shadcn-svelte.com/docs/changelog) [Next](https://www.shadcn-svelte.com/docs/migration) View the legacy docs for shadcn-svelte and Tailwind v3. You're looking at the docs for Svelte 5 + Tailwind v4. If you're looking for older docs, you can find them below. [Svelte 5 + Tailwind v3 Docs](https://tw3.shadcn-svelte.com/) [Svelte 4 + Tailwind v3 Docs](https://svelte-4.shadcn-svelte.com/) [Changelog](https://www.shadcn-svelte.com/docs/changelog) [Migration](https://www.shadcn-svelte.com/docs/migration) --- # Changelog - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [June 2025](https://www.shadcn-svelte.com/docs/changelog#june-2025) [New Calendar Components](https://www.shadcn-svelte.com/docs/changelog#new-calendar-components) [May 2025](https://www.shadcn-svelte.com/docs/changelog#may-2025) [Tailwind v4 Support](https://www.shadcn-svelte.com/docs/changelog#tailwind-v4-support) [Charts](https://www.shadcn-svelte.com/docs/changelog#charts) [Custom Registry Support](https://www.shadcn-svelte.com/docs/changelog#custom-registry-support) [March 2024](https://www.shadcn-svelte.com/docs/changelog#march-2024) [Introducing Blocks](https://www.shadcn-svelte.com/docs/changelog#introducing-blocks) [New Component: Breadcrumb](https://www.shadcn-svelte.com/docs/changelog#new-component-breadcrumb) [New Component: Scroll Area](https://www.shadcn-svelte.com/docs/changelog#new-component-scroll-area) [February 2024](https://www.shadcn-svelte.com/docs/changelog#february-2024) [New Component: Resizable](https://www.shadcn-svelte.com/docs/changelog#new-component-resizable) [Updated Icon Imports](https://www.shadcn-svelte.com/docs/changelog#updated-icon-imports) [Major Forms Update](https://www.shadcn-svelte.com/docs/changelog#major-forms-update) [January 2024](https://www.shadcn-svelte.com/docs/changelog#january-2024) [New Component: Carousel](https://www.shadcn-svelte.com/docs/changelog#new-component-carousel) [New Component: Drawer](https://www.shadcn-svelte.com/docs/changelog#new-component-drawer) [New Component: Sonner](https://www.shadcn-svelte.com/docs/changelog#new-component-sonner) [New Component: Pagination](https://www.shadcn-svelte.com/docs/changelog#new-component-pagination) [December 2023](https://www.shadcn-svelte.com/docs/changelog#december-2023) [November 2023](https://www.shadcn-svelte.com/docs/changelog#november-2023) [New Component: Toggle Group](https://www.shadcn-svelte.com/docs/changelog#new-component-toggle-group) [October 2023](https://www.shadcn-svelte.com/docs/changelog#october-2023) [New Component: Command](https://www.shadcn-svelte.com/docs/changelog#new-component-command) [New Component: Combobox](https://www.shadcn-svelte.com/docs/changelog#new-component-combobox) [Updates to Form](https://www.shadcn-svelte.com/docs/changelog#updates-to-form) [Form.Label Changes](https://www.shadcn-svelte.com/docs/changelog#formlabel-changes) [Form.Control](https://www.shadcn-svelte.com/docs/changelog#formcontrol) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Changelog ========= [Previous](https://www.shadcn-svelte.com/docs/figma) [Next](https://www.shadcn-svelte.com/docs/legacy) Latest updates and announcements. June 2025 --------- ### New Calendar Components We've completely overhauled the `Calendar` and `RangeCalendar` components to support dropdowns for the month and year selectors, and have added 30+ Calendar blocks to help you get started building your own calendar components. Check out the [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) docs page and the [Calendar Blocks](https://www.shadcn-svelte.com/blocks/calendar) page for more. May 2025 -------- ### Tailwind v4 Support Tailwind v4 support has officially landed. You can see a full demo of the refreshed styles that come with it here: [https://v4.shadcn-svelte.com](https://v4.shadcn-svelte.com/) . This release includes several key changes, all outlined in the [Tailwind v4 migration guide](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) . If you're still using Svelte v5 with Tailwind v3, your project and the CLI will continue to work as expected until you're ready to upgrade. ### Charts Charts have been added as a preview component to the project. See the [Charts](https://www.shadcn-svelte.com/charts) page for examples. If you're running Svelte v5 and Tailwind v4 you can add them to your project via the CLI. ### Custom Registry Support We've added support for custom/remote registries - This means you can publish your own components and share them with the community via the `shadcn-svelte` CLI. See the [Registry documentation](https://www.shadcn-svelte.com/docs/registry) for more information. March 2024 ---------- ### Introducing Blocks [Blocks](https://www.shadcn-svelte.com/blocks) are ready-made components that you can use to build your apps. They are fully responsive, accessible, and composable, meaning they are built using the same principles as the rest of the components in shadcn-svelte. [v0](https://v0.dev/) only supports React at the moment, so you can't customize them like you can the original from [shadcn/ui](https://ui.shadcn.com/) . However, if having support for Svelte interests you, I'm sure the v0 team would love to hear about it. :) ### New Component: Breadcrumb We've added a new component to the project, [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) . ### New Component: Scroll Area We've added a new component to the project, [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) , which is built on top of the [Scroll Area](https://bits-ui.com/docs/components/scroll-area) component from Bits UI. It supports both vertical and horizontal scrolling, and is designed to provide a consistent experience across all browsers and platforms. February 2024 ------------- ### New Component: Resizable We've added a new component to the project, [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) , which is built on top of [PaneForge](https://paneforge.com/) . PaneForge is still in an early stage, so be sure to raise any issues you find with the library on the [PaneForge GitHub](https://github.com/svecosystem/paneforge) . ### Updated Icon Imports After some feedback about dev server performance, we've updated the way we import icons. With this change, we've decided to move away from the unmaintained `radix-icons-svelte` package to [svelte-radix](https://github.com/shinokada/svelte-radix) for the `new-york` style. Instead of importing icons like so: `import { Check } from "@lucide/svelte";` Copy We now import them directly: `import Check from "@lucide/svelte/icons/check";` Copy With deep imports, we're preventing Vite from optimizing the entire icon collections, and instead only optimizing the icons that are actually used in your project. From what we've seen, this has a massive impact on dev server performance. Enjoy! 🚀 ### Major Forms Update Formsnap has been completely rewritten to be more flexible, easier to use, and less opinionated. This means we've had to make some changes to the way we use it in `shadcn-svelte`, but once you get the hang of it, you'll find it's much more powerful and less restrictive than the previous iteration. Since the changes are so significant, there isn't a direct migration path from the old version to the new version. You'll need to update your components to use the new API, as well as ensure you're using the latest version of `formsnap` and `sveltekit-superforms`. All of the `Form` components have been updated to use the new API, and you can see live examples of them on the [Forms Examples](https://www.shadcn-svelte.com/examples/forms) page. Visit the [Formsnap](https://formsnap.dev/) documentation (which has also been updated) to learn more about the new API and how its used. January 2024 ------------ We've added four new components to the project, [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) , [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) , [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) , & [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) . ### New Component: Carousel We've added a new component to the project, [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) . Preview Code 1 2 3 4 5 Previous slide Next slide ` {#each Array(5), i}
{i + 1}
{/each} ` Copy ### New Component: Drawer The Drawer is built on top of [vaul-svelte](https://vaul-svelte.com/) and is a port of [vaul](https://vaul.emilkowalski.ski/) , originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React. Preview Code Open Drawer ` Open Drawer
Move Goal Set your daily activity goal.
{goal}
Calories/day
({ goal: d.goal, index: i }))} y="goal" x="index" xScale={scaleBand().padding(0.25)} axis={false} tooltip={false} props={{ bars: { stroke: "none", rounded: "all", radius: 4, // use the height of the chart to animate the bars initialY: context?.height, initialHeight: 0, motion: { x: { type: "tween", duration: 500, easing: cubicInOut }, width: { type: "tween", duration: 500, easing: cubicInOut }, height: { type: "tween", duration: 500, easing: cubicInOut }, y: { type: "tween", duration: 500, easing: cubicInOut } }, fill: "var(--color-foreground)", fillOpacity: 0.9 }, highlight: { area: { fill: "none" } } }} />
Cancel
` Copy ### New Component: Sonner The Sonner component is provided by [svelte-sonner](https://svelte-sonner.vercel.app/) , which is a Svelte port of [Sonner](https://sonner.emilkowal.ski/) , originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React. Preview Code Show Toast ` ` Copy ### New Component: Pagination Pagination leverages the [Pagination](https://bits-ui.com/docs/components/pagination) component from Bits UI. December 2023 ------------- We've added three new components to the project, [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) , [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) , & [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) . November 2023 ------------- ### New Component: Toggle Group We've added a new component to the library, [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) . October 2023 ------------ We've added two new components to the library, [Command](https://www.shadcn-svelte.com/docs/components/command) & [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) . We've also made some updates to the `` component that you'll want to be aware of. ### New Component: Command Command is a component that allows you to create a command palette. It's built on top of [cmdk-sv](https://cmdk-sv.com/) , which is a Svelte port of [cmdk](https://cmdk.paco.me/) . The library is still in its infancy, but we're excited to see where it goes. If you notice any issues, please [open an issue](https://github.com/huntabyte/cmdk-sv) with the library. Be sure to check out the [Command](https://www.shadcn-svelte.com/docs/components/command) docs for more information. ### New Component: Combobox Combobox is a combination of the `` & `` components. It allows you to create a searchable dropdown menu. Be sure to check out the [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) docs for more information. ### Updates to Form #### Form.Label Changes Since we had to make some internal changes to formsnap to fix outstanding issues, there is a slight modification we have to make to the `` component. The `ids` returned from `getFormField()` is now a store, so we need to prefix it with `$` when we use it. form-label.svelte `` Copy ### Form.Control Formsnap introduced a new component `` which wraps non-traditional form elements. This allows us to ensure the components are accessible, and work well with the rest of the form components. You'll need to define & export that control in your `form/index.ts` file. src/lib/ui/form/index.ts `// ...rest const Control = FormPrimitive.Control; export { // ...rest Control, Control as FormControl, };` Copy [Figma](https://www.shadcn-svelte.com/docs/figma) [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) --- # Svelte 5 - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Svelte 4 to Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5#svelte-4-to-svelte-5) [Prerequisites](https://www.shadcn-svelte.com/docs/migration/svelte-5#prerequisites) [Update Configs](https://www.shadcn-svelte.com/docs/migration/svelte-5#update-configs) [Update components.json](https://www.shadcn-svelte.com/docs/migration/svelte-5#update-componentsjson) [Update tailwind.config.js](https://www.shadcn-svelte.com/docs/migration/svelte-5#update-tailwindconfigjs) [Update utils.ts](https://www.shadcn-svelte.com/docs/migration/svelte-5#update-utilsts) [Upgrade Components](https://www.shadcn-svelte.com/docs/migration/svelte-5#upgrade-components) [Alias Dependencies (optional)](https://www.shadcn-svelte.com/docs/migration/svelte-5#alias-dependencies-optional) [Update Dependencies](https://www.shadcn-svelte.com/docs/migration/svelte-5#update-dependencies) [Start Migrating Components](https://www.shadcn-svelte.com/docs/migration/svelte-5#start-migrating-components) [Remove Unused Dependencies](https://www.shadcn-svelte.com/docs/migration/svelte-5#remove-unused-dependencies) [cmdk-sv](https://www.shadcn-svelte.com/docs/migration/svelte-5#cmdk-sv) [svelte-headless-table](https://www.shadcn-svelte.com/docs/migration/svelte-5#svelte-headless-table) [svelte-radix](https://www.shadcn-svelte.com/docs/migration/svelte-5#svelte-radix) [lucide-svelte](https://www.shadcn-svelte.com/docs/migration/svelte-5#lucide-svelte) [Next Steps](https://www.shadcn-svelte.com/docs/migration/svelte-5#next-steps) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Svelte 5 ======== [Previous](https://www.shadcn-svelte.com/docs/migration) [Next](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) How to migrate from Svelte 4 and Tailwind 3 to Svelte 5. **Note**: With Svelte 5 comes significant changes to this project, along with the headless UI library used [bits-ui](https://bits-ui.com/) . This guide is specifically focused on migrating the shadcn-svelte portions and does not cover the migration of `bits-ui`. See [Bits UI's migration guide](https://bits-ui.com/docs/migration-guide) for more information. Svelte 4 to Svelte 5 -------------------- This first guide will take your project from Svelte 4 with Tailwind 3 to Svelte 5 and Tailwind 3. Once you've completed this guide and you're comfortable everything is working, you can move on to the next guide to migrate to Tailwind 4. Prerequisites ------------- 1. Ensure you have read up on the changes from Svelte 4 to Svelte 5. Svelte provides a comprehensive guide for this on their [website](https://svelte.dev/docs/svelte/v5-migration-guide) . 2. Commit any pending changes to your repository. 3. Determine which of your components have custom behavior/styles so that you can reimplement those after updating. 4. Use [`sv-migrate`](https://svelte.dev/docs/cli/sv-migrate) to help you migrate your project to Svelte 5. Update Configs -------------- The `components.json`, `utils`, and the global CSS file have changed for Svelte 5. ### Update `components.json` Add the `registry` to the root object, and add `hooks`, `ui`, and `lib` keys under `aliases`. `{ "$schema": "https://shadcn-svelte.com/schema.json", "style": "default", "tailwind": { "css": "src/app.css", "baseColor": "slate" }, "aliases": { "components": "$lib/components", "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks", + "lib": "$lib" }, "typescript": true, + "registry": "https://shadcn-svelte.com/registry" }` Copy ### Update `tailwind.config.js` Add `tailwindcss-animate`. pnpmnpmbunyarn pnpm i tailwindcss-animate npm i tailwindcss-animate bun install tailwindcss-animate yarn install tailwindcss-animate Copy Add the `tailwindcss-animate` plugin, sidebar colors, and animations config. tailwind.config.js `import type { Config } from "tailwindcss"; import tailwindcssAnimate from "tailwindcss-animate"; const config: Config = { darkMode: ["class"], content: ["./src/**/*.{html,js,svelte,ts}"], safelist: ["dark"], theme: { container: { // unchanged ... }, extend: { colors: { // unchanged ... sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, borderRadius: { // unchanged ... }, fontFamily: { // unchanged ... }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--bits-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--bits-accordion-content-height)" }, to: { height: "0" }, }, "caret-blink": { "0%,70%,100%": { opacity: "1" }, "20%,50%": { opacity: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "caret-blink": "caret-blink 1.25s ease-out infinite", }, }, }, plugins: [tailwindcssAnimate], }; export default config;` Copy ### Update `utils.ts` **Note**: You may not want to do this step until after you've updated your components, as some components may rely on the now removed `flyAndScale` function. `utils.ts` now only exports the `cn` function and a few utility types. src/lib/utils.ts `import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // eslint-disable-next-line @typescript-eslint/no-explicit-any export type WithoutChild = T extends { child?: any } ? Omit : T; // eslint-disable-next-line @typescript-eslint/no-explicit-any export type WithoutChildren = T extends { children?: any } ? Omit : T; export type WithoutChildrenOrChild = WithoutChildren>; export type WithElementRef = T & { ref?: U | null; };` Copy Upgrade Components ------------------ ### Alias Dependencies (optional) If you plan to slowly migrate components, it's recommended to alias the old versions of the major dependencies, like `bits-ui`, in your `package.json` file so that you can use both versions of the library in your project while you migrate. package.json `{ "devDependencies": { - "bits-ui": "^0.22.0", + "bits-ui-old": "npm:bits-ui@0.22.0", } }` Copy You'll then want to replace all the imports used in your project to `bits-ui-old`. src/lib/components/ui/dialog-content.svelte `` Copy You can do the same for any of the other dependencies that you're using in your project. ### Update Dependencies The following dependencies have been updated to support Svelte 5: * `bits-ui` - `^1.0.0` * `svelte-sonner` - `^1.0.0` * `@lucide/svelte` - `^0.482.0` * `paneforge` - `^1.0.0-next.5` * `vaul-svelte` - `^1.0.0-next.7` * `mode-watcher` - `^1.0.0` * `cmdk-sv` - deprecated in favor of Bits UI's `Command` component * `svelte-headless-table` - deprecated in favor of `@tanstack/table-core` * `svelte-radix` - icons deprecated in favor of `@lucide/svelte` * `lucide-svelte` - replaced with `@lucide/svelte` You can update your dependencies by running the following command: pnpmnpmbunyarn pnpm i bits-ui@latest svelte-sonner@latest @lucide/svelte@latest paneforge@next vaul-svelte@next mode-watcher@latest -D npm i bits-ui@latest svelte-sonner@latest @lucide/svelte@latest paneforge@next vaul-svelte@next mode-watcher@latest -D bun install bits-ui@latest svelte-sonner@latest @lucide/svelte@latest paneforge@next vaul-svelte@next mode-watcher@latest -D yarn install bits-ui@latest svelte-sonner@latest @lucide/svelte@latest paneforge@next vaul-svelte@next mode-watcher@latest -D Copy ### Start Migrating Components Now you're ready to begin updating your components to their new versions. The CLI doesn't actually _update_ your components, it simply replaces them with the new versions, so be sure to commit your changes before running the CLI. `git add . git commit -m 'before migration'` Copy Now you can run the `add` command to start migrating your components. pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add dialog --overwrite npx shadcn-svelte@latest add dialog --overwrite bun x shadcn-svelte@latest add dialog --overwrite npx shadcn-svelte@latest add dialog --overwrite Copy Review the diff to see what was updated and make any necessary adjustments. Rinse and repeat for each component you want to migrate. Remove Unused Dependencies -------------------------- Once you've updated all your components, you can remove the old dependencies from your `package.json` file. ### cmdk-sv `cmdk-sv` has been replaced with Bits UI's `Command` component. pnpmnpmbunyarn pnpm remove cmdk-sv npm uninstall cmdk-sv bun remove cmdk-sv yarn remove cmdk-sv Copy ### svelte-headless-table `svelte-headless-table` has been replaced with `@tanstack/table-core`. pnpmnpmbunyarn pnpm remove svelte-headless-table npm uninstall svelte-headless-table bun remove svelte-headless-table yarn remove svelte-headless-table Copy ### svelte-radix `svelte-radix` has been replaced with `@lucide/svelte`. pnpmnpmbunyarn pnpm remove svelte-radix npm uninstall svelte-radix bun remove svelte-radix yarn remove svelte-radix Copy ### lucide-svelte `lucide-svelte` has been replaced with `@lucide/svelte`. pnpmnpmbunyarn pnpm remove lucide-svelte npm uninstall lucide-svelte bun remove lucide-svelte yarn remove lucide-svelte Copy Next Steps ---------- Once you've completed this guide and you're comfortable everything is working as expected, you can move on to the [Tailwind 4 Guide](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) . [Migration](https://www.shadcn-svelte.com/docs/migration) [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) --- # Accordion - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/accordion#installation) [Usage](https://www.shadcn-svelte.com/docs/components/accordion#usage) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Accordion ========= [Previous](https://www.shadcn-svelte.com/docs/components) [Next](https://www.shadcn-svelte.com/docs/components/alert-dialog) A vertically stacked set of interactive headings that each reveal a section of content. [Docs](https://bits-ui.com/docs/components/accordion) [API Reference](https://bits-ui.com/docs/components/accordion#api-reference) Component Source Preview Code Product Information Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability. Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts. Shipping Details We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days. All orders are carefully packaged and fully insured. Track your shipment in real-time through our dedicated tracking portal. Return Policy We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition. Our hassle-free return process includes free return shipping and full refunds processed within 48 hours of receiving the returned item. ` Product Information

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.

Shipping Details

We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.

All orders are carefully packaged and fully insured. Track your shipment in real-time through our dedicated tracking portal.

Return Policy

We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.

Our hassle-free return process includes free return shipping and full refunds processed within 48 hours of receiving the returned item.

` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add accordion npx shadcn-svelte@latest add accordion bun x shadcn-svelte@latest add accordion npx shadcn-svelte@latest add accordion Copy Install `bits-ui` pnpmnpmbunyarn pnpm i bits-ui npm i bits-ui bun install bits-ui yarn install bits-ui Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. ` Copy [Components](https://www.shadcn-svelte.com/docs/components) [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) --- # Tailwind v4 - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [What's New](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#whats-new) [See it Live](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#see-it-live) [Try It Out](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#try-it-out) [Upgrade Your Project](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#upgrade-your-project) [1\. Follow the Tailwind v4 Upgrade Guide](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#1-follow-the-tailwind-v4-upgrade-guide) [2\. Replace PostCSS with Vite](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#2-replace-postcss-with-vite) [Delete postcss.config.js](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#delete-postcssconfigjs) [Uninstall @tailwindcss/postcss](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#uninstall-tailwindcsspostcss) [Install @tailwindcss/vite](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#install-tailwindcssvite) [Update vite.config.ts](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#update-viteconfigts) [Verify the upgrade](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#verify-the-upgrade) [2\. Update your app.css file](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#2-update-your-appcss-file) [Replace tailwind-css-animate with tw-animate-css](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#replace-tailwind-css-animate-with-tw-animate-css) [Import tw-animate-css](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#import-tw-animate-css) [Add the custom variant for dark mode](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#add-the-custom-variant-for-dark-mode) [Remove the compatibility styles](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#remove-the-compatibility-styles) [CSS Variables and Theme Config](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#css-variables-and-theme-config) [Verify the update](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#verify-the-update) [Remove the tailwind.config file](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#remove-the-tailwindconfig-file) [3\. Use new size-\* utility](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#3-use-new-size--utility) [4\. Update your dependencies](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#4-update-your-dependencies) [5\. Update your utils (optional)](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#5-update-your-utils-optional) [6\. Update Your Colors (optional)](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#6-update-your-colors-optional) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Tailwind v4 =========== [Previous](https://www.shadcn-svelte.com/docs/migration/svelte-5) [Next](https://www.shadcn-svelte.com/docs/components) How to use shadcn-svelte with Tailwind v4 and Svelte 5. This documentation site is now running Tailwind v4. If you're looking for the old Tailwind v3 docs, you can find them here: [https://tw3.shadcn-svelte.com](https://tw3.shadcn-svelte.com/) . What's New ---------- * The `@latest` CLI can now initialize projects with Tailwind v4 and Svelte 5. * Full support for the new `@theme` directive and `@theme inline` option. * All components are updated for Tailwind v4 and Svelte 5. * Every primitive that renders an element now has a `data-slot` attribute for styling. * We've fixed and cleaned up the style of the components. * Buttons now use the default cursor. * We're deprecating the `default` style. New projects will use `new-york`. * HSL colors are now converted to OKLCH. **Note: this is non-breaking. Your existing apps with Tailwind v3 will continue to work. When you add new components, they'll still be in Tailwind v3 with the style configured in `components.json` until you upgrade. Only new projects start with Tailwind v4.** See it Live ----------- This documentation site is now using Tailwind v4 and Svelte 5, but for a more complete example, checkout the demo site here: [https://v4.shadcn-svelte.com](https://v4.shadcn-svelte.com/) . If you find any bugs, please us know on [GitHub](https://github.com/huntabyte/shadcn-svelte/issues) . Try It Out ---------- You can start using Tailwind v4 and Svelte 5 today using the `@latest` CLI. See the specific install docs [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) [Astro\ \ Astro](https://www.shadcn-svelte.com/docs/installation/astro) [Vite\ \ Vite](https://www.shadcn-svelte.com/docs/installation/vite) [Manual](https://www.shadcn-svelte.com/docs/installation/manual) Upgrade Your Project -------------------- **Note**: This guide assumes you are coming from a Svelte 5 and Tailwind 3 project. If you are coming from a Svelte 4 project, you should first follow the [Svelte 4 and Tailwind 3 to Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-4-tailwind-3-to-svelte-5) guide. **Important:** Before upgrading, please read the [Tailwind v4 Compatibility Docs](https://tailwindcss.com/docs/compatibility) and make sure your project is ready for the upgrade. Tailwind v4 uses bleeding-edge browser features and is designed for modern browsers. One of the major advantages of using `shadcn-svelte` is that the code you end up with is exactly what you'd write yourself. There are no hidden abstractions. This means when a dependency has a new release, you can just follow the official upgrade paths. Here's how to upgrade your existing projects: ### 1\. Follow the Tailwind v4 Upgrade Guide * Upgrade to Tailwind v4 by following the official upgrade guide: [https://tailwindcss.com/docs/upgrade-guide](https://tailwindcss.com/docs/upgrade-guide) * Use the `@tailwindcss/upgrade` codemod to remove deprecated utility classes and update the tailwind config. ### 2\. Replace PostCSS with Vite The upgrade script will automatically migrate your project to the latest PostCSS configuration of Tailwind v4, but the Tailwind team recommends using Vite instead, so we'll use that instead. #### Delete `postcss.config.js` postcss.config.js `- export default { - plugins: { - '@tailwindcss/postcss': {}, - } - };` Copy #### Uninstall `@tailwindcss/postcss` pnpmnpmbunyarn pnpm remove @tailwindcss/postcss npm uninstall @tailwindcss/postcss bun remove @tailwindcss/postcss yarn remove @tailwindcss/postcss Copy #### Install `@tailwindcss/vite` pnpmnpmbunyarn pnpm i @tailwindcss/vite -D npm i @tailwindcss/vite -D bun install @tailwindcss/vite -D yarn install @tailwindcss/vite -D Copy #### Update `vite.config.ts` vite.config.ts `import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; + import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ - plugins: [sveltekit()], + plugins: [tailwindcss(), sveltekit()], });` Copy #### Verify the upgrade Start your dev server and verify that all your styles are working as expected. pnpmnpmbunyarn pnpm run dev npm run dev bun run dev yarn run dev Copy ### 2\. Update your `app.css` file The codemod will update your `app.css` file to look something like this, where it's defining the colors as CSS variables and importing your existing `tailwind.config.ts` file: ``@import "tailwindcss"; @config '../tailwind.config.ts'; /* The default border color has changed to `currentcolor` in Tailwind CSS v4, so we've added these compatibility styles to make sure everything still looks the same as it did with Tailwind CSS v3. If we ever want to remove these styles, we need to add an explicit border color utility to any element that depends on these defaults. */ @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentcolor); } } @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 0 0% 98%; --ring: 240 10% 3.9%; --radius: 0.5rem; --sidebar: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --ring: 240 4.9% 83.9%; --sidebar: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }`` Copy In the following steps, we'll update this to completely remove the `tailwind.config.ts` and adopt the CSS-based config. #### Replace `tailwind-css-animate` with `tw-animate-css` We've deprecated `tailwindcss-animate` in favor of `tw-animate-css`, which has support for Tailwind v4. pnpmnpmbunyarn pnpm remove tailwindcss-animate npm uninstall tailwindcss-animate bun remove tailwindcss-animate yarn remove tailwindcss-animate Copy pnpmnpmbunyarn pnpm i tw-animate-css -D npm i tw-animate-css -D bun install tw-animate-css -D yarn install tw-animate-css -D Copy #### Import `tw-animate-css` app.css `@import "tailwindcss"; + @import "tw-animate-css"; /* ... */` Copy #### Add the custom variant for dark mode app.css `@import "tailwindcss"; @import "tw-animate-css"; +@custom-variant dark (&:is(.dark *)); /* ... */` Copy #### Remove the compatibility styles We override the styles applied here so this is just dead code. app.css ``@import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); - /* - The default border color has changed to `currentcolor` in Tailwind CSS v4, - so we've added these compatibility styles to make sure everything still - looks the same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add an explicit border - color utility to any element that depends on these defaults. - */ - @layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); - } - }`` Copy #### CSS Variables and Theme Config We'll move the CSS variables to the `:root` and `.dark` selectors, wrap the colors values in `hsl()`, and set up an `@theme inline` directive to replace our Tailwind v3 config. Once complete, your `app.css` file should look something like this (the color values will differ depending on your theme): app.css `@import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: hsl(0 0% 100%) /* <- Wrap in HSL */; --foreground: hsl(240 10% 3.9%); --muted: hsl(240 4.8% 95.9%); --muted-foreground: hsl(240 3.8% 46.1%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(240 10% 3.9%); --card: hsl(0 0% 100%); --card-foreground: hsl(240 10% 3.9%); --border: hsl(240 5.9% 90%); --input: hsl(240 5.9% 90%); --primary: hsl(240 5.9% 10%); --primary-foreground: hsl(0 0% 98%); --secondary: hsl(240 4.8% 95.9%); --secondary-foreground: hsl(240 5.9% 10%); --accent: hsl(240 4.8% 95.9%); --accent-foreground: hsl(240 5.9% 10%); --destructive: hsl(0 72.2% 50.6%); --destructive-foreground: hsl(0 0% 98%); --ring: hsl(240 10% 3.9%); --sidebar: hsl(0 0% 98%); --sidebar-foreground: hsl(240 5.3% 26.1%); --sidebar-primary: hsl(240 5.9% 10%); --sidebar-primary-foreground: hsl(0 0% 98%); --sidebar-accent: hsl(240 4.8% 95.9%); --sidebar-accent-foreground: hsl(240 5.9% 10%); --sidebar-border: hsl(220 13% 91%); --sidebar-ring: hsl(217.2 91.2% 59.8%); --radius: 0.5rem; } .dark { --background: hsl(240 10% 3.9%); --foreground: hsl(0 0% 98%); --muted: hsl(240 3.7% 15.9%); --muted-foreground: hsl(240 5% 64.9%); --popover: hsl(240 10% 3.9%); --popover-foreground: hsl(0 0% 98%); --card: hsl(240 10% 3.9%); --card-foreground: hsl(0 0% 98%); --border: hsl(240 3.7% 15.9%); --input: hsl(240 3.7% 15.9%); --primary: hsl(0 0% 98%); --primary-foreground: hsl(240 5.9% 10%); --secondary: hsl(240 3.7% 15.9%); --secondary-foreground: hsl(0 0% 98%); --accent: hsl(240 3.7% 15.9%); --accent-foreground: hsl(0 0% 98%); --destructive: hsl(0 62.8% 30.6%); --destructive-foreground: hsl(0 0% 98%); --ring: hsl(240 4.9% 83.9%); --sidebar: hsl(240 5.9% 10%); --sidebar-foreground: hsl(240 4.8% 95.9%); --sidebar-primary: hsl(224.3 76.3% 48%); --sidebar-primary-foreground: hsl(0 0% 100%); --sidebar-accent: hsl(240 3.7% 15.9%); --sidebar-accent-foreground: hsl(240 4.8% 95.9%); --sidebar-border: hsl(240 3.7% 15.9%); --sidebar-ring: hsl(217.2 91.2% 59.8%); } @theme inline { /* Radius (for rounded-*) */ --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* Colors */ --color-background: var(--background); --color-foreground: var(--foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-border: var(--border); --color-input: var(--input); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-ring: var(--ring); --color-radius: var(--radius); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }` Copy #### Verify the update Restart your dev server and verify that all your styles are working as expected. pnpmnpmbunyarn pnpm run dev npm run dev bun run dev yarn run dev Copy #### Remove the `tailwind.config` file Once you've verified that your styles are working as expected, you can remove the `tailwind.config.ts` file. ### 3\. Use new `size-*` utility The new `size-*` utility (added in Tailwind v3.4), is now fully supported by `tailwind-merge`. You can replace `w-* h-*` with the new `size-*` utility: `- w-4 h-4 + size-4` Copy ### 4\. Update your dependencies pnpmnpmbunyarn pnpm i bits-ui@latest @lucide/svelte@latest tailwind-variants@latest tailwind-merge@latest clsx@latest svelte-sonner@latest paneforge@next vaul-svelte@next formsnap@latest npm i bits-ui@latest @lucide/svelte@latest tailwind-variants@latest tailwind-merge@latest clsx@latest svelte-sonner@latest paneforge@next vaul-svelte@next formsnap@latest bun install bits-ui@latest @lucide/svelte@latest tailwind-variants@latest tailwind-merge@latest clsx@latest svelte-sonner@latest paneforge@next vaul-svelte@next formsnap@latest yarn install bits-ui@latest @lucide/svelte@latest tailwind-variants@latest tailwind-merge@latest clsx@latest svelte-sonner@latest paneforge@next vaul-svelte@next formsnap@latest Copy ### 5\. Update your utils (optional) If you're planning on adding additional components in the future or plan to update your existing components to the latest versions, you'll need to update your `utils.ts` file. Previously, we were depending on `bits-ui` for some simple type helpers that required you to have `bits-ui` installed, regardless if you were using components that depend on it. These helpers have been moved into the `utils.ts` file: utils.ts `import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + export type WithoutChild = T extends { child?: any } ? Omit : T; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + export type WithoutChildren = T extends { children?: any } ? Omit : T; + export type WithoutChildrenOrChild = WithoutChildren>; + export type WithElementRef = T & { ref?: U | null };` Copy And then you can incrementally replace these imports in your existing components: card.svelte `` Copy ### 6\. Update Your Colors (optional) The dark mode colors have been revisited and updated to be more accessible, as you can see in these docs as well as the [v4.shadcn-svelte.com](https://v4.shadcn-svelte.com/) demo site. You can update your components to use the new dark mode colors by re-adding your components using the CLI[1](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#user-content-fn-1) . Commit any changes **The CLI will overwrite your existing components.** It's recommended to commit the changes you've made to your components before running the CLI. `git add . git commit -m '..."` Copy Update components pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add --all --overwrite npx shadcn-svelte@latest add --all --overwrite bun x shadcn-svelte@latest add --all --overwrite npx shadcn-svelte@latest add --all --overwrite Copy Update colors Update the dark mode colors in your `app.css` file to the new OKLCH values. See the [Base Colors](https://www.shadcn-svelte.com/docs/theming#base-colors) reference for a list of colors. Review Changes Review and re-apply any changes you've made to your components using the git diffs. Footnotes --------- 1. Updating your components will overwrite your existing components. [↩](https://www.shadcn-svelte.com/docs/migration/tailwind-v4#user-content-fnref-1) [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) [Components](https://www.shadcn-svelte.com/docs/components) --- # Alert Dialog - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/alert-dialog#installation) [Usage](https://www.shadcn-svelte.com/docs/components/alert-dialog#usage) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Alert Dialog ============ [Previous](https://www.shadcn-svelte.com/docs/components/accordion) [Next](https://www.shadcn-svelte.com/docs/components/alert) A modal dialog that interrupts the user with important content and expects a response. [Docs](https://bits-ui.com/docs/components/alert-dialog) [API Reference](https://bits-ui.com/docs/components/alert-dialog#api-reference) Component Source Preview Code Show Dialog ` Show Dialog Are you absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. Cancel Continue ` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add alert-dialog npx shadcn-svelte@latest add alert-dialog bun x shadcn-svelte@latest add alert-dialog npx shadcn-svelte@latest add alert-dialog Copy Install `bits-ui`: pnpmnpmbunyarn pnpm i bits-ui -D npm i bits-ui -D bun install bits-ui -D yarn install bits-ui -D Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` Open Are you absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. Cancel Continue ` Copy [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) [Alert](https://www.shadcn-svelte.com/docs/components/alert) --- # Alert - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/alert#installation) [Usage](https://www.shadcn-svelte.com/docs/components/alert#usage) [Examples](https://www.shadcn-svelte.com/docs/components/alert#examples) [Default](https://www.shadcn-svelte.com/docs/components/alert#default) [Destructive](https://www.shadcn-svelte.com/docs/components/alert#destructive) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Alert ===== [Previous](https://www.shadcn-svelte.com/docs/components/alert-dialog) [Next](https://www.shadcn-svelte.com/docs/components/aspect-ratio) Displays a callout for user attention. Component Source Preview Code Success! Your changes have been saved This is an alert with icon, title and description. This Alert has a title and an icon. No description. Unable to process your payment. Please verify your billing information and try again. * Check your card details * Ensure sufficient funds * Verify billing address `
Success! Your changes have been saved This is an alert with icon, title and description. This Alert has a title and an icon. No description. Unable to process your payment.

Please verify your billing information and try again.

  • Check your card details
  • Ensure sufficient funds
  • Verify billing address
` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add alert npx shadcn-svelte@latest add alert bun x shadcn-svelte@latest add alert npx shadcn-svelte@latest add alert Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` Heads up! You can add components to your app using the cli. ` Copy Examples -------- ### Default Preview Code Success! Your changes have been saved This is an alert with icon, title and description. This Alert has a title and an icon. No description. Unable to process your payment. Please verify your billing information and try again. * Check your card details * Ensure sufficient funds * Verify billing address `
Success! Your changes have been saved This is an alert with icon, title and description. This Alert has a title and an icon. No description. Unable to process your payment.

Please verify your billing information and try again.

  • Check your card details
  • Ensure sufficient funds
  • Verify billing address
` Copy ### Destructive Preview Code Error Your session has expired. Please login again. ` Error Your session has expired. Please login again. ` Copy [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) --- # Aspect Ratio - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/aspect-ratio#installation) [Usage](https://www.shadcn-svelte.com/docs/components/aspect-ratio#usage) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Aspect Ratio ============ [Previous](https://www.shadcn-svelte.com/docs/components/alert) [Next](https://www.shadcn-svelte.com/docs/components/avatar) Displays content within a desired ratio. [Docs](https://bits-ui.com/docs/components/aspect-ratio) [API Reference](https://bits-ui.com/docs/components/aspect-ratio#api-reference) Component Source Preview Code ![Gray by Drew Beamer](https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80) ` Gray by Drew Beamer ` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add aspect-ratio npx shadcn-svelte@latest add aspect-ratio bun x shadcn-svelte@latest add aspect-ratio npx shadcn-svelte@latest add aspect-ratio Copy Install `bits-ui`: pnpmnpmbunyarn pnpm i bits-ui -D npm i bits-ui -D bun install bits-ui -D yarn install bits-ui -D Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- `
...
` Copy [Alert](https://www.shadcn-svelte.com/docs/components/alert) [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) --- # Avatar - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/avatar#installation) [Usage](https://www.shadcn-svelte.com/docs/components/avatar#usage) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Avatar ====== [Previous](https://www.shadcn-svelte.com/docs/components/aspect-ratio) [Next](https://www.shadcn-svelte.com/docs/components/badge) An image element with a fallback for representing the user. [Docs](https://bits-ui.com/docs/components/avatar) [API Reference](https://bits-ui.com/docs/components/avatar#api-reference) Component Source Preview Code ![@shadcn](https://github.com/shadcn.png) CN ![@evilrabbit](https://github.com/evilrabbit.png) ER ![@shadcn](https://github.com/shadcn.png) CN ![@leerob](https://github.com/leerob.png) LR ![@evilrabbit](https://github.com/evilrabbit.png) ER `
CN ER
CN LR ER
` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add avatar npx shadcn-svelte@latest add avatar bun x shadcn-svelte@latest add avatar npx shadcn-svelte@latest add avatar Copy Install `bits-ui`: pnpmnpmbunyarn pnpm i bits-ui -D npm i bits-ui -D bun install bits-ui -D yarn install bits-ui -D Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` CN ` Copy [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) [Badge](https://www.shadcn-svelte.com/docs/components/badge) --- # Badge - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/badge#installation) [Usage](https://www.shadcn-svelte.com/docs/components/badge#usage) [Link](https://www.shadcn-svelte.com/docs/components/badge#link) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Badge ===== [Previous](https://www.shadcn-svelte.com/docs/components/avatar) [Next](https://www.shadcn-svelte.com/docs/components/breadcrumb) Displays a badge or a component that looks like a badge. Component Source Preview Code Badge Secondary Destructive Outline Verified 8 99 20+ `
Badge Secondary Destructive Outline
Verified 8 99 20+
` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add badge npx shadcn-svelte@latest add badge bun x shadcn-svelte@latest add badge npx shadcn-svelte@latest add badge Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` Badge` Copy ### Link You can use the `badgeVariants` helper to create a link that looks like a badge. ` Badge` Copy [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) --- # Button - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/button#installation) [Usage](https://www.shadcn-svelte.com/docs/components/button#usage) [Link](https://www.shadcn-svelte.com/docs/components/button#link) [Examples](https://www.shadcn-svelte.com/docs/components/button#examples) [Primary](https://www.shadcn-svelte.com/docs/components/button#primary) [Secondary](https://www.shadcn-svelte.com/docs/components/button#secondary) [Destructive](https://www.shadcn-svelte.com/docs/components/button#destructive) [Outline](https://www.shadcn-svelte.com/docs/components/button#outline) [Ghost](https://www.shadcn-svelte.com/docs/components/button#ghost) [Link](https://www.shadcn-svelte.com/docs/components/button#link-1) [With Icon](https://www.shadcn-svelte.com/docs/components/button#with-icon) [Icon](https://www.shadcn-svelte.com/docs/components/button#icon) [Loading](https://www.shadcn-svelte.com/docs/components/button#loading) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Button ====== [Previous](https://www.shadcn-svelte.com/docs/components/breadcrumb) [Next](https://www.shadcn-svelte.com/docs/components/calendar) Displays a button or a component that looks like a button. [Docs](https://bits-ui.com/docs/components/button) [API Reference](https://bits-ui.com/docs/components/button#api-reference) Component Source Preview Code Button ` ` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add button npx shadcn-svelte@latest add button bun x shadcn-svelte@latest add button npx shadcn-svelte@latest add button Copy Install `bits-ui`: pnpmnpmbunyarn pnpm i bits-ui -D npm i bits-ui -D bun install bits-ui -D yarn install bits-ui -D Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` ` Copy ### Link You can convert the `` Copy Alternatively, you can use the `buttonVariants` helper to create a link that looks like a button. ` Dashboard ` Copy Examples -------- ### Primary Preview Code Button ` ` Copy * * * ### Secondary Preview Code Secondary ` ` Copy * * * ### Destructive Preview Code Destructive ` ` Copy * * * ### Outline Preview Code Outline ` ` Copy * * * ### Ghost Preview Code Ghost ` ` Copy * * * ### Link Preview Code Link ` ` Copy * * * ### With Icon Preview Code Login with Email ` ` Copy * * * ### Icon Preview Code ` ` Copy * * * ### Loading Preview Code Please wait ` ` Copy [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) --- # Breadcrumb - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/breadcrumb#installation) [Usage](https://www.shadcn-svelte.com/docs/components/breadcrumb#usage) [Examples](https://www.shadcn-svelte.com/docs/components/breadcrumb#examples) [Custom separator](https://www.shadcn-svelte.com/docs/components/breadcrumb#custom-separator) [Dropdown](https://www.shadcn-svelte.com/docs/components/breadcrumb#dropdown) [Collapsed](https://www.shadcn-svelte.com/docs/components/breadcrumb#collapsed) [Link component](https://www.shadcn-svelte.com/docs/components/breadcrumb#link-component) [Responsive](https://www.shadcn-svelte.com/docs/components/breadcrumb#responsive) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Breadcrumb ========== [Previous](https://www.shadcn-svelte.com/docs/components/badge) [Next](https://www.shadcn-svelte.com/docs/components/button) Displays the path to the current resource using a hierarchy of links. Component Source Preview Code ` Home Toggle menu Documentation Themes GitHub Components Breadcrumb ` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add breadcrumb npx shadcn-svelte@latest add breadcrumb bun x shadcn-svelte@latest add breadcrumb npx shadcn-svelte@latest add breadcrumb Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` Home Components Breadcrumb ` Copy Examples -------- ### Custom separator Use a custom component in the `` of `` to create a custom separator. Preview Code ` Home Components Breadcrumb ` Copy * * * ### Dropdown You can compose `` with a `` to create a dropdown in the breadcrumb. Preview Code ` Home Components Documentation Themes GitHub Breadcrumb ` Copy * * * ### Collapsed We provide a `` component to show a collapsed state when the breadcrumb is too long. Preview Code ` Home Components Breadcrumb ` Copy * * * ### Link component To use a custom link component from your routing library, you can use the `asChild` prop on ``. Preview Code ` Home Components Breadcrumb ` Copy * * * ### Responsive Here's an example of a responsive breadcrumb that composes `` with ``, ``, and ``. It displays a dropdown on desktop and a drawer on mobile. Preview Code ` {items[0].label} {#if items.length > ITEMS_TO_DISPLAY} {#if isDesktop.current} {#each items.slice(1, -2) as item, i (i)} {item.label} {/each} {:else} Navigate to Select a page to navigate to.
{#each items.slice(1, -2) as item, i (i)} {item.label} {/each}
Close {/if} {/if} {#each items.slice(-ITEMS_TO_DISPLAY + 1) as item (item.label)} {#if item.href} {item.label} {:else} {item.label} {/if} {/each} ` Copy [Badge](https://www.shadcn-svelte.com/docs/components/badge) [Button](https://www.shadcn-svelte.com/docs/components/button) --- # Card - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/card#installation) [Usage](https://www.shadcn-svelte.com/docs/components/card#usage) [Examples](https://www.shadcn-svelte.com/docs/components/card#examples) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Card ==== [Previous](https://www.shadcn-svelte.com/docs/components/calendar) [Next](https://www.shadcn-svelte.com/docs/components/carousel) Displays a card with header, content, and footer. Component Source Preview Code Login to your account Enter your email below to login to your account Sign Up Email Password [Forgot your password?](https://www.shadcn-svelte.com/docs/components/card##) Login Login with Google ` Login to your account Enter your email below to login to your account
Forgot your password?
` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add card npx shadcn-svelte@latest add card bun x shadcn-svelte@latest add card npx shadcn-svelte@latest add card Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` Card Title Card Description

Card Content

Card Footer

 ` Copy Examples -------- Preview Code Login to your account Enter your email below to login to your account Sign Up Email Password [Forgot your password?](https://www.shadcn-svelte.com/docs/components/card##) Login Login with Google ` Login to your account Enter your email below to login to your account
Forgot your password?
` Copy [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) --- # Checkbox - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/checkbox#installation) [Usage](https://www.shadcn-svelte.com/docs/components/checkbox#usage) [Examples](https://www.shadcn-svelte.com/docs/components/checkbox#examples) [Form](https://www.shadcn-svelte.com/docs/components/checkbox#form) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Checkbox ======== [Previous](https://www.shadcn-svelte.com/docs/components/chart) [Next](https://www.shadcn-svelte.com/docs/components/collapsible) A control that allows the user to toggle between checked and not checked. [Docs](https://bits-ui.com/docs/components/checkbox) [API Reference](https://bits-ui.com/docs/components/checkbox#api-reference) Component Source Preview Code Accept terms and conditions Accept terms and conditions By clicking this checkbox, you agree to the terms and conditions. Enable notifications Enable notifications You can enable or disable notifications at any time. `

By clicking this checkbox, you agree to the terms and conditions.

` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add checkbox npx shadcn-svelte@latest add checkbox bun x shadcn-svelte@latest add checkbox npx shadcn-svelte@latest add checkbox Copy Install `bits-ui`: pnpmnpmbunyarn pnpm i bits-ui -D npm i bits-ui -D bun install bits-ui -D yarn install bits-ui -D Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` ` Copy Examples -------- ### Form Preview Code Sidebar Select the items you want to display in the sidebar. Recents Home Applications Desktop Downloads Documents Update display ``
Sidebar Select the items you want to display in the sidebar.
{#each items as item (item.id)} {@const checked = $formData.items.includes(item.id)}
{#snippet children({ props })} { if (v) { addItem(item.id); } else { removeItem(item.id); } }} /> {item.label} {/snippet}
{/each}
Update display
`` Copy [Chart](https://www.shadcn-svelte.com/docs/components/chart) [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) --- # Collapsible - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/collapsible#installation) [Usage](https://www.shadcn-svelte.com/docs/components/collapsible#usage) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Collapsible =========== [Previous](https://www.shadcn-svelte.com/docs/components/checkbox) [Next](https://www.shadcn-svelte.com/docs/components/combobox) An interactive component which expands/collapses a panel. [Docs](https://bits-ui.com/docs/components/collapsible) [API Reference](https://bits-ui.com/docs/components/collapsible#api-reference) Component Source Preview Code #### @huntabyte starred 3 repositories Toggle @huntabyte/bits-ui @melt-ui/melt-ui @sveltejs/svelte `

@huntabyte starred 3 repositories

Toggle
@huntabyte/bits-ui
@melt-ui/melt-ui
@sveltejs/svelte
` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add collapsible npx shadcn-svelte@latest add collapsible bun x shadcn-svelte@latest add collapsible npx shadcn-svelte@latest add collapsible Copy Install `bits-ui`: pnpmnpmbunyarn pnpm i bits-ui -D npm i bits-ui -D bun install bits-ui -D yarn install bits-ui -D Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` Can I use this in my project? Yes. Free to use for personal and commercial projects. No attribution required. ` Copy [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) --- # Calendar - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Blocks](https://www.shadcn-svelte.com/docs/components/calendar#blocks) [About](https://www.shadcn-svelte.com/docs/components/calendar#about) [Installation](https://www.shadcn-svelte.com/docs/components/calendar#installation) [Date Picker](https://www.shadcn-svelte.com/docs/components/calendar#date-picker) [Examples](https://www.shadcn-svelte.com/docs/components/calendar#examples) [Range Calendar](https://www.shadcn-svelte.com/docs/components/calendar#range-calendar) [Month and Year Selector](https://www.shadcn-svelte.com/docs/components/calendar#month-and-year-selector) [Date of Birth Picker](https://www.shadcn-svelte.com/docs/components/calendar#date-of-birth-picker) [Date and Time Picker](https://www.shadcn-svelte.com/docs/components/calendar#date-and-time-picker) [Natural Language Picker](https://www.shadcn-svelte.com/docs/components/calendar#natural-language-picker) [Upgrade Guide](https://www.shadcn-svelte.com/docs/components/calendar#upgrade-guide) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Calendar ======== [Previous](https://www.shadcn-svelte.com/docs/components/button) [Next](https://www.shadcn-svelte.com/docs/components/card) A calendar component that allows users to select dates. [Docs](https://bits-ui.com/docs/components/calendar) [API Reference](https://bits-ui.com/docs/components/calendar#api-reference) Component Source Preview Code | Su | Mo | Tu | We | Th | Fr | Sa | | --- | --- | --- | --- | --- | --- | --- | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | | 8 | 9 | 10 | 11 | 12 | 13 | 14 | | 15 | 16 | 17 | 18 | 19 | 20 | 21 | | 22 | 23 | 24 | 25 | 26 | 27 | 28 | | 29 | 30 | 1 | 2 | 3 | 4 | 5 | ` ` Copy Blocks ------ We have built a collection of 30+ calendar blocks that you can use to build your own calendar components. See call calendar blocks in the [Blocks Library](https://www.shadcn-svelte.com/blocks/calendar) page. About ----- The `` component is built on top of the [Bits UI Calendar](https://www.bits-ui.com/docs/components/calendar) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates. If you're looking for a range calendar, check out the [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) component. Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add calendar npx shadcn-svelte@latest add calendar bun x shadcn-svelte@latest add calendar npx shadcn-svelte@latest add calendar Copy Install `bits-ui` and `@internationalized/date`: pnpmnpmbunyarn pnpm i bits-ui @internationalized/date -D npm i bits-ui @internationalized/date -D bun install bits-ui @internationalized/date -D yarn install bits-ui @internationalized/date -D Copy Copy and paste the component source files linked at the top of this page into your project. Date Picker ----------- You can use the `` component to build a date picker. See the [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) page for more information. Examples -------- ### Range Calendar Preview Code | Su | Mo | Tu | We | Th | Fr | Sa | | --- | --- | --- | --- | --- | --- | --- | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | | 8 | 9 | 10 | 11 | 12 | 13 | 14 | | 15 | 16 | 17 | 18 | 19 | 20 | 21 | | 22 | 23 | 24 | 25 | 26 | 27 | 28 | | 29 | 30 | 1 | 2 | 3 | 4 | 5 | | Su | Mo | Tu | We | Th | Fr | Sa | | --- | --- | --- | --- | --- | --- | --- | | 29 | 30 | 1 | 2 | 3 | 4 | 5 | | 6 | 7 | 8 | 9 | 10 | 11 | 12 | | 13 | 14 | 15 | 16 | 17 | 18 | 19 | | 20 | 21 | 22 | 23 | 24 | 25 | 26 | | 27 | 28 | 29 | 30 | 31 | 1 | 2 | ### Month and Year Selector Preview Code | Su | Mo | Tu | We | Th | Fr | Sa | | --- | --- | --- | --- | --- | --- | --- | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | | 8 | 9 | 10 | 11 | 12 | 13 | 14 | | 15 | 16 | 17 | 18 | 19 | 20 | 21 | | 22 | 23 | 24 | 25 | 26 | 27 | 28 | | 29 | 30 | 1 | 2 | 3 | 4 | 5 | Dropdown Month and Year ### Date of Birth Picker Preview Code Date of birth Select date ### Date and Time Picker Preview Code Date Select date Time ### Natural Language Picker This component uses the `chrono-node` library to parse natural language dates. Preview Code Schedule Date Select date Your post will be published on June 13, 2025. Upgrade Guide ------------- You can upgrade to the latest version of the `` component by running the following command: pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add calendar npx shadcn-svelte@latest add calendar bun x shadcn-svelte@latest add calendar npx shadcn-svelte@latest add calendar Copy When you're prompted to overwrite the existing files, select `Yes`. **If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.** #### Installing Blocks After upgrading the `Calendar` component, you can add the new blocks with the following: pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add calendar-02 npx shadcn-svelte@latest add calendar-02 bun x shadcn-svelte@latest add calendar-02 npx shadcn-svelte@latest add calendar-02 Copy This will add the latest version of the calendar blocks. [Button](https://www.shadcn-svelte.com/docs/components/button) [Card](https://www.shadcn-svelte.com/docs/components/card) --- # Carousel - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [About](https://www.shadcn-svelte.com/docs/components/carousel#about) [Installation](https://www.shadcn-svelte.com/docs/components/carousel#installation) [Usage](https://www.shadcn-svelte.com/docs/components/carousel#usage) [Examples](https://www.shadcn-svelte.com/docs/components/carousel#examples) [Sizes](https://www.shadcn-svelte.com/docs/components/carousel#sizes) [Spacing](https://www.shadcn-svelte.com/docs/components/carousel#spacing) [Orientation](https://www.shadcn-svelte.com/docs/components/carousel#orientation) [Options](https://www.shadcn-svelte.com/docs/components/carousel#options) [API](https://www.shadcn-svelte.com/docs/components/carousel#api) [Events](https://www.shadcn-svelte.com/docs/components/carousel#events) [Plugins](https://www.shadcn-svelte.com/docs/components/carousel#plugins) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Carousel ======== [Previous](https://www.shadcn-svelte.com/docs/components/card) [Next](https://www.shadcn-svelte.com/docs/components/chart) A carousel with motion and swipe built using Embla. [Docs](https://www.embla-carousel.com/get-started/svelte) [API Reference](https://www.embla-carousel.com/api) Component Source Preview Code 1 2 3 4 5 Previous slide Next slide ` {#each Array(5), i}
{i + 1}
{/each} ` Copy About ----- The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/get-started/svelte/) library. Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add carousel npx shadcn-svelte@latest add carousel bun x shadcn-svelte@latest add carousel npx shadcn-svelte@latest add carousel Copy Install `embla-carousel-svelte`: pnpmnpmbunyarn pnpm i embla-carousel-svelte -D npm i embla-carousel-svelte -D bun install embla-carousel-svelte -D yarn install embla-carousel-svelte -D Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` ... ... ... ` Copy Examples -------- ### Sizes To set the size of the items, you can use the `basis` utility class on the ``. Preview Code 1 2 3 4 5 Previous slide Next slide ` {#each Array(5) as _, i (i)}
{i + 1}
{/each} ` Copy Example ` ... ... ... ` Copy Responsive ` ... ... ... ` Copy ### Spacing To set the spacing between the items, we use a `pl-[VALUE]` utility on the `` and a negative `-ml-[VALUE]` on the ``. Preview Code 1 2 3 4 5 Previous slide Next slide ` {#each Array(5) as _, i (i)}
{i + 1}
{/each} ` Copy Example ` ... ... ... ` Copy Responsive ` ... ... ... ` Copy ### Orientation Use the `orientation` prop to set the orientation of the carousel. Preview Code 1 2 3 4 5 Previous slide Next slide ` {#each Array(5) as _, i (i)}
{i + 1}
{/each} ` Copy ` ... ... ... ` Copy Options ------- You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information. ` ... ... ... ` Copy API --- Use reactive state and the `setApi` callback to get an instance of the carousel API. Preview Code 1 2 3 4 5 Previous slide Next slide Slide 0 of 0 `
(api = emblaApi)} class="w-full max-w-xs" > {#each Array(5) as _, i (i)} {i + 1} {/each}
Slide {current} of {count}
` Copy ` (api = emblaApi)}> ... ... ... ` Copy Events ------ You can listen to events using the api instance from `bind:api`. ` (api = emblaApi)}> ... ... ... ` Copy Plugins ------- You can use the `plugins` prop to add plugins to the carousel. ` ` Copy Preview Code 1 2 3 4 5 Previous slide Next slide ` {#each Array(5) as _, i (i)}
{i + 1}
{/each} ` Copy See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins. [Card](https://www.shadcn-svelte.com/docs/components/card) [Chart](https://www.shadcn-svelte.com/docs/components/chart) --- # Combobox - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/combobox#installation) [Usage](https://www.shadcn-svelte.com/docs/components/combobox#usage) [Examples](https://www.shadcn-svelte.com/docs/components/combobox#examples) [Combobox](https://www.shadcn-svelte.com/docs/components/combobox#combobox) [Popover](https://www.shadcn-svelte.com/docs/components/combobox#popover) [Dropdown menu](https://www.shadcn-svelte.com/docs/components/combobox#dropdown-menu) [Form](https://www.shadcn-svelte.com/docs/components/combobox#form) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Combobox ======== [Previous](https://www.shadcn-svelte.com/docs/components/collapsible) [Next](https://www.shadcn-svelte.com/docs/components/command) Autocomplete input and command palette with a list of suggestions. Preview Code Select a framework... ` {#snippet child({ props })} {/snippet} No framework found. {#each frameworks as framework (framework.value)} { value = framework.value; closeAndFocusTrigger(); }} > {framework.label} {/each} ` Copy Installation ------------ The Combobox is built using a composition of the `` and the `` components. See installation instructions for the [Popover](https://www.shadcn-svelte.com/docs/components/popover#installation) and the [Command](https://www.shadcn-svelte.com/docs/components/command#installation) components. Usage ----- ` {#snippet child({ props })} {/snippet} No framework found. {#each frameworks as framework} { value = framework.value; closeAndFocusTrigger(); }} > {framework.label} {/each} ` Copy Examples -------- ### Combobox Preview Code Select a framework... ` {#snippet child({ props })} {/snippet} No framework found. {#each frameworks as framework (framework.value)} { value = framework.value; closeAndFocusTrigger(); }} > {framework.label} {/each} ` Copy ### Popover Preview Code Status \+ Set status `

Status

{#if selectedStatus} {@const Icon = selectedStatus.icon} {selectedStatus.label} {:else} + Set status {/if} No results found. {#each statuses as status (status.value)} { value = status.value; closeAndFocusTrigger(triggerId); }} > {@const Icon = status.icon} {status.label} {/each}
` Copy ### Dropdown menu Preview Code feature Create a new project `

{selectedLabel} Create a new project

{#snippet child({ props })} {/snippet} Actions Assign to... Set due date... Apply label No label found. {#each labels as label (label)} { selectedLabel = label; closeAndFocusTrigger(); }} > {label} {/each} Delete ⌘⌫
` Copy ### Form Since the Combobox is built using the `` and the `` components, we need to use the `` component. `` enables us to apply the right `aria-*` attributes to non-standard form elements, and adds a hidden input to ensure the form is submitted with the correct value. Note: You must be on version `0.5.0` or higher of `formsnap` for this to work correctly. Preview Code Language English This is the language that will be used in the dashboard. Submit ``
{#snippet children({ props })} Language {languages.find((f) => f.value === $formData.language)?.label ?? "Select language"} {/snippet} No language found. {#each languages as language (language.value)} { $formData.language = language.value; closeAndFocusTrigger(triggerId); }} > {language.label} {/each} This is the language that will be used in the dashboard. Submit
`` Copy [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) [Command](https://www.shadcn-svelte.com/docs/components/command) --- # Command - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Installation](https://www.shadcn-svelte.com/docs/components/command#installation) [Usage](https://www.shadcn-svelte.com/docs/components/command#usage) [Examples](https://www.shadcn-svelte.com/docs/components/command#examples) [Dialog](https://www.shadcn-svelte.com/docs/components/command#dialog) [Changelog](https://www.shadcn-svelte.com/docs/components/command#changelog) [2024-10-30 Classes for icons](https://www.shadcn-svelte.com/docs/components/command#2024-10-30-classes-for-icons) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Command ======= [Previous](https://www.shadcn-svelte.com/docs/components/combobox) [Next](https://www.shadcn-svelte.com/docs/components/context-menu) Fast, composable, unstyled command menu for Svelte. [Docs](https://bits-ui.com/docs/components/command) [API Reference](https://bits-ui.com/docs/components/command#api-reference) Component Source Preview Code Suggestions Calendar Search Emoji Calculator Settings Profile ⌘P Billing ⌘B Settings ⌘S ` No results found. Calendar Search Emoji Calculator Profile ⌘P Billing ⌘B Settings ⌘S ` Copy Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add command npx shadcn-svelte@latest add command bun x shadcn-svelte@latest add command npx shadcn-svelte@latest add command Copy Install `bits-ui`: pnpmnpmbunyarn pnpm i bits-ui -D npm i bits-ui -D bun install bits-ui -D yarn install bits-ui -D Copy Copy and paste the component source files linked at the top of this page into your project. Usage ----- ` No results found. Calendar Search Emoji Calculator Profile Billing Settings ` Copy Examples -------- ### Dialog Preview Code Press ⌘J Command Palette Search for a command to run `

Press ⌘J

No results found. Calendar Search Emoji Calculator Profile ⌘P Billing ⌘B Settings ⌘S ` Copy To show the command menu in a dialog, use the `` component instead of ``. It accepts props for both the `` and `` components. ` No results found. Calendar Search Emoji Calculator ` Copy Changelog --------- ### 2024-10-30 Classes for icons * Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `` component to automatically style the icons inside. [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) --- # Chart - shadcn-svelte Get Started * [Introduction](https://www.shadcn-svelte.com/docs) * [Installation](https://www.shadcn-svelte.com/docs/installation) * [components.json](https://www.shadcn-svelte.com/docs/components-json) * [Theming](https://www.shadcn-svelte.com/docs/theming) * [Dark Mode](https://www.shadcn-svelte.com/docs/dark-mode) * [CLI](https://www.shadcn-svelte.com/docs/cli) * [JavaScript](https://www.shadcn-svelte.com/docs/javascript) * [Figma](https://www.shadcn-svelte.com/docs/figma) * [Changelog](https://www.shadcn-svelte.com/docs/changelog) * [Legacy Docs](https://www.shadcn-svelte.com/docs/legacy) Migration * [Svelte 5](https://www.shadcn-svelte.com/docs/migration/svelte-5) * [Tailwind v4](https://www.shadcn-svelte.com/docs/migration/tailwind-v4) Components * [Accordion](https://www.shadcn-svelte.com/docs/components/accordion) * [Alert Dialog](https://www.shadcn-svelte.com/docs/components/alert-dialog) * [Alert](https://www.shadcn-svelte.com/docs/components/alert) * [Aspect Ratio](https://www.shadcn-svelte.com/docs/components/aspect-ratio) * [Avatar](https://www.shadcn-svelte.com/docs/components/avatar) * [Badge](https://www.shadcn-svelte.com/docs/components/badge) * [Breadcrumb](https://www.shadcn-svelte.com/docs/components/breadcrumb) * [Button](https://www.shadcn-svelte.com/docs/components/button) * [Calendar](https://www.shadcn-svelte.com/docs/components/calendar) * [Card](https://www.shadcn-svelte.com/docs/components/card) * [Carousel](https://www.shadcn-svelte.com/docs/components/carousel) * [Chart](https://www.shadcn-svelte.com/docs/components/chart) * [Checkbox](https://www.shadcn-svelte.com/docs/components/checkbox) * [Collapsible](https://www.shadcn-svelte.com/docs/components/collapsible) * [Combobox](https://www.shadcn-svelte.com/docs/components/combobox) * [Command](https://www.shadcn-svelte.com/docs/components/command) * [Context Menu](https://www.shadcn-svelte.com/docs/components/context-menu) * [Data Table](https://www.shadcn-svelte.com/docs/components/data-table) * [Date Picker](https://www.shadcn-svelte.com/docs/components/date-picker) * [Dialog](https://www.shadcn-svelte.com/docs/components/dialog) * [Drawer](https://www.shadcn-svelte.com/docs/components/drawer) * [Dropdown Menu](https://www.shadcn-svelte.com/docs/components/dropdown-menu) * [Formsnap](https://www.shadcn-svelte.com/docs/components/form) * [Hover Card](https://www.shadcn-svelte.com/docs/components/hover-card) * [Input OTP](https://www.shadcn-svelte.com/docs/components/input-otp) * [Input](https://www.shadcn-svelte.com/docs/components/input) * [Label](https://www.shadcn-svelte.com/docs/components/label) * [Menubar](https://www.shadcn-svelte.com/docs/components/menubar) * [Navigation Menu](https://www.shadcn-svelte.com/docs/components/navigation-menu) * [Pagination](https://www.shadcn-svelte.com/docs/components/pagination) * [Popover](https://www.shadcn-svelte.com/docs/components/popover) * [Progress](https://www.shadcn-svelte.com/docs/components/progress) * [Radio Group](https://www.shadcn-svelte.com/docs/components/radio-group) * [Range Calendar](https://www.shadcn-svelte.com/docs/components/range-calendar) * [Resizable](https://www.shadcn-svelte.com/docs/components/resizable) * [Scroll Area](https://www.shadcn-svelte.com/docs/components/scroll-area) * [Select](https://www.shadcn-svelte.com/docs/components/select) * [Separator](https://www.shadcn-svelte.com/docs/components/separator) * [Sheet](https://www.shadcn-svelte.com/docs/components/sheet) * [Sidebar](https://www.shadcn-svelte.com/docs/components/sidebar) * [Skeleton](https://www.shadcn-svelte.com/docs/components/skeleton) * [Slider](https://www.shadcn-svelte.com/docs/components/slider) * [Sonner](https://www.shadcn-svelte.com/docs/components/sonner) * [Switch](https://www.shadcn-svelte.com/docs/components/switch) * [Table](https://www.shadcn-svelte.com/docs/components/table) * [Tabs](https://www.shadcn-svelte.com/docs/components/tabs) * [Textarea](https://www.shadcn-svelte.com/docs/components/textarea) * [Toggle Group](https://www.shadcn-svelte.com/docs/components/toggle-group) * [Toggle](https://www.shadcn-svelte.com/docs/components/toggle) * [Tooltip](https://www.shadcn-svelte.com/docs/components/tooltip) * [Typography](https://www.shadcn-svelte.com/docs/components/typography) Installation * [SvelteKit](https://www.shadcn-svelte.com/docs/installation/sveltekit) * [Vite](https://www.shadcn-svelte.com/docs/installation/vite) * [Astro](https://www.shadcn-svelte.com/docs/installation/astro) * [Manual Installation](https://www.shadcn-svelte.com/docs/installation/manual) Dark Mode * [Svelte](https://www.shadcn-svelte.com/docs/dark-mode/svelte) * [Astro](https://www.shadcn-svelte.com/docs/dark-mode/astro) Registry * [Registry](https://www.shadcn-svelte.com/docs/registry) * [Getting Started](https://www.shadcn-svelte.com/docs/registry/getting-started) * [FAQ](https://www.shadcn-svelte.com/docs/registry/faq) * [Examples](https://www.shadcn-svelte.com/docs/registry/examples) * [registry.json](https://www.shadcn-svelte.com/docs/registry/registry-json) * [registry-item.json](https://www.shadcn-svelte.com/docs/registry/registry-item-json) On This Page [Component](https://www.shadcn-svelte.com/docs/components/chart#component) [Installation](https://www.shadcn-svelte.com/docs/components/chart#installation) [Your First Chart](https://www.shadcn-svelte.com/docs/components/chart#your-first-chart) [Start by defining your data](https://www.shadcn-svelte.com/docs/components/chart#start-by-defining-your-data) [Define your chart config](https://www.shadcn-svelte.com/docs/components/chart#define-your-chart-config) [Build your chart](https://www.shadcn-svelte.com/docs/components/chart#build-your-chart) [Adjusting the Axis Ticks](https://www.shadcn-svelte.com/docs/components/chart#adjusting-the-axis-ticks) [Add a custom formatter to the x axis](https://www.shadcn-svelte.com/docs/components/chart#add-a-custom-formatter-to-the-x-axis) [Add Tooltip](https://www.shadcn-svelte.com/docs/components/chart#add-tooltip) [Add the Chart.Tooltip component to the chart](https://www.shadcn-svelte.com/docs/components/chart#add-the-charttooltip-component-to-the-chart) [Add Legend](https://www.shadcn-svelte.com/docs/components/chart#add-legend) [Set the legend prop to true](https://www.shadcn-svelte.com/docs/components/chart#set-the-legend-prop-to-true) [Chart Config](https://www.shadcn-svelte.com/docs/components/chart#chart-config) [Theming](https://www.shadcn-svelte.com/docs/components/chart#theming) [CSS Variables](https://www.shadcn-svelte.com/docs/components/chart#css-variables) [Define your colors in your css file](https://www.shadcn-svelte.com/docs/components/chart#define-your-colors-in-your-css-file) [Add the color to your chartConfig](https://www.shadcn-svelte.com/docs/components/chart#add-the-color-to-your-chartconfig) [hex, hsl or oklch](https://www.shadcn-svelte.com/docs/components/chart#hex-hsl-or-oklch) [Using Colors](https://www.shadcn-svelte.com/docs/components/chart#using-colors) [Components](https://www.shadcn-svelte.com/docs/components/chart#components) [Chart Data](https://www.shadcn-svelte.com/docs/components/chart#chart-data) [Tailwind](https://www.shadcn-svelte.com/docs/components/chart#tailwind) [Tooltip](https://www.shadcn-svelte.com/docs/components/chart#tooltip) [Props](https://www.shadcn-svelte.com/docs/components/chart#props) [Colors](https://www.shadcn-svelte.com/docs/components/chart#colors) [Custom](https://www.shadcn-svelte.com/docs/components/chart#custom) Special sponsor We're looking for one partner to be featured here. Support the project and reach thousands of developers. [Reach out](mailto:sponsorship@huntabyte.com) Chart ===== [Previous](https://www.shadcn-svelte.com/docs/components/carousel) [Next](https://www.shadcn-svelte.com/docs/components/checkbox) Beautiful charts. Built using LayerChart. Copy and paste into your apps. [Docs](https://next.layerchart.com/) Component Source Bar Chart - Interactive Showing total visitors for the last 3 months Desktop 24,828Mobile 25,010 Trending up by 5.2% this month Showing total visitors for the last 6 months **Important:** LayerChart v2 is still in pre-release and is actively evolving. Only use if you're comfortable with potential breaking changes before stable v2. Your feedback will be invaluable in shaping the release and features. Current development status can be tracked [here](https://github.com/techniq/layerchart/pull/449) . Introducing **Charts**. A collection of chart components that you can copy and paste into your apps. Charts are designed to look great out of the box. They work well with other components are are fully customizable to fit your project. [Browse the Charts Library](https://www.shadcn-svelte.com/charts) Component --------- We use [LayerChart](https://next.layerchart.com/) under the hood. We designed the `Chart` component with composition in mind. **You build your charts using LayerChart components and only bring in custom components, such as `ChartTooltip`, when and where you need it** ` {#snippet tooltip()} {/snippet} ` Copy We do not wrap LayerChart. This means you're not locked into an abstraction. When a new LayerChart version is released, you can follow the official upgrade path to upgrade your charts. **The components are yours**. Installation ------------ CLI Manual pnpmnpmbunyarn pnpm dlx shadcn-svelte@latest add chart npx shadcn-svelte@latest add chart bun x shadcn-svelte@latest add chart npx shadcn-svelte@latest add chart Copy Install `layerchart`: pnpmnpmbunyarn pnpm i layerchart@next -D npm i layerchart@next -D bun install layerchart@next -D yarn install layerchart@next -D Copy Add the following colors to your CSS file `:root { --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); } .dark { --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); } @theme inline { --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); }` Copy Copy and paste the component source files linked at the top of this page into your project. Your First Chart ---------------- Let's build your first chart. We'll build a bar chart with an axis, grid, tooltip, and legend. ### Start by defining your data The following data represents the number of desktop and mobile users for each month. **Note:** Your data can be in any shape. You are not limited to the shape of the data below. Use the `dataKey` prop to map your data to the chart. lib/components/example-chart.svelte `` Copy ### Define your chart config The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons, and color tokens for theming. lib/components/example-chart.svelte `` Copy ### Build your chart You can now build your chart using LayerChart components. We're using the `BarChart` component in this example, which is one of LayerChart's "Simplified Charts". These components handle a lot of the common chart scaffolding for you, while allowing you to customize them to your liking. Expand lib/components/example-chart.svelte ` ` Copy Expand Preview Code ` ` Copy We now have a group-stacked bar chart with an x axis and a grid. ### Adjusting the Axis Ticks Our bar chart is currently displaying the full month name for each tick on the x axis. Let's shorten it to just the first three letters. ### Add a custom formatter to the x axis The `props` prop is how you can pass custom props to the various components that make up the chart. Here we're passing a custom formatter to the x axis. ` d.slice(0, 3), }, }} /> ` Copy Preview Code ` d.slice(0, 3) } }} /> ` Copy ### Add Tooltip So far we've only used the `BarChart` component from LayerChart. They look great out of the box thanks to some customizations in the `chart` component. To add a tooltip, we'll use the custom `Chart.Tooltip` component from `chart`. ### Add the `Chart.Tooltip` component to the chart We'll replace the `tooltip={false}` prop with the `tooltip` snippet where we'll place the `Chart.Tooltip` component. ` d.slice(0, 3), }, }} > {#snippet tooltip()} {/snippet} ` Copy Preview Code ` {#snippet tooltip()} {/snippet} ` Copy ### Add Legend ### Set the `legend` prop to `true` The `legend` prop is used to show a legend for the chart. We are working with LayerChart to add a payload similar to the tooltip so we can more easily create a custom legend. ` d.slice(0, 3), }, }} > {#snippet tooltip()} {/snippet} ` Copy Preview Code ` {#snippet tooltip()} {/snippet} ` Copy Done. You've built your first chart! What's next? * [Themes and Colors](https://www.shadcn-svelte.com/docs/components/chart#theming) * [Tooltip](https://www.shadcn-svelte.com/docs/components/chart#tooltip) Chart Config ------------ The chart config is where you define the labels, icons and colors for a chart. It is intentionally decoupled from chart data. This allows you to share config and color tokens between charts. It can also works independently for cases where your data or color tokens live remotely or in a different format. `` Copy Theming ------- Charts has built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl, or oklch. ### CSS Variables ### Define your colors in your css file src/app.css `:root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); /* ... */ --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); /* ... */ --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); }` Copy ### Add the color to your `chartConfig` `` Copy ### hex, hsl or oklch You can also define your colors directly in the chart config. Use the color format you prefer. `` Copy ### Using Colors To use the theme colors in your chart, reference the colors using the format `var(--color-KEY)`. #### Components `` Copy #### Chart Data `const chartData = [ { browser: "chrome", visitors: 275, color: "var(--color-chrome)" }, { browser: "safari", visitors: 200, color: "var(--color-safari)" }, ];` Copy #### Tailwind `