Components
Discover premium UI components, crafted for enterprise-grade applications and equally suited for individual projects.
General#
Everyday interface elements
- Accordion A vertically stacked set of interactive headings that each reveal a section of content.
- Alert Alert component is used to display inline messages.
- Avatar An image element with a fallback for representing the user.
- Badge Displays a badge or a component that looks like a badge.
- Button Displays a button or a link that looks like a button.
- Button Group A container that groups related buttons together with consistent styling.
- Card Displays a card with header, content, and footer.
- Chart
Experimental - Collapsible An interactive component which expands/collapses a panel.
- Data Table
New - Empty Use the Empty component to display an empty state.
- Flow
Experimental - Event Calendar
New - Frame
New - Gantt
Experimental - Hover Card For sighted users to preview content available behind a link.
- Icon
Draft - Item A versatile component for displaying content with media, title, description, and actions.
- Kbd Used to display textual user input from keyboard.
- Popover Displays rich content in a portal, triggered by a button.
- Separator Visually or semantically separates content.
- Table
New - Timeline
New - Tooltip A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- Tree
New
Form#
Data entry and selection controls
- Accordion Multi Accordion select multiple options grouped in expandable sections.
- Calendar A calendar for selecting a date, several dates or a range.
- Checkbox A control that allows the user to toggle between checked and not checked.
- Combobox A select with a search field that filters the options as you type.
- Date Picker A date field with a calendar popup. The date can be typed or picked.
- Field Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- Filters
New - File Upload
New - Input Displays a form input field or a component that looks like an input field.
- Input Group Display additional information or actions to an input or textarea.
- Input OTP Accessible one-time password component with copy paste functionality.
- Number Field
New - Radio A set of checkable buttons where no more than one of the buttons can be checked at a time.
- Select Displays a list of options for the user to pick from, triggered by a button.
- Slider An input where the user selects a value from within a given range.
- Switch A control that allows the user to toggle between checked and not checked.
- Textarea Displays a form textarea or a component that looks like a textarea.
- Toggle A two-state button that can be either on or off.
- Toggle Group A set of two-state buttons that can be toggled on or off.
- Time Picker A time field with hour and minute columns. The time can be typed or picked.
Feedback#
Status and confirmation surfaces
- Alert Dialog A modal dialog that interrupts the user with important content and expects a response.
- Dialog A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- Drawer A panel that slides in from an edge of the screen.
- Progress Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- Sheet Extends the Dialog component to display content that complements the main content of the screen.
- Skeleton Use to show a placeholder while content is loading.
- Spinner An indicator that can be used to show a loading state.
- Toast A succinct message that is displayed temporarily.
Navigation#
Content location and movement patterns
- Breadcrumb Displays the path to the current resource using a hierarchy of links.
- Command A command menu with a search field that filters the list as you type.
- Context Menu Displays a menu to the user, such as a set of actions or functions, triggered by a right click.
- Dropdown Displays a menu to the user, such as a set of actions or functions, triggered by a button.
- Menubar
New - Navigation Menu
New - Pagination Pagination with page navigation, next and previous links.
- Stepper
New - Tabs A set of layered sections of content, known as tab panels, that are displayed one at a time.
Layout#
Structural page regions