Components
The building blocks of the Shadcn UI kit.
A vertically stacked set of interactive headings that each reveal a section of content.
A modal dialog that interrupts the user with important content and expects a response.
Displays a callout for user attention.
Displays content within a desired ratio.
An image element with a fallback for representing the user.
Displays a badge or a component that looks like a badge.
Displays the path to the current resource using a hierarchy of links.
A container that groups related buttons together with consistent styling.
Displays a button or a component that looks like a button.
Displays a card with header, content, and footer.
A control that allows the user to toggle between checked and not checked.
An interactive component which expands/collapses a panel.
Autocomplete input and command palette with a list of suggestions.
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Use the Empty component to display an empty state.
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
For sighted users to preview content available behind a link.
Add addons, buttons, and helper content to inputs.
A text input component for forms and user data entry with built-in styling and accessibility features.
A versatile component for displaying content with media, title, description, and actions.
Used to display textual user input from keyboard.
Renders an accessible label associated with controls.
Pagination with page navigation, next and previous links.
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Accessible resizable panel groups and layouts with keyboard support.
A dropdown control that allows users to choose from a list of options.
Visually or semantically separates content.
Use to show a placeholder while content is loading.
A Sonner-style stacked toast notification system with auto-dismiss, swipe-to-dismiss, rich colors, and JS or server-render support.
An indicator that can be used to show a loading state.
A control that allows the user to toggle between checked and not checked.
A responsive table component.
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Displays a form textarea or a component that looks like a textarea.
A set of two-state buttons that can be toggled on or off.
A two-state button that can be either on or off.
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Styled HTML text elements for headings, paragraphs, quotes, lists and inline code.