shadcn/ui Component Reference

A vertically stacked set of interactive headings that each reveal a section of content.

Displays content within a desired ratio. Useful for images and video embeds.

A container for grouping related content and actions with header, content, and footer sections.

An interactive component which expands and collapses a panel of content.

A visual divider that separates content into distinct sections.

Displays a button or a component that looks like a button. Supports multiple variants and sizes.

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

Displays a form input field. Supports all standard HTML input attributes.

Renders an accessible label associated with form controls.

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

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

A toggle control that allows the user to switch between on and off states.

Displays a multi-line text input field for longer form content.

An image element with a fallback for representing the user. Supports initials fallback.

Displays a badge or a component that looks like a badge. Used for status indicators and labels.

A date field component that allows users to enter and edit date values. Built on react-day-picker.

A responsive table component for displaying rows of data with headers and footers.

A set of layered sections of content displayed one at a time, triggered by tab buttons.

A popup that displays information related to an element when the element receives focus or hover.

Displays a callout for important information. Supports default and destructive variants.

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

Displays an indicator showing the completion progress of a task with an animated bar.

A succinct message that is displayed temporarily. Supports actions and multiple variants.

A window overlaid on the primary content. Renders content in a portal above the page.

A menu of actions or options triggered by a button. Supports sub-menus and keyboard navigation.

For sighted users to preview content available behind a link. Opens on hover.

Displays rich content in a portal, triggered by a button. Useful for forms and pickers.

A panel that slides in from the edge of the screen. Useful for mobile navigation and forms.

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

A command palette component. Searchable list of actions, similar to macOS Spotlight.

A collection of links for navigating websites. Supports dropdown sub-menus and indicators.

Navigation for paged content. Supports previous, next, and numbered page links.