Components
Explore our collection of reusable, accessible components. Click on any component to view details, examples, and code.
Layout
Components for arranging and structuring page content using grids, flexbox, or other layout systems.
Grid
A powerful grid layout component with container query support for responsive grid layouts.
Flex
A flexible layout component with container query support for responsive flex layouts.
Gallery
A responsive grid layout component for displaying media content like images, videos, and product cards.
Divider
A horizontal or vertical divider for separating content.
Fold
A collapsible disclosure component for expanding and collapsing content sections.
Composition
Higher-level components combining primitives to create complex, reusable UI patterns.
Group
A flexible container for grouping Button, Input, and Select components with unified styling.
List
Compound component for displaying item collections with selection and actions.
Action
Interactive elements like buttons and links that trigger actions, navigation, or form submission.
Button
A clickable element that triggers an action.
Confirm
A confirm dialog for critical user actions.
Command
A searchable command palette for quick access to actions.
Anchor
A styled link component with custom underline animation and popover preview on hover.
Input
Form elements for capturing and validating user input, such as text fields, checkboxes, radio buttons, selects, and sliders.
Checkbox
A checkbox input for selecting one or multiple options.
Input
Text input field for capturing user data.
Radio
A radio button for selecting one option from a group.
Select
Dropdown select component for choosing from multiple options.
Slider
A slider component for selecting a value from a range.
Switch
A toggle switch for boolean input.
Textarea
Multi-line text input field for longer user input.
Information
Read-only components for displaying static content like labels, badges, tooltips, and descriptive text.
Badge
A small badge component for displaying labels or status.
Label
Text label for form elements.
Tooltip
Displays additional information on hover or focus.
Feedback
Components that notify users of system status, success, errors, or progress through alerts and temporary messages.
Popover
A popover component for displaying content on demand.
Progress
A progress bar component for showing completion status.
Toast
A notification component for displaying temporary messages.
Navigation
Elements that guide users through the app, including menus, tabs, breadcrumbs, and navigation bars.
Breadcrumbs
A navigation component that displays the current page in a hierarchy and allows users to navigate to parent pages.
Menu
A context menu for right-click actions.
Tabs
A tabbed interface for organizing content into sections.
Container
Components that group and organize related content with visual and semantic structure.
Card
A card component for grouping related content.
Modal
A modal dialog for focusing user attention on important content.
ScrollArea
A scroll area component with custom scrollbars for overflowing content.
Framed content
Frame
A decorative border/frame component for wrapping and highlighting content.
Data
Components for displaying and interacting with datasets, such as tables, lists, and data visualizations.
| Name | |
|---|---|
| Alice | alice@example.com |
Table
A table component for displaying and organizing tabular data.