Components
39 headless, unstyled components. Pick one to try it live, read its API and style it in React.
Overlays
6- Alert DialogA dialog that asks for a decision and needs an answer.
- DialogA modal popup that sits above the page.
- DrawerA panel that slides in from the edge of the screen.
- PopoverA popup anchored to a button, for extra content or controls.
- Preview CardA card that previews where a link goes when you hover or focus it.
- TooltipA short label that appears when hovering or focusing a control.
Menus
4Inputs
15- AutocompletenewA text input that suggests matching items as you type.
- ButtonA button that stays accessible when disabled and can keep keyboard focus.
- CheckboxA box that is ticked or not, with a hidden input for forms.
- Checkbox GroupCheckboxes that share one array value.
- ComboboxnewAn input that filters a list of options as you type, and picks one of them.
- InputA native text input that works with Field.
- Number FieldA numeric input with increment and decrement buttons.
- OTP FieldA one-time code typed into one input per character.
- RadioOne choice out of a few, in a radio group.
- Radio GroupGroups radios under one value and one name.
- SelectnewA button that opens a list of options and shows the one picked.
- SliderA value, or a range, picked by dragging a thumb along a track.
- SwitchA control that toggles a setting on or off.
- ToggleA two-state button that can be on or off.
- Toggle GroupA set of toggles where one, or several, can be pressed.
Forms
2Disclosure
2Layout
4- Scroll AreaA scrolling container with scrollbars you can style.
- SeparatorA visual divider between sections or items, announced to screen readers.
- TabsPanels of content where one is shown at a time, picked by a row of tabs.
- ToolbarA row of buttons, inputs and links that you move through with the arrow keys.
Feedback
3Display
1Utilities
2Coming: Fieldset. It has no page yet.