# React Aria components > Access 30 React Aria component examples, combining accessibility with Tailwind CSS styling for inclusive and modern UIs. 200 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/react-aria. - [Input](https://21st.dev/@originui/components/input/number-input-with-plus-minus-buttons.md) — by Origin UI - [Input](https://21st.dev/@originui/components/input/number-input-with-chevrons.md) — by Origin UI - [Input](https://21st.dev/@originui/components/input/date-input.md) — by Origin UI - [Input](https://21st.dev/@originui/components/input/date-range-picker-unavailable-dates.md) — by Origin UI - [Input](https://21st.dev/@originui/components/input/time-input-with-start-icon.md) — by Origin UI - [Input](https://21st.dev/@originui/components/input/time-input.md) — by Origin UI - [Input](https://21st.dev/@originui/components/input/date-and-time-input.md) — by Origin UI - [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac.md) — by Origin UI - [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac/range-calendar.md) — by Origin UI - [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac/disabled-dates.md) — by Origin UI - [Date Range Picker \[react-aria-components\]](https://21st.dev/@jolbol1/components/date-range-picker.md) — by James Shopland - [Select \[react-aria-components\]](https://21st.dev/@jolbol1/components/select.md) — by James Shopland - [Switch \[react-aria-components\]](https://21st.dev/@jolbol1/components/switch.md) — by James Shopland - [DatePicker](https://21st.dev/@hero_ui/components/heroui-date-picker.md) — by Hero Ui - [Grid List \[react-aria-components\]](https://21st.dev/@jolbol1/components/grid-list.md) — by James Shopland - [Popover \[react-aria-components\]](https://21st.dev/@jolbol1/components/popover.md) — by James Shopland - [Tag Group \[react-aria-components\]](https://21st.dev/@jolbol1/components/tag-group.md) — by James Shopland - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker.md) — by Hero Ui - [Form \[react-aria-components\]](https://21st.dev/@jolbol1/components/field.md) — by James Shopland - [Date Field \[react-aria-components\]](https://21st.dev/@jolbol1/components/datefield.md) — by James Shopland - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker.md) — by Hero Ui - [List Box \[react-aria-components\]](https://21st.dev/@jolbol1/components/list-box.md) — by James Shopland - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/format-options.md) — by Hero Ui - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/controlled.md) — by Hero Ui - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/international-calendar.md) — by Hero Ui - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/form-example.md) — by Hero Ui - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/custom-indicator.md) — by Hero Ui - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/disabled.md) — by Hero Ui - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/validation.md) — by Hero Ui - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker/controlled.md) — by Hero Ui - [Range Calendar \[react-aria-components\]](https://21st.dev/@jolbol1/components/range-calendar.md) — by James Shopland - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker/with-sliders.md) — by Hero Ui - [DatePicker](https://21st.dev/@hero_ui/components/heroui-date-picker/controlled.md) — by Hero Ui - [Search Field \[react-aria-components\]](https://21st.dev/@jolbol1/components/searchfield.md) — by James Shopland - [DatePicker](https://21st.dev/@hero_ui/components/heroui-date-picker/international-calendar.md) — by Hero Ui - [DatePicker](https://21st.dev/@hero_ui/components/heroui-date-picker/custom-indicator.md) — by Hero Ui - [DatePicker](https://21st.dev/@hero_ui/components/heroui-date-picker/disabled.md) — by Hero Ui - [DatePicker](https://21st.dev/@hero_ui/components/heroui-date-picker/format-options.md) — by Hero Ui - [DatePicker](https://21st.dev/@hero_ui/components/heroui-date-picker/validation.md) — by Hero Ui - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker/with-fields.md) — by Hero Ui - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker/with-swatches.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/hsl-channels.md) — by Hero Ui - [Button \[react-aria-components\]](https://21st.dev/@jolbol1/components/button.md) — by James Shopland - [HeroUI Alert](https://21st.dev/@hero_ui/components/heroui-alert.md) — by Hero Ui - [HeroUI Alert](https://21st.dev/@hero_ui/components/heroui-alert/compact.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/rgb-channels.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/vertical.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/custom-render-function.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/controlled.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/disabled.md) — by Hero Ui - [Time Field \[react-aria-components\]](https://21st.dev/@jolbol1/components/timefield.md) — by James Shopland - [Calendar \[react-aria-components\]](https://21st.dev/@jolbol1/components/calendar.md) — by James Shopland - [HeroUI Disclosure Group](https://21st.dev/@hero_ui/components/heroui-disclosure-group.md) — by Hero Ui - [Progress \[react-aria-components\]](https://21st.dev/@jolbol1/components/progress.md) — by James Shopland - [Table](https://21st.dev/@jolbol1/components/table-2/table-sortable.md) — by James Shopland - [Table \[react-aria-components\]](https://21st.dev/@jolbol1/components/table.md) — by James Shopland - [HeroUI Select](https://21st.dev/@hero_ui/components/heroui-select.md) — by Hero Ui - [Table](https://21st.dev/@jolbol1/components/table-2/table-resizable.md) — by James Shopland - [Slider \[react-aria-components\]](https://21st.dev/@jolbol1/components/slider.md) — by James Shopland Full component directory: https://21st.dev/llms.txt