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.
Displays a file or image attachment with media, metadata, upload state, and actions.
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.
Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
A container that groups related buttons together with consistent styling.
Displays a button or a component that looks like a button.
A calendar for selecting a single date, several dates, or a range of dates.
Displays a card with header, content, and footer.
A carousel with motion and swipe, built on [Embla Carousel](https://www.embla-carousel.com/).
A control that allows the user to toggle between checked and not checked.
Displays code, terminal output and diffs with an optional header, line numbers and a copy button.
An interactive component which expands/collapses a panel.
Autocomplete input with a list of suggestions.
Command menu for search and quick actions.
Displays a menu of actions triggered by a right click.
A date picker built by composing a `Popover` and a `Calendar`.
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
A panel that slides in from the edge of the screen to display supplementary content.
A menu triggered by a button, providing a list of actions or links.
Use the Empty component to display an empty state.
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
A set of layout wrappers to build accessible forms with label, description and error-message slots.
For sighted users to preview content available behind a link.
Add addons, buttons, and helper content to inputs.
A group of single-character inputs for one-time passwords and verification codes.
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.
Displays an inline status, system note, bordered row, or labeled separator in a conversation.
A horizontal menu bar with dropdown menus, similar to desktop application menus.
A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.
Displays a message in a conversation, with optional avatar, header, footer, and alignment.
A styled native HTML select element with consistent design system integration.
A collection of navigation links with optional hover-triggered submenus.
Pagination with page navigation, next and previous links.
A click-triggered popup that displays rich content, anchored to its trigger.
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
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.
Augments the native scroll functionality for custom, cross-browser styling.
Displays a list of options for the user to pick from—triggered by a button.
Visually or semantically separates content.
Extends the Dialog component to display content that complements the main content of the screen.
A collapsible sidebar layout with a header, body and footer.
Use to show a placeholder while content is loading.
An input where the user selects a value from within a given range.
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 succinct message that is displayed temporarily.
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.
The building block for reasoning, tool calls, sources and more.