# React components

> Browse 6 handpicked React UI components, optimized for seamless integration with Tailwind CSS and Next.js frameworks.

35 components available. Showing all of them below.

- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/range-calendar.md) — by Origin UI
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/custom-select-day-style.md) — by Origin UI
- [Multi Type Ripple Buttons](https://21st.dev/@easemize/components/multi-type-ripple-buttons.md) — by Hossain Jahed
- [useMousePositionRef](https://21st.dev/@danielpetho/components/use-mouse-position-ref.md) — by Daniel Petho
- [useTags](https://21st.dev/@kokonutd/components/use-tags.md) — by Kokonut Baffier
- [Emoji Picker](https://21st.dev/@liveblocks/components/emoji-picker.md) — by liveblocks
- [useScreenSize](https://21st.dev/@danielpetho/components/use-screen-size.md) — by Daniel Petho
- [useDimensions](https://21st.dev/@danielpetho/components/use-debounced-dimensions.md) — by Daniel Petho
- [Tabs Component](https://21st.dev/@anubra266/components/tabs-component/vertical-tabs-underline.md) — by Abraham
- [Calendar](https://21st.dev/@anubra266/components/calendar-1/calendar-weeks.md) — by Abraham
- [QR Code](https://21st.dev/@anubra266/components/qr-code/qr-code-sizes.md) — by Abraham
- [HeroUI Alert](https://21st.dev/@hero_ui/components/heroui-alert/custom-styles.md) — by Hero Ui
- [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/rgb-channels.md) — by Hero Ui
- [useDebounce](https://21st.dev/@serafimcloud/components/use-debounce.md) — by Serafim
- [HeroUI Alert](https://21st.dev/@hero_ui/components/heroui-alert/danger-steps.md) — by Hero Ui
- [useMousePosition](https://21st.dev/@danielpetho/components/use-mouse-position.md) — by Daniel Petho
- [useMouseVector](https://21st.dev/@danielpetho/components/use-mouse-vector.md) — by Daniel Petho
- [useClickOutside](https://21st.dev/@serafimcloud/components/use-click-outside.md) — by Serafim
- [Lucide Icon Drawer](https://21st.dev/@oldkong88/components/lucide-icon-drawer/icon-drawer-with-lucide-and-anime-js.md) — by SEONG HUN
- [Wheel Picker](https://21st.dev/@ncdai/components/wheel-picker.md) — by Chánh Đại
- [HeroUI Accordion](https://21st.dev/@hero_ui/components/heroui-accordion/faq-layout.md) — by Hero Ui
- [HeroUI Accordion](https://21st.dev/@hero_ui/components/heroui-accordion/controlled.md) — by Hero Ui
- [HeroUI Accordion](https://21st.dev/@hero_ui/components/heroui-accordion/custom-indicator.md) — by Hero Ui
- [CelestialLoom](https://21st.dev/@dhileepkumargm/components/celestial-loom.md) — by Dhileep Kumar GM
- [Neon Button Counter](https://21st.dev/@muhammad-binsalman/components/neon-button-counter.md) — by M.bin Salman
- [useResponsive](https://21st.dev/@shugar/components/use-responsive.md) — by tigran tumasov
- [HeroUI Drawer](https://21st.dev/@hero_ui/components/heroui-drawer/backdrop-variants.md) — by Hero Ui
- [Splitter](https://21st.dev/@anubra266/components/splitter/nested-splitter.md) — by Abraham
- [Analog Clock Component](https://21st.dev/@uniquesonu/components/analog-clock-component.md) — by Sonu
- [HeroUI Checkbox Group](https://21st.dev/@hero_ui/components/heroui-checkbox-group/indeterminate.md) — by Hero Ui
- [Reshaped Tabs](https://21st.dev/@reshaped/components/reshaped-tabs/sizes.md) — by reshaped
- [Reshaped Tabs](https://21st.dev/@reshaped/components/reshaped-tabs/panel-composition.md) — by reshaped
- [Reshaped Modal](https://21st.dev/@reshaped/components/reshaped-modal.md) — by reshaped
- [Reshaped Table](https://21st.dev/@reshaped/components/reshaped-table/cell-span.md) — by reshaped

Full component directory: https://21st.dev/llms.txt