Components

Displays a button or a component that looks like a button, with variants, sizes and loading state.

Displays a form input field or a component that looks like an input field, with invalid and disabled states.

Displays a multiline text input field for longer form content.

Displays a callout for user attention.

Displays a container with header, content, and footer.

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

A modal window that overlays the page.

A provider component that sets the text direction for your application.

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

A set of layered sections of content, known as tab panels, displayed one at a time.

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

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

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

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

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

Displays a menu of actions or links to the user, triggered by a button.

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

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.

A container that groups related buttons together with consistent styling.

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

A carousel with motion and swipe built using Embla.

Beautiful charts built using Recharts.

An interactive component which expands and collapses a panel.

Autocomplete input and command palette with a list of suggestions.

Command menu for search and quick actions.

Displays a menu of actions triggered by a right click.

Powerful table and datagrids built using TanStack Table.

A date picker component with range and presets.

A drawer component for React.

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.

Display additional information or actions inside an input.

Accessible one-time password component with copy-paste functionality.

A component to display keyboard shortcuts.

Renders an accessible label associated with controls.

A visually persistent menu common in desktop applications.

Displays a message in a conversation, with optional avatar, header, footer, and alignment.

A collection of links for navigating websites.

Pagination with page navigation, next and previous links.

Displays an indicator showing the completion progress of a task.

Accessible resizable panel groups and layouts.

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

Visually or semantically separates content.

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

A composable, themeable and customizable sidebar component.

Use to show a placeholder while content is loading.

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

An opinionated toast component.

An indicator that can be used to show a loading state.

A responsive table component.

A succinct message that appears temporarily to provide feedback.

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

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

Top-level chat shell that sticks to the latest turn, with empty, scroll, streaming, and download controls.

Chat transcript scroller for turn anchoring, streaming follow, history restore, and jump controls.

Collapsible block for model reasoning and chain-of-thought while a reply is prepared.

Progressive text surface for token-by-token model output during a stream.

AI prompt composer with actions, file attachments, and submit controls.

One-tap suggestion chips that seed the prompt composer with starter prompts.

Select models and providers from the chat header or composer toolbar.

Visualize tool and function invocations with status, args, and results.

Citation list for retrieved documents and grounded answer references.

Syntax-highlighted code surface for assistant replies with copy actions.

Navigate alternate reply branches when regenerating or editing a turn.

Queue and manage pending prompts while the model is still responding.