Components

Accordion

A collapsible section list built on bits-ui with single or multiple open items.

Alert

Displays a callout for user attention with optional title, description, and action.

Alert Dialog

A modal dialog for confirmations and other actions that require an explicit response.

Aspect Ratio

Displays content within a fixed aspect ratio.

Avatar

An image element with a fallback for representing the user.

Badge

A small label for status, counts, or categories.

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Button

A button with variants, sizes, and optional link rendering via href.

Button Group

A container that groups related buttons together with consistent styling.

Calendar

A calendar component that allows users to select dates.

Card

Displays a card with header, content, and footer.

Carousel

A carousel with motion and swipe built using Embla.

Chart

Beautiful charts built with LayerChart, plus container, styles, and tooltip helpers.

Checkbox

A control that allows the user to toggle between checked and not checked.

Collapsible

An interactive component which expands and collapses a panel.

Combobox

Autocomplete input and command palette with a list of suggestions.

Command

A fast, composable command menu for keyboard-first search and actions.

Container

A centered content wrapper with max-width size variants.

Context Menu

Displays a menu to the user — such as a set of actions or functions — triggered by right click.

Data Table

Powerful tables and datagrids built with TanStack Table and the Table primitives.

Date Picker

A date picker built from Popover and Calendar, with optional range and presets.

Dialog

A modal dialog that interrupts the user with important content.

Drawer

A drawer component for Svelte, built on Vaul Svelte.

Dropdown Menu

Displays a menu of actions or functions triggered by a button.

Empty

Use the Empty component to display an empty state.

Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Heading

A semantic heading that decouples the heading level from its visual size, weight, and tone.

Hover Card

For sighted users to preview content available behind a link.

Icons

A typed icon component with size variants, Lucide icons, and a custom icon set.

Input

A styled text input field.

Input Group

Groups an input or textarea with addons, buttons, or text.

Input OTP

Accessible one-time password component with copy paste functionality.

Item

A versatile component that you can use to display any content.

Kbd

Used to display textual user input from keyboard.

Label

Renders an accessible label associated with controls.

Link Spread

An absolutely positioned anchor that makes an entire container clickable.

Link Text

An inline text link with tone, underline, and size variants plus safe external link handling.

Logos

Brand and partner logo SVGs with a searchable gallery for browsing and copying.

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Native Select

A styled native HTML select element with consistent design system integration.

Navigation Menu

A collection of links for navigating websites.

Pagination

Pagination with page navigation, next and previous links.

Popover

Displays rich content in a portal, triggered by a button.

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

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.

Range Calendar

A calendar component that allows users to select a range of dates.

Resizable

Accessible resizable panel groups and layouts with keyboard support.

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Select

Displays a list of options for the user to pick from—triggered by a button.

Separator

A visual divider between content sections.

Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Sidebar

A composable, themeable and customizable sidebar component.

Skeleton

Use to show a placeholder while content is loading.

Slider

An input where the user selects a value from within a given range.

Sonner

An opinionated toast component for Svelte, themed to match the design system.

Spinner

A loading indicator that spins an icon with accessible status semantics.

Switch

A control that allows the user to toggle between checked and not checked.

Table

A responsive table element used as the base for data tables.

Tabs

Layered content sections (tab panels) shown one at a time.

Text

A polymorphic body text component with size, weight, tone, and alignment variants.

Textarea

A multi-line text input field.

Toggle

A two-state button that can be either on or off.

Toggle Group

A set of two-state buttons that can be toggled on or off.

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.