# shadcn-svelte

> shadcn-svelte is a collection of beautifully-designed, accessible components for Svelte and SvelteKit. It is built with TypeScript, Tailwind CSS, and Bits UI primitives. Open Source. Open Code. AI-Ready. It also comes with a command-line tool to install and manage components and a registry system to publish and distribute code.

## Overview

- [About](https://shadcn-svelte.com/docs/about.md): Powered by amazing open source projects.
- [Changelog](https://shadcn-svelte.com/docs/changelog.md): Latest updates and announcements.
- [shadcn-svelte](https://shadcn-svelte.com/docs/cli.md): Use the shadcn-svelte CLI to add components to your project.
- [components.json](https://shadcn-svelte.com/docs/components-json.md): Configuration for your project.
- [JavaScript](https://shadcn-svelte.com/docs/javascript.md): How to use shadcn-svelte with JavaScript.
- [Legacy Docs](https://shadcn-svelte.com/docs/legacy.md): View the legacy docs for shadcn-svelte and Tailwind v3.
- [Theming](https://shadcn-svelte.com/docs/theming.md): Use CSS Variables to customize the look and feel of your application.

## Installation

- [Astro](https://shadcn-svelte.com/docs/installation/astro.md): How to setup shadcn-svelte in an Astro project.
- [Manual Installation](https://shadcn-svelte.com/docs/installation/manual.md): How to setup shadcn-svelte manually.
- [SvelteKit](https://shadcn-svelte.com/docs/installation/sveltekit.md): How to setup shadcn-svelte in a SvelteKit project.
- [Vite](https://shadcn-svelte.com/docs/installation/vite.md): How to setup shadcn-svelte in a Vite project.

## Components

### Form & Input

- [Button](https://shadcn-svelte.com/docs/components/button.md): Displays a button or a component that looks like a button.
- [Button Group](https://shadcn-svelte.com/docs/components/button-group.md): A container that groups related buttons together with consistent styling.
- [Calendar](https://shadcn-svelte.com/docs/components/calendar.md): A calendar component that allows users to select a date or a range of dates.
- [Checkbox](https://shadcn-svelte.com/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Combobox](https://shadcn-svelte.com/docs/components/combobox.md): Autocomplete input with a list of suggestions.
- [Date Picker](https://shadcn-svelte.com/docs/components/date-picker.md): A date picker component with range and presets.
- [Field](https://shadcn-svelte.com/docs/components/field.md): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [Input](https://shadcn-svelte.com/docs/components/input.md): A text input component for forms and user data entry with built-in styling and accessibility features.
- [Input Group](https://shadcn-svelte.com/docs/components/input-group.md): Add addons, buttons, and helper content to inputs.
- [Input OTP](https://shadcn-svelte.com/docs/components/input-otp.md): Accessible one-time password component with copy-paste functionality.
- [Label](https://shadcn-svelte.com/docs/components/label.md): Renders an accessible label associated with controls.
- [Native Select](https://shadcn-svelte.com/docs/components/native-select.md): A styled native HTML select element with consistent design system integration.
- [Radio Group](https://shadcn-svelte.com/docs/components/radio-group.md): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [Select](https://shadcn-svelte.com/docs/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Slider](https://shadcn-svelte.com/docs/components/slider.md): An input where the user selects a value from within a given range.
- [Switch](https://shadcn-svelte.com/docs/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Textarea](https://shadcn-svelte.com/docs/components/textarea.md): Displays a form textarea or a component that looks like a textarea.

### Layout & Navigation

- [Accordion](https://shadcn-svelte.com/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Breadcrumb](https://shadcn-svelte.com/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Navigation Menu](https://shadcn-svelte.com/docs/components/navigation-menu.md): A collection of links for navigating websites.
- [Resizable](https://shadcn-svelte.com/docs/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://shadcn-svelte.com/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Separator](https://shadcn-svelte.com/docs/components/separator.md): Visually or semantically separates content.
- [Sidebar](https://shadcn-svelte.com/docs/components/sidebar.md): A composable, themeable and customizable sidebar component.
- [Tabs](https://shadcn-svelte.com/docs/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.

### Overlays & Dialogs

- [Alert Dialog](https://shadcn-svelte.com/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Command](https://shadcn-svelte.com/docs/components/command.md): Command menu for search and quick actions.
- [Context Menu](https://shadcn-svelte.com/docs/components/context-menu.md): Displays a menu of actions triggered by a right click.
- [Dialog](https://shadcn-svelte.com/docs/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Drawer](https://shadcn-svelte.com/docs/components/drawer.md): A drawer component for Svelte.
- [Dropdown Menu](https://shadcn-svelte.com/docs/components/dropdown-menu.md): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- [Hover Card](https://shadcn-svelte.com/docs/components/hover-card.md): For sighted users to preview content available behind a link.
- [Menubar](https://shadcn-svelte.com/docs/components/menubar.md): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Popover](https://shadcn-svelte.com/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Sheet](https://shadcn-svelte.com/docs/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Tooltip](https://shadcn-svelte.com/docs/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

### Feedback & Status

- [Alert](https://shadcn-svelte.com/docs/components/alert.md): Displays a callout for user attention.
- [Badge](https://shadcn-svelte.com/docs/components/badge.md): Displays a badge or a component that looks like a badge.
- [Empty](https://shadcn-svelte.com/docs/components/empty.md): Use the Empty component to display an empty state.
- [Progress](https://shadcn-svelte.com/docs/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Skeleton](https://shadcn-svelte.com/docs/components/skeleton.md): Use to show a placeholder while content is loading.
- [Sonner](https://shadcn-svelte.com/docs/components/sonner.md): An opinionated toast component for Svelte.
- [Spinner](https://shadcn-svelte.com/docs/components/spinner.md): An indicator that can be used to show a loading state.

### Display & Media

- [Aspect Ratio](https://shadcn-svelte.com/docs/components/aspect-ratio.md): Displays content within a desired ratio.
- [Attachment](https://shadcn-svelte.com/docs/components/attachment.md): Displays a file or image attachment with media, metadata, upload state, and actions.
- [Avatar](https://shadcn-svelte.com/docs/components/avatar.md): An image element with a fallback for representing the user.
- [Bubble](https://shadcn-svelte.com/docs/components/bubble.md): Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
- [Card](https://shadcn-svelte.com/docs/components/card.md): Displays a card with header, content, and footer.
- [Carousel](https://shadcn-svelte.com/docs/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Chart](https://shadcn-svelte.com/docs/components/chart.md): Beautiful charts. Built using LayerChart. Copy and paste into your apps.
- [Data Table](https://shadcn-svelte.com/docs/components/data-table.md): Powerful table and datagrids built using TanStack Table.
- [Item](https://shadcn-svelte.com/docs/components/item.md): A versatile component for displaying content with media, title, description, and actions.
- [Kbd](https://shadcn-svelte.com/docs/components/kbd.md): Used to display textual user input from keyboard.
- [Marker](https://shadcn-svelte.com/docs/components/marker.md): Displays an inline status, system note, bordered row, or labeled separator in a conversation.
- [Message](https://shadcn-svelte.com/docs/components/message.md): Displays a message in a conversation, with optional avatar, header, footer, and alignment.
- [Table](https://shadcn-svelte.com/docs/components/table.md): A responsive table component.
- [Typography](https://shadcn-svelte.com/docs/components/typography.md): Styles for headings, paragraphs, lists, etc.

### Misc

- [Code Block](https://shadcn-svelte.com/docs/components/code-block.md): Displays code, terminal output and diffs with an optional header, line numbers and a copy button.
- [Collapsible](https://shadcn-svelte.com/docs/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Message Scroller](https://shadcn-svelte.com/docs/components/message-scroller.md): A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.
- [Pagination](https://shadcn-svelte.com/docs/components/pagination.md): Pagination with page navigation, next and previous links.
- [Questionnaire](https://shadcn-svelte.com/docs/components/questionnaire.md): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
- [Range Calendar](https://shadcn-svelte.com/docs/components/range-calendar.md): A calendar component that allows users to select a range of dates.
- [Toggle](https://shadcn-svelte.com/docs/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://shadcn-svelte.com/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Trace](https://shadcn-svelte.com/docs/components/trace.md): The building block for reasoning, tool calls, sources and more.

## Dark Mode

- [Astro](https://shadcn-svelte.com/docs/dark-mode/astro.md): Adding dark mode to your Astro site.
- [Svelte](https://shadcn-svelte.com/docs/dark-mode/svelte.md): Adding dark mode to your Svelte site.

## Migration

- [Svelte 5](https://shadcn-svelte.com/docs/migration/svelte-5.md): How to migrate from Svelte 4 and Tailwind 3 to Svelte 5.
- [Tailwind v4](https://shadcn-svelte.com/docs/migration/tailwind-v4.md): How to use shadcn-svelte with Tailwind v4 and Svelte 5.

## Registry

- [Examples](https://shadcn-svelte.com/docs/registry/examples.md): Examples of registry items: styles, components, css vars, etc.
- [FAQ](https://shadcn-svelte.com/docs/registry/faq.md): Frequently asked questions about running a registry.
- [Getting Started](https://shadcn-svelte.com/docs/registry/getting-started.md): Learn how to get setup and run your own component registry.
- [registry-item.json](https://shadcn-svelte.com/docs/registry/registry-item-json.md): Specification for registry items.
- [registry.json](https://shadcn-svelte.com/docs/registry/registry-json.md): Schema for running your own component registry.

## AI Elements

- [Chain of Thought](https://shadcn-svelte.com/docs/ai-elements/chain-of-thought.md): Displays a summary that expands into the steps an agent took.
- [Chat](https://shadcn-svelte.com/docs/ai-elements/chat.md): The thread. Message Scroller keeps your place while the reply streams.
- [Checkpoint](https://shadcn-svelte.com/docs/ai-elements/checkpoint.md): Marks a point in the conversation you can return to.
- [Confirmation](https://shadcn-svelte.com/docs/ai-elements/confirmation.md): Asks for approval before a tool runs.
- [Context](https://shadcn-svelte.com/docs/ai-elements/context.md): How much of the context window the conversation has used.
- [File Tree](https://shadcn-svelte.com/docs/ai-elements/file-tree.md): The files the agent changed, as a folder tree.
- [Inline Citation](https://shadcn-svelte.com/docs/ai-elements/inline-citation.md): A source in the sentence that opens on hover.
- [Message](https://shadcn-svelte.com/docs/ai-elements/message.md): One turn. The person's message, and the agent's reply with its actions.
- [Model Selector](https://shadcn-svelte.com/docs/ai-elements/model-selector.md): Two menus. One picks the model the agent runs, the other picks how hard it thinks.
- [Plan](https://shadcn-svelte.com/docs/ai-elements/plan.md): Displays the steps the agent plans to take, and how far it has got.
- [Prompt Input](https://shadcn-svelte.com/docs/ai-elements/prompt-input.md): A message field with attachments and a send button.
- [Queue](https://shadcn-svelte.com/docs/ai-elements/queue.md): Displays the agent's todo list, split into what is left and what is done.
- [Reasoning](https://shadcn-svelte.com/docs/ai-elements/reasoning.md): Displays the agent's thinking as it streams.
- [Sources](https://shadcn-svelte.com/docs/ai-elements/sources.md): Displays the links the agent used for a reply.
- [Stack Trace](https://shadcn-svelte.com/docs/ai-elements/stack-trace.md): Displays a failed tool call and its stack frames.
- [Subagent](https://shadcn-svelte.com/docs/ai-elements/subagent.md): Displays a subagent run, with its tool calls and result.
- [Suggestion](https://shadcn-svelte.com/docs/ai-elements/suggestion.md): A short prompt you can send to the agent in one click.
- [Task](https://shadcn-svelte.com/docs/ai-elements/task.md): Displays the steps the agent takes, as it takes them.
- [Terminal](https://shadcn-svelte.com/docs/ai-elements/terminal.md): Displays a command the agent runs, with its output as it streams.
- [Test Results](https://shadcn-svelte.com/docs/ai-elements/test-results.md): Displays a test run by the agent, with its suites and failures.
- [Tool](https://shadcn-svelte.com/docs/ai-elements/tool.md): Displays a tool call the agent makes, from input to output.

## Utilities

- [scroll-fade](https://shadcn-svelte.com/docs/utils/scroll-fade.md): Utilities for adding a fade effect to the edges of a scroll container.
- [shimmer](https://shadcn-svelte.com/docs/utils/shimmer.md): Utilities for adding a shimmer effect to text elements.