# huntabyte/shadcn-svelte

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/huntabyte-shadcn-svelte).**

8,341 stars · 511 forks · TypeScript · mit

## Links

- GitHub: https://github.com/huntabyte/shadcn-svelte
- Homepage: https://shadcn-svelte.com
- awesome-repositories: https://awesome-repositories.com/repository/huntabyte-shadcn-svelte.md

## Topics

`bits-ui` `shadcn-svelte` `shadcn-ui` `svelte` `svelte-5` `svelte-components` `svelte-kit` `sveltejs` `sveltekit` `tailwindcss`

## Description

shadcn-svelte is a collection of accessible and customizable user interface elements for Svelte applications. Rather than being distributed as a traditional dependency, these components are provided as source code that is copied directly into the project codebase.

The library utilizes a registry-based distribution system, allowing users to install specific UI blocks and components via a command-line interface. This system uses JSON metadata to define dependencies and file paths, while a bootstrapping process automates the configuration of styles and CSS variables.

The project integrates Tailwind CSS for styling and employs a headless UI implementation, wrapping functional primitives with customizable layout patterns. Its capability surface includes comprehensive form development, data visualization interfaces, and a theme management tool for synchronizing light and dark mode preferences.

## Tags

### User Interface & Experience

- [Svelte UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ecosystem-specific-libraries/svelte-ui-libraries.md) — Provides a comprehensive collection of accessible UI components specifically designed for the Svelte ecosystem.
- [Accessible Form Controls](https://awesome-repositories.com/f/user-interface-experience/accessible-form-controls.md) — Provides UI components designed to meet accessibility standards for complex form input interactions. ([source](https://shadcn-svelte.com/docs/components/field.md))
- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Provides a collection of interactive UI components built with accessibility standards like ARIA and keyboard support. ([source](https://shadcn-svelte.com/docs))
- [Color Themes](https://awesome-repositories.com/f/user-interface-experience/color-themes.md) — Provides a system for managing visual color schemes and automatic light/dark mode switching. ([source](https://shadcn-svelte.com/docs/dark-mode/svelte.md))
- [Headless Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives/headless-primitives.md) — Wraps headless functional primitives with custom styling to create accessible and customizable UI elements.
- [Tailwind Component Collections](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-component-collections.md) — Provides a collection of pre-styled UI elements built specifically for use with Tailwind CSS.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Implements a theming system using CSS variables to standardize colors and spacing across light and dark modes.
- [Custom Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/custom-theme-definitions.md) — Enables the definition of custom color palettes and CSS variables for light and dark mode visual standardization. ([source](https://shadcn-svelte.com/docs/registry/examples.md))
- [Customizable UI Components](https://awesome-repositories.com/f/user-interface-experience/customizable-ui-components.md) — Provides UI elements designed for high levels of visual and functional customization via source code. ([source](https://www.shadcn-svelte.com/))
- [Design System Management](https://awesome-repositories.com/f/user-interface-experience/design-system-management.md) — Provides tools for centralizing visual styles and reusable components to maintain design consistency.
- [Label and Control Association](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/standard-input-controls/label-and-control-association.md) — Links text labels to input controls to improve accessibility and increase interactive hit areas. ([source](https://shadcn-svelte.com/docs/components/label.md))
- [Plain Text Input Fields](https://awesome-repositories.com/f/user-interface-experience/plain-text-input-fields.md) — Provides customizable plain text input fields for entering single-line data or search queries. ([source](https://shadcn-svelte.com/docs/components/input.md))
- [Application Themes](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/application-themes.md) — Implements settings and utilities for managing light, dark, and custom visual modes in applications.
- [Textarea Components](https://awesome-repositories.com/f/user-interface-experience/textarea-components.md) — Includes textarea components for capturing larger blocks of multi-line user text. ([source](https://shadcn-svelte.com/docs/components/textarea.md))
- [Theme Management Systems](https://awesome-repositories.com/f/user-interface-experience/theme-management-systems.md) — Synchronizes user color preferences with local storage and system settings to maintain consistent light or dark modes. ([source](https://shadcn-svelte.com/docs/dark-mode/astro.md))
- [Component Registries](https://awesome-repositories.com/f/user-interface-experience/ui-components/component-registries.md) — Implements a system for defining and hosting a registry of reusable UI components and blocks.
- [Accordions](https://awesome-repositories.com/f/user-interface-experience/accordions.md) — Ships accordion components that expand and collapse content sections. ([source](https://shadcn-svelte.com/docs/components/accordion.md))
- [Badge Components](https://awesome-repositories.com/f/user-interface-experience/badge-components.md) — Provides badge components for highlighting status, categories, or metadata. ([source](https://shadcn-svelte.com/docs/components/badge.md))
- [Bottom Sheets](https://awesome-repositories.com/f/user-interface-experience/bottom-sheets.md) — Implements bottom sheets as slide-up panels for presenting supplementary content. ([source](https://shadcn-svelte.com/docs/components/drawer.md))
- [Buttons](https://awesome-repositories.com/f/user-interface-experience/buttons.md) — Provides customizable button controls for user interactions. ([source](https://shadcn-svelte.com/docs/components/button.md))
- [Collapsible Panels](https://awesome-repositories.com/f/user-interface-experience/collapsible-panels.md) — Provides collapsible panels to manage screen space by toggling content visibility. ([source](https://shadcn-svelte.com/docs/components/collapsible.md))
- [Command Palettes](https://awesome-repositories.com/f/user-interface-experience/command-palettes.md) — Creates a searchable interface for executing actions or navigating to different sections of an application. ([source](https://shadcn-svelte.com/docs/components/command.md))
- [Primitive Element Styling](https://awesome-repositories.com/f/user-interface-experience/common-ui-element-styling/primitive-element-styling.md) — Allows targeting internal elements for custom styling using dedicated data attributes on primitives. ([source](https://shadcn-svelte.com/docs/migration/tailwind-v4.md))
- [Content Carousels](https://awesome-repositories.com/f/user-interface-experience/content-display-components/content-carousels.md) — Implements content carousels for cycling through a series of content elements. ([source](https://shadcn-svelte.com/docs/components/carousel.md))
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/content-display-components/tooltips.md) — Implements tooltips that display supplementary advisory text on hover or focus. ([source](https://shadcn-svelte.com/docs/components/tooltip.md))
- [Content Item Components](https://awesome-repositories.com/f/user-interface-experience/content-item-components.md) — Creates a flexible container to display a title, description, and actions grouped into lists or rendered as links. ([source](https://shadcn-svelte.com/docs/components/item.md))
- [Context Menus](https://awesome-repositories.com/f/user-interface-experience/context-menus.md) — Implements context menus that display a list of actions upon right-clicking a specific element. ([source](https://shadcn-svelte.com/docs/components/context-menu.md))
- [Content Cards](https://awesome-repositories.com/f/user-interface-experience/data-display-components/content-cards.md) — Provides flexible card containers that organize related content into header, description, body, and footer sections. ([source](https://shadcn-svelte.com/docs/components/card.md))
- [Data Tables](https://awesome-repositories.com/f/user-interface-experience/data-tables.md) — Implements components for rendering, sorting, and filtering structured data in tabular formats. ([source](https://shadcn-svelte.com/docs/components/data-table.md))
- [Data Filters](https://awesome-repositories.com/f/user-interface-experience/data-tables/data-filters.md) — Provides mechanisms for constraining tabular data sets using various user input types. ([source](https://shadcn-svelte.com/docs/components/data-table.md))
- [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/dropdown-menus.md) — Provides interactive dropdown menus that reveal content on user trigger. ([source](https://shadcn-svelte.com/docs/components/dropdown-menu.md))
- [Row Selection Interfaces](https://awesome-repositories.com/f/user-interface-experience/floating-action-buttons/row-action-triggers/clickable-rows/row-selection-interfaces.md) — Provides interactive controls for managing row selection states within data grids. ([source](https://shadcn-svelte.com/docs/components/data-table.md))
- [Input Groups](https://awesome-repositories.com/f/user-interface-experience/form-components/input-groups.md) — Bundles input fields with adjacent text, buttons, or icons for unified form layouts. ([source](https://shadcn-svelte.com/docs/components/input-group.md))
- [Checkbox Inputs](https://awesome-repositories.com/f/user-interface-experience/form-input-components/checkbox-inputs.md) — Provides checkbox inputs for boolean value toggles and multiple-item selection. ([source](https://shadcn-svelte.com/docs/components/checkbox.md))
- [Toggle Switches](https://awesome-repositories.com/f/user-interface-experience/form-input-components/toggle-switches.md) — Provides toggle switches for capturing binary true or false states. ([source](https://shadcn-svelte.com/docs/components/switch.md))
- [Data Visualizations](https://awesome-repositories.com/f/user-interface-experience/high-volume-data-rendering/data-visualizations.md) — Ships components for rendering interactive charts and progress indicators to visualize complex information.
- [Form Field Layouts](https://awesome-repositories.com/f/user-interface-experience/input-labels/field-label-configurators/form-field-layouts.md) — Provides configurable form field layouts for aligning labels and input controls. ([source](https://shadcn-svelte.com/docs/components/field.md))
- [Breadcrumb Navigations](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumb-navigations.md) — Provides a breadcrumb navigation component with support for collapsed states and dropdowns. ([source](https://shadcn-svelte.com/docs/components/breadcrumb.md))
- [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Ships modal dialog components that overlay the primary interface to focus user attention. ([source](https://shadcn-svelte.com/docs/components/dialog.md))
- [Alert Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs.md) — Provides alert dialogs that interrupt workflow to require a mandatory user response. ([source](https://shadcn-svelte.com/docs/components/alert-dialog.md))
- [Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/select-inputs.md) — Implements styled select inputs that maintain native browser behavior and accessibility. ([source](https://shadcn-svelte.com/docs/components/native-select.md))
- [Pagination Controls](https://awesome-repositories.com/f/user-interface-experience/navigation-components/pagination-controls.md) — Includes controls for navigating large datasets by splitting content into discrete, sequential pages. ([source](https://shadcn-svelte.com/docs/components/data-table.md))
- [Navigation Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-menus.md) — Provides structured navigation menus with links and dropdowns for website navigation. ([source](https://shadcn-svelte.com/docs/components/navigation-menu.md))
- [Nested Menus](https://awesome-repositories.com/f/user-interface-experience/nested-menus.md) — Implements hierarchical menu structures with support for nested sub-menus. ([source](https://shadcn-svelte.com/docs/components/sidebar.md))
- [Notification Toasts](https://awesome-repositories.com/f/user-interface-experience/notification-toasts.md) — Implements transient UI elements for displaying system messages with severity-based styling. ([source](https://shadcn-svelte.com/docs/components/sonner.md))
- [Pagination Components](https://awesome-repositories.com/f/user-interface-experience/pagination-components.md) — Ships pagination components for navigating through multi-page data sets. ([source](https://shadcn-svelte.com/docs/components/pagination.md))
- [Popovers](https://awesome-repositories.com/f/user-interface-experience/popovers.md) — Provides popover components to display rich contextual content triggered by buttons. ([source](https://shadcn-svelte.com/docs/components/popover.md))
- [Radio Groups](https://awesome-repositories.com/f/user-interface-experience/radio-groups.md) — Includes radio group components for managing single-choice selection from a set of options. ([source](https://shadcn-svelte.com/docs/components/radio-group.md))
- [Range Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders.md) — Provides range slider inputs for selecting single or multiple values within a defined range. ([source](https://shadcn-svelte.com/docs/components/slider.md))
- [Resizable Panes](https://awesome-repositories.com/f/user-interface-experience/resizable-panes.md) — Provides resizable panes for creating split-pane layouts with adjustable boundaries. ([source](https://shadcn-svelte.com/docs/components/resizable.md))
- [Scroll Areas](https://awesome-repositories.com/f/user-interface-experience/scroll-areas.md) — Provides custom scroll areas with cross-browser styling to replace native scrollbars. ([source](https://shadcn-svelte.com/docs/components/scroll-area.md))
- [Slide-Out Panels](https://awesome-repositories.com/f/user-interface-experience/slide-out-panels.md) — Ships slide-out panel components that provide context without navigating away from the page. ([source](https://shadcn-svelte.com/docs/components/sheet.md))
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Provides mechanisms to define custom CSS layers, utilities, and animations to modify the visual behavior of components. ([source](https://shadcn-svelte.com/docs/registry/examples.md))
- [Tabbed Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces.md) — Organizes content into tabbed views to reduce visual clutter in the interface. ([source](https://shadcn-svelte.com/docs/components/tabs.md))
- [Autocomplete Inputs](https://awesome-repositories.com/f/user-interface-experience/text-input-widgets/autocomplete-inputs.md) — Provides autocomplete inputs that suggest and filter options as users type. ([source](https://shadcn-svelte.com/docs/components/combobox.md))
- [Theme Synchronization Tools](https://awesome-repositories.com/f/user-interface-experience/theme-synchronization-tools.md) — Provides utilities that synchronize application visual themes with system-wide appearance settings.
- [Toggle Buttons](https://awesome-repositories.com/f/user-interface-experience/toggle-buttons.md) — Provides toggle buttons that switch between active and inactive states. ([source](https://shadcn-svelte.com/docs/components/toggle.md))
- [Toggle Groups](https://awesome-repositories.com/f/user-interface-experience/toggle-groups.md) — Implements toggle groups for managing collections of binary selection switches. ([source](https://shadcn-svelte.com/docs/components/toggle-group.md))
- [Design Consistency](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/design-system-documentation-strategy/design-consistency.md) — Supplies pre-styled components with a unified interface to facilitate a consistent visual language across products. ([source](https://shadcn-svelte.com/docs))
- [Source Component Versioning](https://awesome-repositories.com/f/user-interface-experience/ui-component-management/source-component-versioning.md) — Provides a CLI to overwrite existing local component files with the latest versions from the registry. ([source](https://shadcn-svelte.com/docs/migration/tailwind-v4.md))
- [UI Block Distribution](https://awesome-repositories.com/f/user-interface-experience/ui-components/ui-block-distribution.md) — Packages complex UI patterns as registry items that install multiple dependent components and page files. ([source](https://shadcn-svelte.com/docs/registry/examples.md))

### Part of an Awesome List

- [UI Theme Customization](https://awesome-repositories.com/f/awesome-lists/devtools/theming-and-customization/ui-theme-customization.md) — Provides a system for modifying the look and feel of UI elements using CSS variables and custom color palettes. ([source](https://shadcn-svelte.com/docs/theming.md))
- [Collapsible Navigation Sidebars](https://awesome-repositories.com/f/awesome-lists/devtools/navigation-and-menus/collapsible-navigation-sidebars.md) — Implements themeable side navigation containers with support for expanded and collapsed states across desktop and mobile. ([source](https://shadcn-svelte.com/docs/components/sidebar.md))
- [UI Component Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/ui-component-libraries.md) — Port of a popular component library for Svelte.

### Development Tools & Productivity

- [Component Distribution CLIs](https://awesome-repositories.com/f/development-tools-productivity/package-managers/component-distribution-clis.md) — Provides a command-line tool to share and install UI components across different projects using a standardized schema. ([source](https://shadcn-svelte.com/docs))
- [Project Initializers](https://awesome-repositories.com/f/development-tools-productivity/terminal-shell-cli/cli-tooling-frameworks/cli-tooling/project-lifecycle-orchestrators/project-initializers.md) — Bootstraps new project directories with essential styling and framework dependency configurations. ([source](https://shadcn-svelte.com/docs/migration/tailwind-v4.md))

### Software Engineering & Architecture

- [Component Installation CLIs](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection/component-data-injection/component-installation-clis.md) — Automates the injection of component source code and required dependencies into a local project. ([source](https://shadcn-svelte.com/docs/cli.md))
- [JSON Component Registries](https://awesome-repositories.com/f/software-engineering-architecture/registry-driven-architectures/json-component-registries.md) — Distributes UI elements as source code using JSON metadata to define dependencies and file paths.
- [Registry-Based Distribution](https://awesome-repositories.com/f/software-engineering-architecture/reusable-component-architectures/registry-based-distribution.md) — Implements a registry-based system to distribute UI elements and blocks via a command-line interface.
- [Project Bootstrapping Tools](https://awesome-repositories.com/f/software-engineering-architecture/project-bootstrapping-tools.md) — Provides CLI tools to automate the initial setup of dependencies and styles for UI component integration.

### Web Development

- [Component Registries](https://awesome-repositories.com/f/web-development/component-registries.md) — Allows downloading specific UI elements from remote or local registry URLs via a CLI. ([source](https://shadcn-svelte.com/docs/registry/getting-started.md))

### Data & Databases

- [Data Visualization](https://awesome-repositories.com/f/data-databases/data-visualization.md) — Provides a composable architecture for creating interactive charts and data visualizations. ([source](https://shadcn-svelte.com/docs/components/chart.md))