Components

Button

Displays a button or a component that looks like a button.

Toggle

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

JS

Toggle Group

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

JS

Button Group

Groups related buttons together with connected styling.

Input

Displays a form input field or a component that looks like an input field.

Textarea

Displays a form textarea or a component that looks like a textarea.

Label

Renders an accessible label associated with controls.

Checkbox

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

Switch

A control that allows the user to toggle between two states.

JS

Slider

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

JS

Select

Displays a list of options for the user to pick from.

JS

Radio Group

A set of checkable buttons where only one can be checked at a time.

JS

Field

A form field wrapper with label, input, description, and error message support.

Input Group

Input with prefix and/or suffix addons for icons, text, or other elements.

Native Select

A styled native HTML select element with optgroup support.

Input OTP

One-time password input with auto-focus and paste support.

JS

Combobox

An autocomplete input with searchable dropdown for selecting from a list of options.

JS

Calendar

A date picker calendar component with month navigation and date selection.

JS

Date Picker

A date picker input with a button trigger that opens a calendar popover.

JS

Badge

Displays a badge or a component that looks like a badge.

Avatar

An image element with a fallback for representing the user.

JS

Card

Displays a card with header, content, and footer.

Chart

Interactive charts themed with shadcn CSS variables and rendered with Chart.js.

JS

Table

A responsive table component.

Data Table

Server-first sortable, filterable tables built from Table and Pagination.

Progress

Displays an indicator showing the completion progress of a task.

Skeleton

Used to show a placeholder while content is loading.

Spinner

A loading spinner animation for indicating loading states.

Kbd

Displays keyboard input or shortcuts.

Typography

Styles for headings, paragraphs, lists, and other text elements.

Aspect Ratio

Displays content within a desired ratio.

Empty

Displays an empty state with media, title, description, and action content.

Item

A flexible flex container for displaying titles, descriptions, and actions.

Command

A command menu with search input, keyboard navigation, and item selection.

JS

Scroll Area

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

JS

Alert

Displays a callout for user attention.

Tooltip

A popup that displays information related to an element.

JS

Toast

Low-level toast markup kept for compatibility.

JS

Sonner

Recommended toast API with stacking, positions, swipe dismissal, and Turbo Stream support.

JS

Dialog

A modal dialog that interrupts the user with important content.

JS

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

JS

Sheet

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

JS

Drawer

A panel that slides in from the edge of the screen.

JS

Popover

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

JS

Hover Card

For sighted users to preview content available behind a link.

JS

Dropdown Menu

Displays a menu to the user.

JS

Context Menu

Displays a menu to the user triggered by right-click.

JS

Tabs

A set of layered sections of content.

JS

Accordion

A vertically stacked set of interactive headings.

JS

Breadcrumb

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

Menubar

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

JS

Navigation Menu

A collection of links for navigating websites.

JS

Pagination

Pagination with page navigation, next and previous links.

Collapsible

An interactive component which expands/collapses a panel.

JS

Separator

Visually or semantically separates content.

Resizable

Accessible resizable panel groups and layouts with keyboard support.

JS

Carousel

A carousel with motion and swipe built using Stimulus.

JS

Sidebar

A composable, themeable and customizable sidebar component.

JS