# Sveltery UI

> Accessible Svelte components built on Sveltery Base and styled like shadcn/ui. Copy them into your app and make them your own.

## Components

- [Components](https://ui.sveltery.dev/docs/components): Every component available today. Each page shows a live preview, the source to copy, and how to use it.
- [Accordion](https://ui.sveltery.dev/docs/components/accordion): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://ui.sveltery.dev/docs/components/alert): Displays a callout for user attention.
- [Alert Dialog](https://ui.sveltery.dev/docs/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://ui.sveltery.dev/docs/components/aspect-ratio): Displays content within a desired ratio.
- [Attachment](https://ui.sveltery.dev/docs/components/attachment): Displays a file or image attachment with media, metadata, upload state, and actions.
- [Avatar](https://ui.sveltery.dev/docs/components/avatar): An image element with a fallback for representing the user.
- [Badge](https://ui.sveltery.dev/docs/components/badge): Displays a badge or a component that looks like a badge.
- [Breadcrumb](https://ui.sveltery.dev/docs/components/breadcrumb): Displays the path to the current resource using a hierarchy of links.
- [Bubble](https://ui.sveltery.dev/docs/components/bubble): Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
- [Button](https://ui.sveltery.dev/docs/components/button): Displays a button or a component that looks like a button.
- [Button Group](https://ui.sveltery.dev/docs/components/button-group): A container that groups related buttons together with consistent styling.
- [Calendar](https://ui.sveltery.dev/docs/components/calendar): A calendar component that allows users to select a date or a range of dates.
- [Card](https://ui.sveltery.dev/docs/components/card): Displays a card with header, content, and footer.
- [Carousel](https://ui.sveltery.dev/docs/components/carousel): A carousel with motion and swipe built using Embla.
- [Chart](https://ui.sveltery.dev/docs/components/chart): Beautiful charts. Built using Recharts. Copy and paste into your apps.
- [Checkbox](https://ui.sveltery.dev/docs/components/checkbox): A control that allows the user to toggle between checked and not checked.
- [Code Block](https://ui.sveltery.dev/docs/components/code-block): Displays code, terminal output and diffs with an optional header, line numbers and a copy button.
- [Collapsible](https://ui.sveltery.dev/docs/components/collapsible): An interactive component which expands/collapses a panel.
- [Combobox](https://ui.sveltery.dev/docs/components/combobox): Autocomplete input with a list of suggestions.
- [Command](https://ui.sveltery.dev/docs/components/command): Command menu for search and quick actions.
- [Context Menu](https://ui.sveltery.dev/docs/components/context-menu): Displays a menu of actions triggered by a right click.
- [Data Table](https://ui.sveltery.dev/docs/components/data-table): Powerful table and datagrids built using TanStack Table.
- [Date Picker](https://ui.sveltery.dev/docs/components/date-picker): A date picker component with range and presets.
- [Dialog](https://ui.sveltery.dev/docs/components/dialog): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Direction](https://ui.sveltery.dev/docs/components/direction): A provider component that sets the text direction for your application.
- [Drawer](https://ui.sveltery.dev/docs/components/drawer): A panel that slides in from an edge of the screen and can be swiped away.
- [Dropdown Menu](https://ui.sveltery.dev/docs/components/dropdown-menu): Displays a menu to the user, such as a set of actions or functions, triggered by a button.
- [Empty](https://ui.sveltery.dev/docs/components/empty): Use the Empty component to display an empty state.
- [Field](https://ui.sveltery.dev/docs/components/field): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [Form](https://ui.sveltery.dev/docs/components/form): A native form that validates its fields and shows their errors.
- [Hover Card](https://ui.sveltery.dev/docs/components/hover-card): For sighted users to preview content available behind a link.
- [Input](https://ui.sveltery.dev/docs/components/input): A text input component for forms and user data entry with built-in styling and accessibility features.
- [Input Group](https://ui.sveltery.dev/docs/components/input-group): Add addons, buttons, and helper content to inputs and textareas.
- [Input OTP](https://ui.sveltery.dev/docs/components/input-otp): Accessible one-time password component with copy-paste functionality.
- [Item](https://ui.sveltery.dev/docs/components/item): A versatile component for displaying content with media, title, description, and actions.
- [Kbd](https://ui.sveltery.dev/docs/components/kbd): Used to display textual user input from keyboard.
- [Label](https://ui.sveltery.dev/docs/components/label): Renders an accessible label associated with controls.
- [Marker](https://ui.sveltery.dev/docs/components/marker): Displays an inline status, system note, bordered row, or labeled separator in a conversation.
- [Menubar](https://ui.sveltery.dev/docs/components/menubar): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Message](https://ui.sveltery.dev/docs/components/message): Displays a message in a conversation, with optional avatar, header, footer, and alignment.
- [Message Scroller](https://ui.sveltery.dev/docs/components/message-scroller): A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.
- [Native Checkbox](https://ui.sveltery.dev/docs/components/native-checkbox): A styled native HTML checkbox that looks like the Checkbox and works without JavaScript.
- [Native Radio Group](https://ui.sveltery.dev/docs/components/native-radio-group): Styled native HTML radio buttons that look like the Radio Group and work without JavaScript.
- [Native Select](https://ui.sveltery.dev/docs/components/native-select): A styled native HTML select element with consistent design system integration.
- [Native Slider](https://ui.sveltery.dev/docs/components/native-slider): A styled native HTML range input that looks like the Slider and works without JavaScript.
- [Native Switch](https://ui.sveltery.dev/docs/components/native-switch): A styled native HTML checkbox that looks like the Switch and works without JavaScript.
- [Navigation Menu](https://ui.sveltery.dev/docs/components/navigation-menu): A collection of links for navigating websites.
- [Pagination](https://ui.sveltery.dev/docs/components/pagination): Pagination with page navigation, next and previous links.
- [Popover](https://ui.sveltery.dev/docs/components/popover): Displays rich content in a portal, triggered by a button.
- [Progress](https://ui.sveltery.dev/docs/components/progress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Questionnaire](https://ui.sveltery.dev/docs/components/questionnaire): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
- [Radio Group](https://ui.sveltery.dev/docs/components/radio-group): A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
- [Resizable](https://ui.sveltery.dev/docs/components/resizable): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://ui.sveltery.dev/docs/components/scroll-area): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://ui.sveltery.dev/docs/components/select): Displays a list of options for the user to pick from, triggered by a button.
- [Separator](https://ui.sveltery.dev/docs/components/separator): Visually or semantically separates content.
- [Sheet](https://ui.sveltery.dev/docs/components/sheet): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://ui.sveltery.dev/docs/components/sidebar): A composable, themeable and customizable sidebar component.
- [Skeleton](https://ui.sveltery.dev/docs/components/skeleton): Use to show a placeholder while content is loading.
- [Slider](https://ui.sveltery.dev/docs/components/slider): An input where the user selects a value from within a given range.
- [Spinner](https://ui.sveltery.dev/docs/components/spinner): An indicator that can be used to show a loading state.
- [Switch](https://ui.sveltery.dev/docs/components/switch): A control that allows the user to toggle between checked and not checked.
- [Table](https://ui.sveltery.dev/docs/components/table): A responsive table component.
- [Tabs](https://ui.sveltery.dev/docs/components/tabs): A set of layered sections of content, known as tab panels, that are displayed one at a time.
- [Textarea](https://ui.sveltery.dev/docs/components/textarea): Displays a form textarea or a component that looks like a textarea.
- [Toast](https://ui.sveltery.dev/docs/components/toast): A toast built from the Base toast parts, with a toast manager you can call from anywhere.
- [Toggle](https://ui.sveltery.dev/docs/components/toggle): A two-state button that can be either on or off.
- [Toggle Group](https://ui.sveltery.dev/docs/components/toggle-group): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://ui.sveltery.dev/docs/components/tooltip): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Trace](https://ui.sveltery.dev/docs/components/trace): The building block for reasoning, tool calls, sources and more.

## Get Started

- [Introduction](https://ui.sveltery.dev/docs): Sveltery UI is a Svelte port of shadcn/ui. You copy accessible, styled components into your app and own the code.
- [Installation](https://ui.sveltery.dev/docs/installation): Add Sveltery UI to a SvelteKit app.
- [components.json](https://ui.sveltery.dev/docs/components-json): Configuration for your project.
- [Theming](https://ui.sveltery.dev/docs/theming): Change the look of every component with CSS variables.
- [Typeset](https://ui.sveltery.dev/docs/typeset): A styling system for HTML and rendered markdown, from blog posts to streaming chat. One CSS file you own.
- [Dark Mode](https://ui.sveltery.dev/docs/dark-mode): Add a dark mode toggle to a SvelteKit app.
- [RTL](https://ui.sveltery.dev/docs/rtl): Right-to-left support for Sveltery UI components.
- [CLI](https://ui.sveltery.dev/docs/cli): Use the Sveltery UI CLI to add components to your project.
- [Monorepo](https://ui.sveltery.dev/docs/monorepo): Use Sveltery UI components and the CLI in a monorepo.
- [Skills](https://ui.sveltery.dev/docs/skills): Give your AI assistant project-aware knowledge of Sveltery UI components, patterns and the CLI.
- [JavaScript](https://ui.sveltery.dev/docs/javascript): How to use Sveltery UI with JavaScript.
- [Differences from shadcn/ui](https://ui.sveltery.dev/docs/differences): Where Sveltery UI deliberately differs from shadcn/ui's Base UI variant and from Base UI.
- [Changelog](https://ui.sveltery.dev/docs/changelog): Releases of the Sveltery UI CLI and its packages.

## Forms

- [Forms](https://ui.sveltery.dev/docs/forms): Build forms with Field, native validation, SvelteKit remote forms and form actions.
- [Remote forms](https://ui.sveltery.dev/docs/forms/remote-forms): Use Field with a SvelteKit remote form.
- [Form actions](https://ui.sveltery.dev/docs/forms/form-actions): Use Field with a SvelteKit form action.

## Registry

- [Registry](https://ui.sveltery.dev/docs/registry): Distribute your own components through the Sveltery UI CLI.
- [Getting Started](https://ui.sveltery.dev/docs/registry/getting-started): Write, serve and test your own registry items.
- [Examples](https://ui.sveltery.dev/docs/registry/examples): Examples of registry items, by type.
- [registry.json](https://ui.sveltery.dev/docs/registry/registry-json): Specification for a registry that build reads, and for a root registry.
- [registry-item.json](https://ui.sveltery.dev/docs/registry/registry-item-json): Specification for registry items.
- [Namespaces](https://ui.sveltery.dev/docs/registry/namespace): Install items from several registries with names such as @acme/hello-card.
- [Authentication](https://ui.sveltery.dev/docs/registry/authentication): Serve private registry items and send credentials from the CLI.