@optics

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.

Groups buttons together with proper spacing and styling.

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

A date field component that allows users to enter and edit date.

Displays a card with header, content, and footer.

A carousel with motion and swipe built using Embla.

Beautiful charts built with Recharts.

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

A syntax-highlighted code block component with copy functionality.

A code snippet component with tabs and copy functionality.

An interactive component which expands/collapses a panel.

Fast, composable, unstyled command menu for React.

Displays a menu to the user triggered by a right click or a long press.

Powerful table and datagrid built with TanStack Table.

A date field component that allows users to enter and edit date.

A window overlaid on either the primary window or another dialog window.

A drawer component built with Vaul.

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Displays an empty state with optional illustration, title, and description.

A field component for grouping form elements with labels and descriptions.

Builds forms with React Hook Form.

A flexible grid system component for layout.

A guided tour component for onboarding users.

For sighted users to preview content available behind a link.

Groups input fields with addons, buttons, and text.

Accessible one-time password component with copy paste support.

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

A flexible item component for displaying content.

Keyboard key component for displaying keyboard shortcuts.

Renders an accessible label associated with controls.

A visually persistent menu common in desktop applications.

A select component for allowing multiple selections.

A collection of links for navigating websites.

Pagination with page navigation, next and previous links.

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

Displays an indicator showing the completion progress of a task.

A set of checkable buttons—known as radio buttons.

Accessible resizable panel groups and layouts.

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

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

Visually or semantically separates content.

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

A component that shows/hides additional content with smooth animations.

A composable sidebar component with desktop and mobile support.

Use to show a placeholder while content is loading.

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

Toast component built with Sonner.

An animated spinner component.

An interactive star rating component.

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

A responsive table component.

A set of layered sections of content—known as tab panels.

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

A theme switcher component for toggling between themes.