Hub
Every component in the hub, grouped by collection. Each page has a live preview you can restyle and copy.
Collections
Menubar
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
Table
A responsive table component.
Tree
FutureDropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Command Menu
FutureContext Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Forms
Form
FutureButton
Displays a button or a component that looks like a button.
Input
Displays a form input field or a component that looks like an input field.
Label
Renders an accessible label associated with controls.
Input OTP
FutureTextarea
Displays a form textarea or a component that looks like a textarea.
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.
Checkbox
A control that allows the user to toggle between checked and not checked.
Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Tag Group
FutureToggle Group
A set of two-state buttons that can be toggled on or off.
Media
Navigation
Navigation Menu
A collection of links for navigating websites.
Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Pagination
Pagination with page navigation, next and previous links.
Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Collapsible
An interactive component which expands/collapses a panel.
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Overlays
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Drawer
NewA panel anchored to an edge of the screen, dragged between snap points and dismissed by swiping it towards that edge.
Popover
Displays rich content in a portal, triggered by a button.
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Hover Card
For sighted users to preview content available behind a link.
Picker
Combo Box
FutureSelect
Displays a list of options for the user to pick from—triggered by a button.
Multiple Select
Future
Surface
Statuses
Badge
Displays a badge or a component that looks like a badge.
Progress Bar
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress Circle
FutureSkeleton
Use to show a placeholder while content is loading.
Toast
NewA succinct message that is displayed temporarily.
Charts
Area Chart
FutureBar Chart
FutureLine Chart
FuturePie Chart
FutureRadar Chart
FutureRadial Chart
FutureTooltip Chart
Future
Colors
Color Picker
FutureColor Field
FutureColor Area
FutureColor Slider
FutureColor Swatch Picker
FutureColor Swatch
FutureColor Wheel
FutureColor Thumb
Future
Drag and Drop
Drop Zone
Future
Date and Time
Calendar
FutureRange Calendar
FutureDate Field
FutureTime Field
FutureDate Picker
FutureDate Range Picker
Future