Celebrate 2 years of Intent UI with 20% off using code 2YEARSB.{"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","name":"Intent UI Components","description":"Explore 80+ accessible UI components built on React Aria, fully customizable and production ready.","url":"https://intentui.com/components","mainEntity":{"@type":"ItemList","numberOfItems":90,"itemListElement":[{"@type":"ListItem","position":1,"name":"Button Group","url":"https://intentui.com/docs/components/buttons/button-group"},{"@type":"ListItem","position":2,"name":"Button","url":"https://intentui.com/docs/components/buttons/button"},{"@type":"ListItem","position":3,"name":"File Trigger","url":"https://intentui.com/docs/components/buttons/file-trigger"},{"@type":"ListItem","position":4,"name":"Toggle Group","url":"https://intentui.com/docs/components/buttons/toggle-group"},{"@type":"ListItem","position":5,"name":"Toggle","url":"https://intentui.com/docs/components/buttons/toggle"},{"@type":"ListItem","position":6,"name":"Choice Box","url":"https://intentui.com/docs/components/collections/choice-box"},{"@type":"ListItem","position":7,"name":"Dropdown","url":"https://intentui.com/docs/components/collections/dropdown"},{"@type":"ListItem","position":8,"name":"Grid List","url":"https://intentui.com/docs/components/collections/grid-list"},{"@type":"ListItem","position":9,"name":"List Box","url":"https://intentui.com/docs/components/collections/list-box"},{"@type":"ListItem","position":10,"name":"Menu","url":"https://intentui.com/docs/components/collections/menu"},{"@type":"ListItem","position":11,"name":"Table","url":"https://intentui.com/docs/components/collections/table"},{"@type":"ListItem","position":12,"name":"Tag Group","url":"https://intentui.com/docs/components/collections/tag-group"},{"@type":"ListItem","position":13,"name":"Tree","url":"https://intentui.com/docs/components/collections/tree"},{"@type":"ListItem","position":14,"name":"Color Area","url":"https://intentui.com/docs/components/colors/color-area"},{"@type":"ListItem","position":15,"name":"Color Field","url":"https://intentui.com/docs/components/colors/color-field"},{"@type":"ListItem","position":16,"name":"Color Picker","url":"https://intentui.com/docs/components/colors/color-picker"},{"@type":"ListItem","position":17,"name":"Color Slider","url":"https://intentui.com/docs/components/colors/color-slider"},{"@type":"ListItem","position":18,"name":"Color Swatch Picker","url":"https://intentui.com/docs/components/colors/color-swatch-picker"},{"@type":"ListItem","position":19,"name":"Color Swatch","url":"https://intentui.com/docs/components/colors/color-swatch"},{"@type":"ListItem","position":20,"name":"Color Thumb","url":"https://intentui.com/docs/components/colors/color-thumb"},{"@type":"ListItem","position":21,"name":"Color Wheel","url":"https://intentui.com/docs/components/colors/color-wheel"},{"@type":"ListItem","position":22,"name":"Command Menu","url":"https://intentui.com/docs/components/controls/command-menu"},{"@type":"ListItem","position":23,"name":"Context Menu","url":"https://intentui.com/docs/components/controls/context-menu"},{"@type":"ListItem","position":24,"name":"Keyboard","url":"https://intentui.com/docs/components/controls/keyboard"},{"@type":"ListItem","position":25,"name":"Scroll Area","url":"https://intentui.com/docs/components/controls/scroll-area"},{"@type":"ListItem","position":26,"name":"Slider","url":"https://intentui.com/docs/components/controls/slider"},{"@type":"ListItem","position":27,"name":"Switch","url":"https://intentui.com/docs/components/controls/switch"},{"@type":"ListItem","position":28,"name":"Toolbar","url":"https://intentui.com/docs/components/controls/toolbar"},{"@type":"ListItem","position":29,"name":"Calendar","url":"https://intentui.com/docs/components/date-and-time/calendar"},{"@type":"ListItem","position":30,"name":"Date Field","url":"https://intentui.com/docs/components/date-and-time/date-field"},{"@type":"ListItem","position":31,"name":"Date Picker","url":"https://intentui.com/docs/components/date-and-time/date-picker"},{"@type":"ListItem","position":32,"name":"Date Range Picker","url":"https://intentui.com/docs/components/date-and-time/date-range-picker"},{"@type":"ListItem","position":33,"name":"Range Calendar","url":"https://intentui.com/docs/components/date-and-time/range-calendar"},{"@type":"ListItem","position":34,"name":"Time Field","url":"https://intentui.com/docs/components/date-and-time/time-field"},{"@type":"ListItem","position":35,"name":"Drop Zone","url":"https://intentui.com/docs/components/drag-and-drop/drop-zone"},{"@type":"ListItem","position":36,"name":"Checkbox Group","url":"https://intentui.com/docs/components/forms/checkbox-group"},{"@type":"ListItem","position":37,"name":"Checkbox","url":"https://intentui.com/docs/components/forms/checkbox"},{"@type":"ListItem","position":38,"name":"Field","url":"https://intentui.com/docs/components/forms/field"},{"@type":"ListItem","position":39,"name":"Input Otp","url":"https://intentui.com/docs/components/forms/input-otp"},{"@type":"ListItem","position":40,"name":"Input","url":"https://intentui.com/docs/components/forms/input"},{"@type":"ListItem","position":41,"name":"Number Field","url":"https://intentui.com/docs/components/forms/number-field"},{"@type":"ListItem","position":42,"name":"Radio Group","url":"https://intentui.com/docs/components/forms/radio-group"},{"@type":"ListItem","position":43,"name":"Search Field","url":"https://intentui.com/docs/components/forms/search-field"},{"@type":"ListItem","position":44,"name":"Tag Field","url":"https://intentui.com/docs/components/forms/tag-field"},{"@type":"ListItem","position":45,"name":"Text Field","url":"https://intentui.com/docs/components/forms/text-field"},{"@type":"ListItem","position":46,"name":"Textarea","url":"https://intentui.com/docs/components/forms/textarea"},{"@type":"ListItem","position":47,"name":"Container","url":"https://intentui.com/docs/components/layouts/container"},{"@type":"ListItem","position":48,"name":"Navbar","url":"https://intentui.com/docs/components/layouts/navbar"},{"@type":"ListItem","position":49,"name":"Sidebar","url":"https://intentui.com/docs/components/layouts/sidebar"},{"@type":"ListItem","position":50,"name":"Avatar","url":"https://intentui.com/docs/components/media/avatar"},{"@type":"ListItem","position":51,"name":"Carousel","url":"https://intentui.com/docs/components/media/carousel"},{"@type":"ListItem","position":52,"name":"Breadcrumbs","url":"https://intentui.com/docs/components/navigation/breadcrumbs"},{"@type":"ListItem","position":53,"name":"Disclosure Group","url":"https://intentui.com/docs/components/navigation/disclosure-group"},{"@type":"ListItem","position":54,"name":"Disclosure","url":"https://intentui.com/docs/components/navigation/disclosure"},{"@type":"ListItem","position":55,"name":"Link","url":"https://intentui.com/docs/components/navigation/link"},{"@type":"ListItem","position":56,"name":"Pagination","url":"https://intentui.com/docs/components/navigation/pagination"},{"@type":"ListItem","position":57,"name":"Snippet","url":"https://intentui.com/docs/components/navigation/snippet"},{"@type":"ListItem","position":58,"name":"Tabs","url":"https://intentui.com/docs/components/navigation/tabs"},{"@type":"ListItem","position":59,"name":"Dialog","url":"https://intentui.com/docs/components/overlays/dialog"},{"@type":"ListItem","position":60,"name":"Drawer","url":"https://intentui.com/docs/components/overlays/drawer"},{"@type":"ListItem","position":61,"name":"Modal","url":"https://intentui.com/docs/components/overlays/modal"},{"@type":"ListItem","position":62,"name":"Popover","url":"https://intentui.com/docs/components/overlays/popover"},{"@type":"ListItem","position":63,"name":"Sheet","url":"https://intentui.com/docs/components/overlays/sheet"},{"@type":"ListItem","position":64,"name":"Tooltip","url":"https://intentui.com/docs/components/overlays/tooltip"},{"@type":"ListItem","position":65,"name":"Combo Box","url":"https://intentui.com/docs/components/pickers/combo-box"},{"@type":"ListItem","position":66,"name":"Multiple Select","url":"https://intentui.com/docs/components/pickers/multiple-select"},{"@type":"ListItem","position":67,"name":"Native Select","url":"https://intentui.com/docs/components/pickers/native-select"},{"@type":"ListItem","position":68,"name":"Select","url":"https://intentui.com/docs/components/pickers/select"},{"@type":"ListItem","position":69,"name":"Badge","url":"https://intentui.com/docs/components/statuses/badge"},{"@type":"ListItem","position":70,"name":"Loader","url":"https://intentui.com/docs/components/statuses/loader"},{"@type":"ListItem","position":71,"name":"Meter","url":"https://intentui.com/docs/components/statuses/meter"},{"@type":"ListItem","position":72,"name":"Note","url":"https://intentui.com/docs/components/statuses/note"},{"@type":"ListItem","position":73,"name":"Progress Bar","url":"https://intentui.com/docs/components/statuses/progress-bar"},{"@type":"ListItem","position":74,"name":"Progress Circle","url":"https://intentui.com/docs/components/statuses/progress-circle"},{"@type":"ListItem","position":75,"name":"Skeleton","url":"https://intentui.com/docs/components/statuses/skeleton"},{"@type":"ListItem","position":76,"name":"Toast","url":"https://intentui.com/docs/components/statuses/toast"},{"@type":"ListItem","position":77,"name":"Card","url":"https://intentui.com/docs/components/surfaces/card"},{"@type":"ListItem","position":78,"name":"Description List","url":"https://intentui.com/docs/components/surfaces/description-list"},{"@type":"ListItem","position":79,"name":"Heading","url":"https://intentui.com/docs/components/surfaces/heading"},{"@type":"ListItem","position":80,"name":"Separator","url":"https://intentui.com/docs/components/surfaces/separator"},{"@type":"ListItem","position":81,"name":"Show More","url":"https://intentui.com/docs/components/surfaces/show-more"},{"@type":"ListItem","position":82,"name":"Text","url":"https://intentui.com/docs/components/surfaces/text"},{"@type":"ListItem","position":83,"name":"Area Chart","url":"https://intentui.com/docs/components/visualizations/area-chart"},{"@type":"ListItem","position":84,"name":"Bar Chart","url":"https://intentui.com/docs/components/visualizations/bar-chart"},{"@type":"ListItem","position":85,"name":"Bar List","url":"https://intentui.com/docs/components/visualizations/bar-list"},{"@type":"ListItem","position":86,"name":"Chart","url":"https://intentui.com/docs/components/visualizations/chart"},{"@type":"ListItem","position":87,"name":"Leaderboard","url":"https://intentui.com/docs/components/visualizations/leaderboard"},{"@type":"ListItem","position":88,"name":"Line Chart","url":"https://intentui.com/docs/components/visualizations/line-chart"},{"@type":"ListItem","position":89,"name":"Pie Chart","url":"https://intentui.com/docs/components/visualizations/pie-chart"},{"@type":"ListItem","position":90,"name":"Tracker","url":"https://intentui.com/docs/components/visualizations/tracker"}]}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Components","item":"https://intentui.com/components"}]}]}
Button Group
Button
File Trigger
Toggle Group
Toggle
Choice Box
Dropdown
Grid List
List Box
Menu
Table
Tag Group
Tree
Color Area
Color Field
Color Picker
Color Slider
Color Swatch Picker
Color Swatch
Color Thumb
Color Wheel
Command Menu
Context Menu
Keyboard
Scroll Area
Slider
Switch
Toolbar
Calendar
Date Field
Date Picker
Date Range Picker
Range Calendar
Time Field
Drop Zone
Checkbox Group
Checkbox
Field
Input Otp
Input
Number Field
Radio Group
Search Field
Tag Field
Text Field
Textarea
Container
Navbar
Sidebar
Avatar
Carousel
Breadcrumbs
Disclosure Group
Disclosure
Link
Pagination
Snippet
Tabs
Dialog
Drawer
Modal
Popover
Sheet
Tooltip
Combo Box
Multiple Select
Native Select
Select
Badge
Loader
Meter
Note
Progress Bar
Progress Circle
Skeleton
Toast
Card
Description List
Heading
Separator
Show More
Text
Area Chart
Bar Chart
Bar List
Chart
Leaderboard
Line Chart
Pie Chart
Tracker
Components
Explore 80+ accessible UI components powered by react aria components, easy to customize and ready for production.
Button GroupButtonFile TriggerToggle GroupToggleChoice BoxDropdownGrid ListList BoxMenuTableTag GroupTreeColor AreaColor FieldColor PickerColor SliderColor Swatch PickerColor SwatchColor ThumbColor WheelCommand MenuContext MenuKeyboardScroll AreaSliderSwitchToolbarCalendarDate FieldDate PickerDate Range PickerRange CalendarTime FieldDrop ZoneCheckbox GroupCheckboxFieldInput OtpInputNumber FieldRadio GroupSearch FieldTag FieldText FieldTextareaContainerNavbarSidebarAvatarCarouselBreadcrumbsDisclosure GroupDisclosureLinkPaginationSnippetTabsDialogDrawerModalPopoverSheetTooltipCombo BoxMultiple SelectNative SelectSelectBadgeLoaderMeterNoteProgress BarProgress CircleSkeletonToastCardDescription ListHeadingSeparatorShow MoreTextArea ChartBar ChartBar ListChartLeaderboardLine ChartPie ChartTracker