--- title: About description: Powered by amazing open source projects. --- ## About  is a port of  for Svelte/SvelteKit. It's maintained by  and  and has received countless contributions from the community. ## Credits -  - The brilliant mind behind the designs, methodology, and implementation of the original . -  - The headless components that power this project. -  - The form components that power this project. -  - The resizable components that power this project. -  - The drawer components that power this project. -  - The command menu components that power this project. -  - The headless primitive component builders that power this project. -  - The headless components and examples that the original  was built on. -  - The typography style is adapted from his work on Nextra. -  - Where shad copied the styles for the first component: the `Button`. ## License MIT ©  & --- title: Changelog description: Latest updates and announcements. --- <script> import { Steps, Callout, ComponentPreview } from '$lib/components/docs' import DashboardDark from '$lib/img/blocks/dashboard-1-dark.jpg?enhanced'; import DashboardLight from '$lib/img/blocks/dashboard-1.jpg?enhanced'; </script> ## March 2024 ### Introducing 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. <enhanced:img src={DashboardDark} alt="A screenshot of the dashboard-01 block" class="h-full w-full hidden dark:block mt-6" /> <enhanced:img src={DashboardLight} alt="A screenshot of the dashboard-01 block" class="h-full w-full block dark:hidden mt-6" />  only supports React at the moment, so you can't customize them like you can the original from . 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, . <ComponentPreview name="breadcrumb-demo"> <div /> </ComponentPreview> ### New Component: Scroll Area We've added a new component to the project, , which is built on top of the  component from Bits UI. It supports both vertical and horizontal scrolling, and is designed to provide a consistent experience across all browsers and platforms. #### Examples <ComponentPreview name="scroll-area-demo"> <div /> </ComponentPreview> <ComponentPreview name="scroll-area-horizontal"> <div /> </ComponentPreview> ## February 2024 ### New Component: Resizable We've added a new component to the project, , which is built on top of . PaneForge is still in an early stage, so be sure to raise any issues you find with the library on the . <ComponentPreview name="resizable-demo"> <div /> </ComponentPreview> ### 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  for the `new-york` style. Instead of importing icons like so:  We now import them directly:  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  page. Visit the  documentation  to learn more about the new API and how its used. ## January 2024 We've added four new components to the project, , , , & . ### New Component: Carousel We've added a new component to the project, . <ComponentPreview name="carousel-demo"> <div /> </ComponentPreview> ### New Component: Drawer The Drawer is built on top of  and is a port of , originally created by  for React. <ComponentPreview name="drawer-demo"> <div/> </ComponentPreview> ### New Component: Sonner The Sonner component is provided by , which is a Svelte port of , originally created by  for React. <ComponentPreview name="sonner-demo"> <div/> </ComponentPreview> ### New Component: Pagination Pagination leverages the  component from Bits UI. <ComponentPreview name="pagination-demo"> <div/> </ComponentPreview> ## December 2023 We've added three new components to the project, , , & . ### New Component: Calendar <ComponentPreview name="calendar-demo"> <div/> </ComponentPreview> ### New Component: Range Calendar <ComponentPreview name="range-calendar-demo"> <div/> </ComponentPreview> ### New Component: Date Picker <ComponentPreview name="date-picker-demo"> <div/> </ComponentPreview> ## November 2023 ### New Component: Toggle Group We've added a new component to the library, . <ComponentPreview name="toggle-group-demo"> <div /> </ComponentPreview> ## October 2023 We've added two new components to the library,  & . We've also made some updates to the `<Form.Label />` 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 , which is a Svelte port of . The library is still in its infancy, but we're excited to see where it goes. If you notice any issues, please  with the library. <ComponentPreview name="command-dialog"> <div /> </ComponentPreview> Be sure to check out the  docs for more information. ### New Component: Combobox Combobox is a combination of the `<Command />` & `<Popover />` components. It allows you to create a searchable dropdown menu. <ComponentPreview name="combobox-demo"> <div /> </ComponentPreview> Be sure to check out the  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 `<Form.Label />` component. The `ids` returned from `getFormField` is now a store, so we need to prefix it with `$` when we use it.  ### Form.Control Formsnap introduced a new component `<Form.Control />` 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.  ## August 2023 - Transitions & More ### Transitions To support both enter and exit transitions, we've had to move from `tailwindcss-animate` to . You can still use the `tailwindcss-animate` if you'd like, but you won't have exit transitions on most components. To get the updated transition support, be sure to upgrade to the latest version of `bits-ui`, which at the time of this writing is `0.5.0`. We now provide a custom transition `flyAndScale` ) which most components use. It's added to the `utils.ts` file when you `init` a new project. #### Migration If you're using `tailwindcss-animate` and want to migrate to the new transition system, you'll need to do the following: Update your `utils.ts` file to include the `flyAndScale` transition:  Inside the components that use transitions/animations, you'll need to remove the animation classes and add the transition. Here's an example of the `AlertDialog.Content` component:  If you're unsure which specific classes should be removed, you can reference the components in the  to see the changes. ### Events Previous, we were using the same syntax as  for events, as we were simply forwarding them. So you'd have to do `on:m-click` or `on:m-keydown`. While this isn't a huge deal, since we're using components, we decided we wanted to use the same syntax as you would for any other Svelte component. So now you can just do `on:click` or `on:keydown`. Behind the scenes, we're redispatching the event, so the contents of the event are the same, but the syntax is a bit more familiar. #### Migration To migrate to the new event syntax, you'll need to update your components that are forwarding the `m-` events. Ensure you're on the latest version of `bits-ui` before doing so. --- title: CLI description: Use the CLI to add components to your project. --- <script> import { PMExecute } from '$lib/components/docs' </script> ## init Use the `init` command to initialize dependencies for a new project. The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.cjs`, and creates CSS variables for the project. <PMExecute command="shadcn-svelte@latest init" /> You will be asked a few questions to configure `components.json`:  ### Options  ## add Use the `add` command to add components and dependencies to your project. <PMExecute command="shadcn-svelte@latest add " /> You will be presented with a list of components to choose from:  ### Options  ## update Use the `update` command to update components in your project. This will overwrite any modifications you've made to the components, so be sure to commit your changes before running this command. <PMExecute command="shadcn-svelte@latest update " /> ### Options  ## Outgoing Requests ### Proxy This enables the use of a proxy when sending out requests to fetch from the `shadcn` registry. If the `HTTP_PROXY` or `http_proxy` environment variables have been set, the request library underneath will respect the proxy settings. --- title: components.json description: Configuration for your project. --- <script> import { Callout, ComponentPreview, PMExecute } from '$lib/components/docs' </script> 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. <Callout class="mt-6"> Note: The <code>components.json</code> 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. </Callout> You can create a `components.json` file in your project by running the following command: <PMExecute command="shadcn-svelte@latest init" /> See the  for more information. ## $schema You can see the JSON Schema for `components.json` .  ## style The style for your components. **This cannot be changed after initialization.**  <ComponentPreview name="card-with-form"> <div /> </ComponentPreview> ## tailwind Configuration to help the CLI understand how Tailwind CSS is set up in your project. See the  for how to set up Tailwind CSS. ### tailwind.config Path to where your `tailwind.config.js` file is located.  ### tailwind.css Path to the CSS file that imports Tailwind CSS into your project.  ### tailwind.baseColor This is used to generate the default color palette for your components. **This cannot be changed after initialization.**  ## 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.utils Import alias for your utility functions.  ### aliases.components Import alias for your components.  ## Typescript --- title: Accordion description: A vertically stacked set of interactive headings that each reveal a section of content. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/accordion bits: https://www.bits-ui.com/docs/components/accordion --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="accordion-demo" class="]:sm:max-w-"> <div /> </ComponentPreview> ## Installation <PMAddComp name="accordion" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Alert Dialog description: A modal dialog that interrupts the user with important content and expects a response. featured: true component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/alert-dialog bits: https://www.bits-ui.com/docs/components/alert-dialog --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="alert-dialog-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="alert-dialog" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Alert description: Displays a callout for user attention. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/alert --- <script> import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs'; </script> <ComponentPreview name="alert-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="alert" /> <ManualInstall> 1. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Default <ComponentPreview name="alert-demo"> <div /> </ComponentPreview> ### Destructive <ComponentPreview name="alert-destructive"> <div /> </ComponentPreview> --- title: Aspect Ratio description: Displays content within a desired ratio. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/aspect-ratio bits: https://www.bits-ui.com/docs/components/aspect-ratio --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="aspect-ratio-demo"> <div/> </ComponentPreview> ## Installation <PMAddComp name="aspect-ratio" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Avatar description: An image element with a fallback for representing the user. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/avatar bits: https://www.bits-ui.com/docs/components/avatar --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="avatar-demo"> <div/> </ComponentPreview> ## Installation <PMAddComp name="avatar" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Badge description: Displays a badge or a component that looks like a badge. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/badge --- <script> import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs'; import { BadgeDemo, BadgeDestructive, BadgeOutline, BadgeSecondary } from '$lib/registry/default/example' </script> <ComponentPreview name="badge-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="badge" /> <ManualInstall> 1. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage   ### Link You can use the `badgeVariants` helper to create a link that looks like a badge.  ## Examples ### Default <ComponentPreview name="badge-demo"> <div /> </ComponentPreview> --- ### Secondary <ComponentPreview name="badge-secondary"> <div /> </ComponentPreview> --- ### Outline <ComponentPreview name="badge-outline"> <div /> </ComponentPreview> --- ### Destructive <ComponentPreview name="badge-destructive"> <div /> </ComponentPreview> --- title: Breadcrumb description: Displays the path to the current resource using a hierarchy of links. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/breadcrumb --- <script> import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs'; </script> <ComponentPreview name="breadcrumb-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="breadcrumb" /> <ManualInstall> 1. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Custom separator Use a custom component in the `<slot>` of `<Breadcrumb.Separator />` to create a custom separator. <ComponentPreview name="breadcrumb-separator"> <div /> </ComponentPreview> --- ### Dropdown You can compose `<Breadcrumb.Item />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb. <ComponentPreview name="breadcrumb-dropdown"> <div /> </ComponentPreview> --- ### Collapsed We provide a `<Breadcrumb.Ellipsis />` component to show a collapsed state when the breadcrumb is too long. <ComponentPreview name="breadcrumb-ellipsis"> <div /> </ComponentPreview> --- ### Link component To use a custom link component from your routing library, you can use the `asChild` prop on `<Breadcrumb.Link />`. <ComponentPreview name="breadcrumb-link"> <div /> </ComponentPreview> --- ### Responsive Here's an example of a responsive breadcrumb that composes `<Breadcrumb.Item />` with `<Breadcrumb.Ellipsis />`, `<DropdownMenu />`, and `<Drawer />`. It displays a dropdown on desktop and a drawer on mobile. <ComponentPreview name="breadcrumb-responsive"> <div /> </ComponentPreview> --- title: Button description: Displays a button or a component that looks like a button. featured: true component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/button bits: https://www.bits-ui.com/docs/components/button --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="button-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="button" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage   ### Link You can convert the `<button>` into an `<a>` element by simply passing an `href` as a prop.  Alternatively, you can use the `buttonVariants` helper to create a link that looks like a button.  ## Examples ### Primary <ComponentPreview name="button-demo"> <div /> </ComponentPreview> --- ### Secondary <ComponentPreview name="button-secondary"> <div /> </ComponentPreview> --- ### Destructive <ComponentPreview name="button-destructive"> <div /> </ComponentPreview> --- ### Outline <ComponentPreview name="button-outline"> <div /> </ComponentPreview> --- ### Ghost <ComponentPreview name="button-ghost"> <div /> </ComponentPreview> --- ### Link <ComponentPreview name="button-link"> <div /> </ComponentPreview> --- ### With Icon <ComponentPreview name="button-with-icon"> <div /> </ComponentPreview> --- ### Icon <ComponentPreview name="button-icon"> <div /> </ComponentPreview> --- ### Loading <ComponentPreview name="button-loading"> <div /> </ComponentPreview> --- title: Calendar description: A calendar component that allows users to select dates. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/calendar bits: https://www.bits-ui.com/docs/components/calendar --- <script> import { ComponentPreview, ManualInstall, Callout, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="calendar-demo"> <div /> </ComponentPreview> ## About The `<Calendar />` component is built on top of the  component, which uses the  package to handle dates. If you're looking for a range calendar, check out the  component. ## Installation <PMAddComp name="calendar" /> <ManualInstall> 1. Install `bits-ui` and `@internationalized/date`: <PMInstall command="bits-ui @internationalized/date" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Date Picker You can use the `<Calendar />` component to build a date picker. See the  page for more information. ## Examples ### Form <ComponentPreview name="date-picker-demo"> <div /> </ComponentPreview> ## Advanced Customization The `<Calendar />` component can be combined with other components to create a more complex calendar. <Callout> By default, we export the combined Calendar component as <code>Calendar</code> as there are quite a few pieces that need to be combined to create it. We're modifying that component in the examples below. </Callout> ### Month & Year Selects Here's an example of how you could create a calendar with month and year select dropdowns instead of the previous and next buttons. <ComponentPreview name="calendar-with-selects"> <div /> </ComponentPreview> --- title: Card description: Displays a card with header, content, and footer. featured: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/card --- <script> import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs'; </script> <ComponentPreview name="card-with-form"> <div /> </ComponentPreview> ## Installation <PMAddComp name="card" /> <ManualInstall> 1. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ### Modify the heading level By default, the `<Card.Title>` component renders an `<h3>` element. You can change this by passing a `tag` prop to the component. For example:  ...  ## Examples <ComponentPreview name="card-demo"> <div /> </ComponentPreview> --- title: Carousel description: A carousel with motion and swipe built using Embla. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/carousel bits: https://www.embla-carousel.com/get-started/svelte/ --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="carousel-demo"> <div /> </ComponentPreview> ## About The carousel component is built using the  library. ## Installation <PMAddComp name="carousel" /> <ManualInstall> 1. Install `embla-carousel-svelte`: <PMInstall command="embla-carousel-svelte -D" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Sizes To set the size of the items, you can use the `basis` utility class on the `<Carousel.Item />`. <ComponentPreview name="carousel-size"> <div /> </ComponentPreview>   ### Spacing To set the spacing between the items, we use a `pl-` utility on the `<Carousel.Item />` and a negative `-ml-` on the `<Carousel.Content />`. <ComponentPreview name="carousel-spacing"> <div /> </ComponentPreview>   ### Orientation Use the `orientation` prop to set the orientation of the carousel. <ComponentPreview name="carousel-orientation"> <div /> </ComponentPreview>  ## Options You can pass options to the carousel using the `opts` prop. See the  for more information.  ## API Use reactive state and the `bind:api` directive to get an instance of the carousel API. <ComponentPreview name="carousel-api"> <div /> </ComponentPreview>  ## Events You can listen to events using the api instance from `bind:api`.  ## Plugins You can use the `plugins` prop to add plugins to the carousel.  <ComponentPreview name="carousel-plugin"> <div /> </ComponentPreview> See the  for more information on using plugins. --- title: Checkbox description: A control that allows the user to toggle between checked and not checked. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/checkbox bits: https://www.bits-ui.com/docs/components/checkbox --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="checkbox-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="checkbox" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage   ## Examples ### With Text <ComponentPreview name="checkbox-with-text"> <div /> </ComponentPreview> ### Disabled <ComponentPreview name="checkbox-disabled"> <div /> </ComponentPreview> ### Form <ComponentPreview name="checkbox-form-single"> <div /> </ComponentPreview> <ComponentPreview name="checkbox-form-multiple"> <div /> </ComponentPreview> --- title: Collapsible description: An interactive component which expands/collapses a panel. component: true featured: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/collapsible bits: https://www.bits-ui.com/docs/components/collapsible --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="collapsible-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="collapsible" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Combobox description: Autocomplete input and command palette with a list of suggestions. component: true --- <script> import { ComponentPreview, ManualInstall, Callout } from '$lib/components/docs'; </script> <ComponentPreview name="combobox-demo"> <div /> </ComponentPreview> ## Installation The Combobox is built using a composition of the `<Popover />` and the `<Command />` components. See installation instructions for the  and the  components. ## Usage  ## Examples ### Combobox <ComponentPreview name="combobox-demo"> <div /> </ComponentPreview> ### Popover <ComponentPreview name="combobox-popover"> <div /> </ComponentPreview> ### Dropdown menu <ComponentPreview name="combobox-dropdown-menu"> <div /> </ComponentPreview> ### Form Since the Combobox is built using the `<Popover />` and the `<Command />` components, we need to use the `<Form.Control />` component. `<Form.Control />` 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. <ComponentPreview name="combobox-form"> <div /> </ComponentPreview> --- title: Command description: Fast, composable, unstyled command menu for Svelte. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/command bits: https://github.com/huntabyte/cmdk-sv --- <script> import { ComponentPreview, ManualInstall, Callout, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="command-demo" align="start" > <div /> </ComponentPreview> ## About The `<Command />` component uses the  library to provide a fast, composable, unstyled command menu for Svelte. <Callout> **Note:** `cmdk-sv` is a new library and is still in alpha. While I don't anticipate a ton of breaking changes, as the API aligns with the original, I want to bring this to your awareness. If you find any bugs, please  with the library, rather than this project. </Callout> ## Installation <PMAddComp name="command" /> <ManualInstall> 1. Install `cmdk-sv` and `bits-ui`: <PMInstall command="cmdk-sv bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Dialog <ComponentPreview name="command-dialog"> <div /> </ComponentPreview> To show the command menu in a dialog, use the `<Command.Dialog />` component instead of `<Command.Root />`. It accepts props for both the `<Dialog.Root />` and `<Command.Root />` components. --- title: Context Menu description: Displays a menu to the user — such as a set of actions or functions — triggered by right click. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/context-menu bits: https://www.bits-ui.com/docs/components/context-menu --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs' </script> <ComponentPreview name="context-menu-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="context-menu" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Data Table description: Powerful table and datagrids built using Svelte Headless Table. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/example/data-table-demo.svelte --- <script> import { ComponentPreview, ManualInstall, Callout, Steps, PMAddComp, PMInstall } from '$lib/components/docs' </script> <ComponentPreview name="data-table-demo"> <div /> </ComponentPreview> ## Introduction Data tables are difficult to componentize because of the wide variety of features they support, and the uniqueness of every data set. So instead of trying to create a one-size-fits-all solution, we've created a guide to help you build your own data tables. We'll start with the basic `<Table />` component, and work our way up to a fully-featured data table. <Callout> <strong>Tip:</strong> If you find yourself using the same table in multiple places, you can always extract it into a reusable component. </Callout> ## Table of Contents This guide will show you how to use  and the `<Table />` component to build your own custom data table. We'll cover the following topics: - Basic Table - Row Actions - Pagination - Sorting - Filtering - Visibility - Row Selection - Reusable Components ## Installation 1. Add the `<Table />` component to your project: <PMAddComp name="table" /> 2. Add `svelte-headless-table` as a dependency: <PMInstall command="svelte-headless-table" /> ## Prerequisites We're going to build a table to show recent payments. Here's what our data looks like:  ## Project Structure Start by creating a route where your data table will live , along with the following files:  - `data-table.svelte` will contain the `<Table />` component all of our data table logic. - `data-table-actions.svelte` will contain the actions menu for each row. - `data-table-checkbox.svelte` will contain the checkbox for each row. - `+page.svelte` is where we'll render and access `<DataTable />` component. ## Basic Table Let's start by building a basic table. <Steps> ### Get/Add Data Before we can initialize a table, we need to get our data. You can retrieve your data from anywhere, but for this example we'll use a `payments` array.  ### Initialize Table Next, we'll initialize a new table using `svelte-headless-table`.  ### Create Columns Now that we have a table, we can define our columns.  The last column is where we'll render a menu of actions for each row. ### Create View Model & Render Table Finally, we'll create a view model which we'll use to build our table.  ### Render the table Finally, we'll render our table in our `+page.svelte` file.  </Steps> ## Cell Formatting Now that we have a basic table, let's format the `amount` cell to display the dollar amount. We'll also align the cell to the right. <Steps> ### Update columns definition First, we'll update our columns definition for the `amount` column to return a formatted string.  ### Update styles Now that we're returning a formatted string, let's now align the `amount` header and cell to the right. We'll also capitalize our `status` cell values.  You can use this approach to customize the styles of any cell in your table. In the following sections, we'll demonstrate how you can use a component to render a cell as well. </Steps> ## Row Actions Let's now add row actions to our table. We'll use a `<DropdownMenu />` and `<Button />` component for this. <Steps> ### Create actions component We'll start by creating a new component called `data-table-actions.svelte` which will contain our actions menu. It's going to receive an `id` prop, which we'll use to identify and perform specific actions on the row.  ### Update columns definition Now that we've defined our actions component, let's update our `actions` column definition to use it.  We're just passing the `id` to our actions component, but you could pass whatever information you need to perform actions on the row. In this example, we could use the `id` to make a DELETE request to our API to delete the payment. </Steps> ## Pagination Next, we'll add pagination to our table <Steps> ### Enable the `addPagination` plugin  ### Add pagination controls We can add pagination controls to our table using the `<Button />` component and the `hasNextPage`, `hasPreviousPage`, and `pageIndex` variables.  See the  for more information on how to customize the pagination behavior. </Steps> ## Sorting Let's make the email column sortable. <Steps> ### Enable the `addSortBy` plugin Let's enable the `addSortBy` plugin and import the `<ArrowUpDown />` icon which we'll use to indicate the sort option for the column.  ### Make header cell sortable We can now update the `email` header cell to add sorting controls.  See the  for more information on how to customize the sort behavior. </Steps> ## Filtering Let's add a search input to filter emails in our table. <Steps> ### Enable the `addTableFilter` plugin We'll start by enabling the `addTableFilter` plugin and importing the `<Input />` component we'll use for the search input.  We're excluding all columns except for `email` from the filter plugin, and we're using a case-insensitive filter function to match the email value. ### Add search input Now that our table is configured to filter by email, let's add a search input on top of our table.  Since `filterValue` is a store, we can bind it to the input value and it will automatically update as the user types. See the  for more information on how to customize the filtering behavior. </Steps> ## Visibility Let's add the ability to control which columns are visible in our table. <Steps> ### Enable `addHiddenColumns` plugin We'll start by enabling the `addHiddenColumns` plugin. We'll also need a `<ChevronDown />` icon and the `<DropdownMenu />` component in the next step.  We're setting the `hiddenColumnIds` store from the plugin whenever `hideForId` changes to reflect our newly chosen hidden/shown columns. ### Add column visibility controls Now we'll use the icon and `<DropdownMenu />` we imported in the previous step to render a menu of columns that can be hidden.  See the  for more information. </Steps> ## Row Selection Next, we're going to add row selection to our table. <Steps> ### Create checkbox component We'll start by creating a new component called `data-table-checkbox.svelte` which will be used to render a checkbox for each row.  ### Enable `addSelectedRows` plugin Next, we'll enable the `addSelectedRows` plugin and import the `<Checkbox />` component we just created.  ### Update styles & show selected rows To accommodate the checkbox, we'll need to update our table styles. We'll also add a message to show how many rows are selected.  See the  for more information on how to customize the selection behavior. </Steps> --- title: Date Picker description: A date picker component with range and presets. component: true source: https://github.com/huntabyte/shadcn-svelte/blob/main/sites/docs/src/lib/registry/default/example/date-picker-demo.svelte --- <script> import { ComponentPreview, ManualInstall } from '$lib/components/docs'; </script> <ComponentPreview name="date-picker-demo"> <div /> </ComponentPreview> ## Installation The Date Picker is built using a composition of the `<Popover />` and either the `<Calendar />` or `<RangeCalendar />` components. See installations instructions for the , , and  components. ## Usage  ## Examples ### Date Picker <ComponentPreview name="date-picker-demo"> <div /> </ComponentPreview> ### Date Range Picker <ComponentPreview name="date-picker-with-range"> <div /> </ComponentPreview> ### With Presets <ComponentPreview name="date-picker-with-presets"> <div /> </ComponentPreview> ### Form <ComponentPreview name="date-picker-form"> <div /> </ComponentPreview> --- title: Dialog description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. component: true featured: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/dialog bits: https://www.bits-ui.com/docs/components/dialog --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="dialog-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="dialog" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Drawer description: A drawer component for Svelte. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/drawer bits: https://www.vaul-svelte.com --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs' </script> <ComponentPreview name="drawer-demo"> <div /> </ComponentPreview> ## About Drawer is built on top of , which is a Svelte port of  by . ## Installation <PMAddComp name="drawer" /> <ManualInstall> 1. Install `vaul-svelte`: <PMInstall command="vaul-svelte" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Responsive Dialog You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` on desktop and a `Drawer` on mobile. <ComponentPreview name="drawer-dialog"> <div /> </ComponentPreview> --- title: Dropdown Menu description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/dropdown-menu bits: https://www.bits-ui.com/docs/components/dropdown-menu --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs' </script> <ComponentPreview name="dropdown-menu-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="dropdown-menu" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Checkboxes <ComponentPreview name="dropdown-menu-checkboxes"> <div /> </ComponentPreview> ### Radio Group <ComponentPreview name="dropdown-menu-radio-group"> <div /> </ComponentPreview> --- title: Formsnap & Superforms description: Building forms with Formsnap, Superforms, & Zod. --- <script> import { Steps, ComponentPreview, FormPreview, PMAddComp, PMInstall } from '$lib/components/docs'; export let form; </script> Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex. Well-designed HTML forms are: - Well-structured and semantically correct. - Easy to use and navigate . - Accessible with ARIA attributes and proper labels. - Has support for client and server side validation. - Well-styled and consistent with the rest of the application. In this guide, we will take a look at building forms with ,  and . ## Features The `Form` components offered by `shadcn-svelte` are wrappers around `formsnap` & `sveltekit-superforms` which provide a few things: - Composable components for building forms. - Form field components for scoping form state. - Form validation using  or any other validation library supported by . - Applies the correct `aria` attributes to form fields based on states. - Enables you to easily use various components like , , ,  and other form components with forms. If you aren't familiar with  & , you should check out their documentation first, as this guide assumes you have a basic understanding of how they work together. ## Anatomy  ## Example  ## Installation <PMAddComp name="form" /> ## Usage <Steps> ### Create a form schema Define the shape of your form using a Zod schema. You can read more about using Zod in the . We're going to define it in a file called `schema.ts` in the same directory as our page component, but you can put it anywhere you like.  ### Return the form from the route's load function  ### Create a form component For this example, we'll be passing the `form` returned from the load function as a prop to this component. To ensure it's typed properly, we'll use the `SuperValidated` type from `sveltekit-superforms`, and pass in the type of our form schema.  The `name`, `id`, and all accessibility attributes are applied to the input by spreading the `attrs` object from the `Form.Control` component. The `Form.Label` will automatically be associated with the input using the `for` attribute, so you don't have to worry about that. ### Create a page component that uses the form We'll pass the `form` from the data returned from the load function to the form component we created above.  ### Create an Action that handles the form submission  ### Done That's it. You now have a fully accessible form that is type-safe and has client & server side validation. <FormPreview {form} /> </Steps> ## Next Steps Be sure to check out the  and  documentation for more information on how to use them. ## Examples See the following links for more examples on how to use the other `Form` components: -  -  -  -  -  -  - --- title: Hover Card description: For sighted users to preview content available behind a link. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/hover-card bits: https://www.bits-ui.com/docs/components/link-preview --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="hover-card-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="hover-card" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Input description: Displays a form input field or a component that looks like an input field. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/input --- <script> import { ComponentPreview, ManualInstall, PMAddComp} from '$lib/components/docs'; export let form; </script> <ComponentPreview name="input-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="input" /> <ManualInstall> 1. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Default <ComponentPreview name="input-demo"> <div /> </ComponentPreview> ### Disabled <ComponentPreview name="input-disabled"> <div /> </ComponentPreview> ### With Label <ComponentPreview name="input-with-label"> <div /> </ComponentPreview> ### With Text <ComponentPreview name="input-with-text"> <div /> </ComponentPreview> ### With Button <ComponentPreview name="input-with-button"> <div /> </ComponentPreview> ### File <ComponentPreview name="input-file"> <div /> </ComponentPreview> ### Form <ComponentPreview name="form-demo" {form}> <div /> </ComponentPreview> --- title: Label description: Renders an accessible label associated with controls. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/label bits: https://www.bits-ui.com/docs/components/label --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="label-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="label" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Menubar description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/menubar bits: https://www.bits-ui.com/docs/components/menubar --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs' </script> <ComponentPreview name="menubar-demo"> </ComponentPreview> ## Installation <PMAddComp name="menubar" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Pagination description: Pagination with page navigation, next and previous links. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/pagination bits: https://www.bits-ui.com/docs/components/pagination --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="pagination-demo" > <div /> </ComponentPreview> ## Installation <PMAddComp name="pagination" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Popover description: Displays rich content in a portal, triggered by a button. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/popover bits: https://www.bits-ui.com/docs/components/popover --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="popover-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="popover" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Progress description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/progress bits: https://www.bits-ui.com/docs/components/progress --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="progress-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="progress" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Radio Group description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/radio-group bits: https://www.bits-ui.com/docs/components/radio-group --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="radio-group-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="radio-group" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Form <ComponentPreview name="radio-group-form"> <div /> </ComponentPreview> --- title: Range Calendar description: A calendar component that allows users to select a range of dates. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/range-calendar bits: https://www.bits-ui.com/docs/components/range-calendar --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="range-calendar-demo"> <div /> </ComponentPreview> ## About The `<RangeCalendar />` component is built on top of the  component, which uses the  package to handle dates. ## Installation <PMAddComp name="range-calendar" /> <ManualInstall> 1. Install `bits-ui` and `@internationalized/date`: <PMInstall command="bits-ui @internationalized/date" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> --- title: Resizable description: Accessible resizable panel groups and layouts with keyboard support. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/resizable bits: https://paneforge.com --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs' </script> <ComponentPreview name="resizable-demo"> <div /> </ComponentPreview> ## About The `Resizable` component is built on top of  by . Visit the  for all the available props and abilities of the `Resizable` component. ## Installation <PMAddComp name="resizable" /> <ManualInstall> 1. Install `paneforge`: <PMInstall command="paneforge" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Vertical Use the `direction` prop to set the direction of the resizable panels. <ComponentPreview name="resizable-vertical"> <div /> </ComponentPreview>  ### Handle You can set or hide the handle by using the `withHandle` prop on the `ResizableHandle` component. <ComponentPreview name="resizable-handle"> <div /> </ComponentPreview> --- title: Scroll Area description: Augments native scroll functionality for custom, cross-browser styling. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/scroll-area bits: https://bits-ui.com/docs/components/scroll-area --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="scroll-area-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="scroll-area" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Horizontal Scrolling Set the `orientation` prop to `"horizontal"` to enable horizontal scrolling. <ComponentPreview name="scroll-area-horizontal"> <div /> </ComponentPreview> ### Horizontal and Vertical Scrolling Set the `orientation` prop to `"both"` to enable both horizontal and vertical scrolling. <ComponentPreview name="scroll-area-both"> <div /> </ComponentPreview> --- title: Select description: Displays a list of options for the user to pick from—triggered by a button. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/select bits: https://www.bits-ui.com/docs/components/select --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs' </script> <ComponentPreview name="select-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="select" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Form For more advanced usage and to learn how to implement `multiple` Select components in a form, check out the  on Formsnap. <ComponentPreview name="select-form"> <div /> </ComponentPreview> --- title: Separator description: Visually or semantically separates content. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/separator bits: https://www.bits-ui.com/docs/components/separator --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="separator-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="separator" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Sheet description: Extends the Dialog component to display content that complements the main content of the screen. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/sheet bits: https://www.bits-ui.com/docs/components/dialog --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="sheet-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="sheet" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Side Pass the `side` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`. <ComponentPreview name="sheet-side"> <div /> </ComponentPreview> --- title: Skeleton description: Use to show a placeholder while content is loading. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/skeleton --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="skeleton-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="skeleton" /> <ManualInstall> 1. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Slider description: An input where the user selects a value from within a given range. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/slider bits: https://www.bits-ui.com/docs/components/slider --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="slider-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="slider" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Sonner description: An opinionated toast component for Svelte. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/sonner --- <script> import { ComponentPreview, ManualInstall, Steps, Step, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="sonner-demo"> <div /> </ComponentPreview> ## About The Sonner component is provided by , which is a Svelte port of , originally created by  for React. ## Installation <Steps> <Step> Setup theme support </Step> By default, Sonner will use the user's system preferences to determine whether to show the light or dark theme. To get around this, you can either pass in a custom `theme` prop to the component, or simply use  which you can hardcode to `dark` or `light` mode should you wish. You can learn more about setting up Dark Mode support . If you wish to opt out of Dark Mode support, you can uninstall `mode-watcher` and remove the `theme` prop from the component after installing via CLI, or manually install the component and don't include `mode-watcher` <Step> Run the following command: </Step> <PMAddComp name="sonner" /> <Step> Add the Toaster component </Step> Note: Make sure you are adding the import from the path `"$lib/components/ui/sonner"` not `"svelte-sonner"`.  </Steps> <ManualInstall> 1. Install `svelte-sonner`: <PMInstall command="svelte-sonner" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Switch description: A control that allows the user to toggle between checked and not checked. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/switch bits: https://www.bits-ui.com/docs/components/switch --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="switch-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="switch" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Form <ComponentPreview name="switch-form"> <div /> </ComponentPreview> --- title: Table description: A responsive table component. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/table --- <script> import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs'; </script> <ComponentPreview name="table-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="table" /> <ManualInstall> 1. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Tabs description: A set of layered sections of content—known as tab panels—that are displayed one at a time. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/tabs bits: https://www.bits-ui.com/docs/components/tabs --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="tabs-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="tabs" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Textarea description: Displays a form textarea or a component that looks like a textarea. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/textarea --- <script> import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs'; </script> <ComponentPreview name="textarea-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="textarea" /> <ManualInstall> 1. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage   ## Examples ### Default <ComponentPreview name="textarea-demo"> <div /> </ComponentPreview> ### Disabled <ComponentPreview name="textarea-disabled"> <div /> </ComponentPreview> ### With Label <ComponentPreview name="textarea-with-label"> <div /> </ComponentPreview> ### With Text <ComponentPreview name="textarea-with-text"> <div /> </ComponentPreview> ### With Button <ComponentPreview name="textarea-with-button"> <div /> </ComponentPreview> ### Form <ComponentPreview name="textarea-form"> <div /> </ComponentPreview> --- title: Toggle Group description: A set of two-state buttons that can be toggled on or off. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/toggle-group bits: https://www.bits-ui.com/docs/components/toggle-group --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="toggle-group-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="toggle-group" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Default <ComponentPreview name="toggle-group-demo"> <div /> </ComponentPreview> ### Outline <ComponentPreview name="toggle-group-outline"> <div /> </ComponentPreview> ### Single <ComponentPreview name="toggle-group-single"> <div /> </ComponentPreview> ### Small <ComponentPreview name="toggle-group-sm"> <div /> </ComponentPreview> ### Large <ComponentPreview name="toggle-group-lg"> <div /> </ComponentPreview> ### Disabled <ComponentPreview name="toggle-group-disabled"> <div /> </ComponentPreview> --- title: Toggle description: A two-state button that can be either on or off. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/toggle bits: https://www.bits-ui.com/docs/components/toggle --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="toggle-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="toggle" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage  ## Examples ### Default <ComponentPreview name="toggle-demo"> <div /> </ComponentPreview> ### Outline <ComponentPreview name="toggle-outline"> <div /> </ComponentPreview> ### With Text <ComponentPreview name="toggle-with-text"> <div /> </ComponentPreview> ### Small <ComponentPreview name="toggle-sm"> <div /> </ComponentPreview> ### Large <ComponentPreview name="toggle-lg"> <div /> </ComponentPreview> ### Disabled <ComponentPreview name="toggle-disabled"> <div /> </ComponentPreview> --- title: Tooltip description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. component: true source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/registry/default/ui/tooltip bits: https://www.bits-ui.com/docs/components/tooltip --- <script> import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'; </script> <ComponentPreview name="tooltip-demo"> <div /> </ComponentPreview> ## Installation <PMAddComp name="tooltip" /> <ManualInstall> 1. Install `bits-ui`: <PMInstall command="bits-ui" /> 2. Copy and paste the component source files linked at the top of this page into your project. </ManualInstall> ## Usage --- title: Dark mode on Astro description: Adding dark mode to your Astro site. --- <script> import { Steps, ComponentPreview, PMInstall } from "$lib/components/docs"; </script> Just like in regular Svelte, we use the `class` strategy from Tailwind CSS to support dark mode toggling. See the  for more information. How you add the `dark` class to the `html` element is up to you. In this guide, we'll take a look at enabling dark mode toggling with . ## Usage <Steps> ### Create an inline theme script This script will, in part, keep and track the dark mode value in `localStorage` and prevent .  ### Install mode-watcher <PMInstall command="mode-watcher" /> ### Add the ModeWatcher component Import the `ModeWatcher` component and use it in your page with the `client:load` directive:  ### Create a mode toggle Create a mode toggle on your site to toggle between light and dark mode: #### Light switch <ComponentPreview name="dark-mode-light-switch"> <div /> </ComponentPreview> #### Dropdown menu <ComponentPreview name="dark-mode-dropdown-menu"> <div /> </ComponentPreview> ### Add mode toggle to page Add the mode toggle to the page :  </Steps> --- title: Dark mode description: Adding dark mode to your site. --- <script> import { LinkedCard } from '$lib/components/docs' </script> <div class="grid sm:grid-cols-2 gap-4 mt-8 sm:gap-6"> <LinkedCard href="/docs/dark-mode/svelte"> <p class="font-medium text-xl">Svelte</p> </LinkedCard> <LinkedCard href="/docs/dark-mode/astro"> <p class="font-medium text-xl">Astro</p> </LinkedCard> </div> --- title: Dark mode description: Adding dark mode to your Svelte site. --- <script> import { Steps, ComponentPreview, PMInstall } from "$lib/components/docs"; </script> We use the `class` strategy from Tailwind CSS to support dark mode toggling. See the  for more information. How you add the ` dark` class to the `html` element is up to you. In this guide, we will take a look at enabling dark mode toggling with . ## Usage <Steps> ### Install mode-watcher Start by installing `mode-watcher`: <PMInstall command="mode-watcher" /> ### Add the ModeWatcher component Import the `ModeWatcher` component and use it in your root layout:  ### Add a mode toggle Place a mode toggle on your site to toggle between light and dark mode. #### Light switch <ComponentPreview name="dark-mode-light-switch"> <div /> </ComponentPreview> #### Dropdown menu <ComponentPreview name="dark-mode-dropdown-menu"> <div /> </ComponentPreview> </Steps> --- title: Figma description: Every component recreated in Figma. With customizable props, typography and icons. --- <script> import { AspectRatio } from '$lib/registry/new-york/ui/aspect-ratio'; </script> The Figma UI Kit is open sourced by . <AspectRatio ratio={16 / 9} class="w-full mt-4"> <iframe title="Figma page for shadcn" src="https://embed.figma.com/file/1203061493325953101/hf_embed?community_viewer=true&embed_host=shadcn&hub_file_id=1203061493325953101&kind=&viewer=1" class="h-full w-full overflow-hidden rounded-lg border bg-muted" /> </AspectRatio> ## Grab a copy https://www.figma.com/community/file/1203061493325953101 --- title: Introduction description: Re-usable components built with Bits UI, Melt UI, and Tailwind CSS. --- <script> import * as Accordion from '$lib/registry/new-york/ui/accordion'; import { Callout } from '$lib/components/docs'; import CircleAlert from "lucide-svelte/icons/circle-alert"; </script> An unofficial, community-led  port of . We are not affiliated with , 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's a collection of re-usable components that you can copy and paste or use the CLI to add to your apps. **What do you mean not a component library?** It means you do not install it as a dependency. It is not available or distributed via npm, with no plans to publish it. Pick the components you need. Use the CLI to automatically add the components, or copy and paste the code into your project and customize to your needs. The code is yours. _Use this as a reference to build your own component libraries._ ## FAQ <Accordion.Root multiple> <Accordion.Item value="faq-1"> <Accordion.Trigger> Why not packaged as a dependency? </Accordion.Trigger> <Accordion.Content> The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled. Start with some sensible defaults, then customize the components to your needs. One of the drawback of packaging the components in an npm package is that the style is coupled with the implementation. _The design of your components should be separate from their implementation._ </Accordion.Content> </Accordion.Item> <Accordion.Item value="faq-2"> <Accordion.Trigger> Which frameworks are supported? </Accordion.Trigger> <Accordion.Content> This port is built to be used with Svelte/SvelteKit. </Accordion.Content> </Accordion.Item> <Accordion.Item value="faq-3"> <Accordion.Trigger> Can I use this in my project? </Accordion.Trigger> <Accordion.Content> Yes. Free to use for personal and commercial projects. No attribution required. But let us know if you do use it. We'd love to see what you build with it. </Accordion.Content> </Accordion.Item> </Accordion.Root> --- title: Astro description: How to setup shadcn-svelte in an Astro project. --- <script> import { Alert, AlertDescription } from "$lib/registry/new-york/ui/alert"; import { Steps, Callout, PMCreate, PMExecute, PMInstall, PMAddComp } from "$lib/components/docs"; </script> ## Setup your project <Steps> ### Create project Start by creating a new Astro project: <PMCreate command="astro@latest" /> ### Configure your Astro project You will be asked a few questions to configure your project:  ### Add Svelte to your project Install Svelte using the Astro CLI: <PMExecute command="astro add svelte" /> <Callout className="mt-4"> Answer `Yes` to all the question prompted by the CLI when installing Svelte. </Callout> ### Add TailwindCSS to your project Add Tailwind CSS using the Astro CLI: <PMExecute command="astro add tailwind" /> <Callout className="mt-4"> Answer `Yes` to all the question prompted by the CLI when installing Svelte. </Callout> ### Setup path aliases Add the following code to the `tsconfig.json` file to resolve paths:  <Callout className="mt-4"> If needed, adapt the path aliases to your specific needs ). </Callout> ### Create a global CSS file Create the global stylesheet in `src/styles/app.css`:  ### Import the global CSS file Import the `app.css` file in the `src/pages/index.astro` file:  ### Run the CLI Run the `shadcn-svelte` init command to setup your project: <PMExecute command="shadcn-svelte@latest init" /> ### Configure components.json You will be asked a few questions to configure `components.json`:  ### Update Astro's Tailwind config To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `app.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`.  ### Update tailwind.config.mjs When running `shadcn-svelte@latest init`, your Tailwind config for content will be overwritten. To fix this, add `astro` as one of the options inside of `content`:  ### That's it You can now start adding components to your project. <PMAddComp name="button" /> The command above will add the `Button` component to your project. You can then import it like this:  <Callout className="mt-4"> Remember to use the `client` directives inside `.astro` files when dealing with interactive components ). </Callout> </Steps> --- title: Installation description: How to install dependencies and structure your app. --- <script> import { LinkedCard } from '$lib/components/docs' </script> ## Guides <div class="grid sm:grid-cols-2 gap-4 mt-8 sm:gap-6"> <LinkedCard href="/docs/installation/sveltekit"> <p class="font-medium text-xl">SvelteKit</p> </LinkedCard> <LinkedCard href="/docs/installation/astro"> <p class="font-medium text-xl">Astro</p> </LinkedCard> <LinkedCard href="/docs/installation/vite"> <p class="font-medium text-xl">Vite</p> </LinkedCard> <LinkedCard href="/docs/installation/manual"> <p class="font-medium text-xl">Manual</p> </LinkedCard> </div> ## Imports Unlike the original  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, so you can import them from a single file. For example, the Accordion component is split into four `.svelte` files: - `Accordion.svelte` - `AccordionContent.svelte` - `AccordionItem.svelte` - `AccordionTrigger.svelte` They can then be imported from the `accordion/index.ts` file like so:  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. ## TypeScript 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 . ### Opt-out of TypeScript To opt out of TypeScript, set the `typescript` flag to `false` in your `components.json` file.  To configure import aliases, create a `jsconfig.json` file:  ## ESLint configuration If you are using ESLint, some components may trigger false positives depending on your ESLint configuration. For example, you could end up with lint errors when components define `$$Props` to specify the type for `$$restProps` as `$$Props` is not directly used in the rest of the component. To ignore these linting errors, you can modify your ESLint configuration. One option is to add a `.eslintrc` file in the directory where you define your components, `$lib/components/ui` for example:  The main benefit of adding an additional `.eslintrc` file just to `$lib/components/ui` is that you will not affect how ESLint functions for the rest of your project. Only your `shadcn-svelte` components will ignore these false positives. If this is not important to you, then another option is to use a similar rule override in your global ESLint configuration file, usually `.eslintrc.cjs`. For inspiration, please refer to . If your global ESLint configuration is using the  or you would like to migrate to the flat config format  you could add another rule block in your `eslint.config.js` for example:  ## VSCode extension Install the shadcn-svelte  by  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  by  in any JetBrains IDE  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 --- title: Manual Installation description: How to setup shadcn-svelte manually. --- <script> import { Steps, Step, PMAddComp, PMInstall, PMExecute } from '$lib/components/docs' </script> ## Setup your project <Steps> ### Add Tailwind Use the Svelte CLI to add Tailwind CSS to your project. <PMExecute command="sv@0.6.18 add tailwindcss" /> ### Add dependencies Add the following dependencies to your project: <PMInstall command="tailwind-variants clsx tailwind-merge" /> ### Add icon library If you're using the `default` style, install `lucide-svelte`: <PMInstall command="lucide-svelte" /> If you're using the `new-york` style, install `svelte-radix`: <PMInstall command="svelte-radix" /> ### Configure path aliases If you are using SvelteKit and are not using the default alias `$lib`, you'll need to update your `svelte.config.js` file to include those aliases.  If you are _not_ using SvelteKit, then you'll need to update your path aliases in your `tsconfig.json` and `vite.config.ts`.   ### Configure tailwind.config.js This is what this project's `tailwind.config.js` file looks like:  Feel free to add or modify as needed to suit your project. ### Configure styles Add the following to your `src/app.pcss` file. You can learn more about using CSS variables for theming in the .  ### Configure utils You'll want to create a `cn` helper to make it easier to conditionally add Tailwind CSS classes. Additionally, you'll want to add the custom transition that is used by various components.  ### Import styles to your app Create `src/routes/+layout.svelte` and import the styles:  ### That's it You can now start adding components to your project. <PMAddComp name="button" /> </Steps> --- title: SvelteKit description: How to setup shadcn-svelte in a SvelteKit project. --- <script> import { Alert, AlertDescription } from "$lib/registry/new-york/ui/alert"; import { Steps, PMCreate, PMExecute, PMInstall, PMAddComp } from "$lib/components/docs"; </script> ## Setup your project <Steps> ### Create project Use the SvelteKit CLI to create a new project. <PMCreate command="svelte@latest my-app" /> ### Add TailwindCSS Use the Svelte CLI to add Tailwind CSS to your project. <PMExecute command="sv@0.6.18 add tailwindcss" /> ### Setup path aliases If you are not using the default alias `$lib`, you'll need to update your `svelte.config.js` file to include those aliases.  ### Run the CLI <PMExecute command="shadcn-svelte@latest init" /> ### Configure components.json You will be asked a few questions to configure `components.json`:  ### That's it You can now start adding components to your project. <PMAddComp name="button" /> The command above will add the `Button` component to your project. You can then import it like this:  </Steps> --- title: Vite description: How to setup shadcn-svelte in a Vite project. --- <script> import { Alert, AlertDescription } from "$lib/registry/new-york/ui/alert"; import { Steps, PMAddComp, PMInstall, PMExecute } from "$lib/components/docs"; </script> ## Setup your project <Steps> ### Add TailwindCSS Use the Svelte CLI to add Tailwind CSS to your project. <PMExecute command="sv@0.6.18 add tailwindcss" /> ### Setup path aliases Update your path aliases in your `tsconfig.json` and `vite.config.ts`.   ### Run the CLI <PMExecute command="shadcn-svelte@latest init" /> ### Configure components.json You will be asked a few questions to configure `components.json`:  ### That's it You can now start adding components to your project. <PMAddComp name="button" /> The command above will add the `Button` component to your project. You can then import it like this:  </Steps> --- title: Theming description: Use CSS Variables to customize the look and feel of your application. --- <script> import { Callout, HexToChannels } from '$lib/components/docs'; </script> We use CSS variables for styling. This allows you to easily change the colors of components without having to update class names. **CSS variables must be defined without the color space function**. See the  for more information. ## Hex -> Color Channel You can use this tool to convert your HEX color to HSL without the color space function. Simply add your color in hex format, copy one of the generated values, then add them to the CSS variable. <HexToChannels /> ## 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. <Callout> The `background` suffix can be omitted if the variable is used for the background color of the component. </Callout> Given the following CSS variables:  The `background` color of the following component will be `hsl / <alpha-value>)` and the `foreground` color will be `hsl / <alpha-value>)`.  ## CSS Variables Here's the list of variables available for customization:             ## Default The following is the default color palette used by the components. --- title: Typography description: Styles for headings, paragraphs, lists...etc component: true --- <script> import { ComponentPreview } from "$lib/components/docs" </script> <ComponentPreview name="typography-demo"> <div/> </ComponentPreview> ## h1 <ComponentPreview name="typography-h1"> <div/> </ComponentPreview> ## h2 <ComponentPreview name="typography-h2"> <div/> </ComponentPreview> ## h3 <ComponentPreview name="typography-h3"> <div/> </ComponentPreview> ## h4 <ComponentPreview name="typography-h4"> <div/> </ComponentPreview> ## p <ComponentPreview name="typography-p"> <div/> </ComponentPreview> ## blockquote <ComponentPreview name="typography-blockquote"> <div/> </ComponentPreview> ## table <ComponentPreview name="typography-table"> <div/> </ComponentPreview> ## list <ComponentPreview name="typography-list"> <div/> </ComponentPreview> ## Inline code <ComponentPreview name="typography-inline-code"> <div/> </ComponentPreview> ## Lead <ComponentPreview name="typography-lead"> <div/> </ComponentPreview> ## Large <ComponentPreview name="typography-large"> <div/> </ComponentPreview> ## Small <ComponentPreview name="typography-small"> <div/> </ComponentPreview> ## Muted <ComponentPreview name="typography-muted"> <div/> </ComponentPreview>