Getting StartedComponents

All Components

Explore the full list of components available in the library. More are on the way.

Buttons

Action Bar
Action Bar
Button
Button
ButtonGroup
ButtonGroup
CloseButton
CloseButton
Emoji Reaction Button
Emoji Reaction Button
Pressable Feedback
Pressable Feedback
Radio Button Group
Radio Button Group
Segment
Segment
ToggleButton
ToggleButton
ToggleButtonGroup
ToggleButtonGroup

Forms

Autocomplete
Autocomplete
Cell Color Picker
Cell Color Picker
Cell Select
Cell Select
Cell Slider
Cell Slider
Cell Switch
Cell Switch
Checkbox
Checkbox
Checkbox Button Group
Checkbox Button Group
CheckboxGroup
CheckboxGroup
ComboBox
ComboBox
Description
Description
Drop Zone
Drop Zone
ErrorMessage
ErrorMessage
FieldError
FieldError
Fieldset
Fieldset
Form
Form
Inline Select
Inline Select
Input
Input
InputGroup
InputGroup
InputOTP
InputOTP
Label
Label
Native Select
Native Select
NumberField
NumberField
Number Stepper
Number Stepper
Radio
Radio
RadioGroup
RadioGroup
Rich Text Editor
Rich Text Editor
SearchField
SearchField
Select
Select
Slider
Slider
Switch
Switch
Switch Group
Switch Group
Text Area
Text Area
Text Field
Text Field

Data Display

Avatar
Avatar
Badge
Badge
Carousel
Carousel
Chip
Chip
Item Card
Item Card
Item Card Group
Item Card Group
KPI
KPI
KPI Group
KPI Group
Map
Map
Number Value
Number Value
Rating
Rating
Table
Table
Timeline
Timeline
Trend Chip
Trend Chip
Widget
Widget

Feedback

Alert
Alert
Empty State
Empty State
Meter
Meter
ProgressBar
ProgressBar
ProgressCircle
ProgressCircle
Skeleton
Skeleton
Spinner
Spinner
Toast
Toast
Accordion
Accordion
Breadcrumbs
Breadcrumbs
Disclosure
Disclosure
DisclosureGroup
DisclosureGroup
Floating TOC
Floating TOC
Link
Link
Navbar
Navbar
Pagination
Pagination
Sidebar
Sidebar
Stepper
Stepper
Tabs
Tabs

Layout

AppLayout
AppLayout
Card
Card
Resizable
Resizable
ScrollShadow
ScrollShadow
Separator
Separator
Surface
Surface
Toolbar
Toolbar

Overlays

AlertDialog
AlertDialog
Command
Command
Context Menu
Context Menu
Drawer
Drawer
Emoji Picker
Emoji Picker
Hover Card
Hover Card
Menu
Menu
Menu Item
Menu Item
Menu Section
Menu Section
Modal
Modal
Popover
Popover
Sheet
Sheet
Tooltip
Tooltip

Collections

Data Grid
Data Grid
Dropdown
Dropdown
File Tree
File Tree
Kanban
Kanban
ListBox
ListBox
List Box Item
List Box Item
List Box Section
List Box Section
List View
List View
Tag
Tag
TagGroup
TagGroup

Date and Time

Agenda
Agenda
Calendar
Calendar
Calendar Year Picker
Calendar Year Picker
DateField
DateField
Date Input Group
Date Input Group
DatePicker
DatePicker
DateRangePicker
DateRangePicker
RangeCalendar
RangeCalendar
TimeField
TimeField

Colors

ColorArea
ColorArea
ColorField
ColorField
Color Input Group
Color Input Group
ColorPicker
ColorPicker
ColorSlider
ColorSlider
ColorSwatch
ColorSwatch
ColorSwatchPicker
ColorSwatchPicker

Charts

Area Chart
Area Chart
Bar Chart
Bar Chart
Chart Tooltip
Chart Tooltip
Composed Chart
Composed Chart
Line Chart
Line Chart
Pie Chart
Pie Chart
Radar Chart
Radar Chart
Radial Chart
Radial Chart

Typography

Header
Header
Kbd
Kbd
Typography
Typography

AI

Chain Of Thought
Chain Of Thought
Chat Attachment
Chat Attachment
Chat Conversation
Chat Conversation
Chat List View
Chat List View
Chat Loader
Chat Loader
Chat Message
Chat Message
Chat Message Actions
Chat Message Actions
Chat Source
Chat Source
Chat Tool
Chat Tool
Code Block
Code Block
Markdown
Markdown
Prompt Input
Prompt Input
Prompt Suggestion
Prompt Suggestion
Text Shimmer
Text Shimmer

Utilities

React Aria utilities
React Aria utilities
TextArea
TextArea
TextField
TextField

Action Bar

A floating toolbar for contextual actions — bulk selection, editing controls, or any set of actions that appear in response to user interaction.