heroui.com

# HeroUI v3 Documentation

> A set of beautiful, customizable React and React Native components that stay maintained and up to date.

HeroUI v3 is an open-source UI component library for building modern web and mobile applications. Built on [Tailwind CSS v4](https://tailwindcss.com/) and [React Aria Components](https://react-spectrum.adobe.com/react-aria/), HeroUI provides accessible, customizable components with smooth animations and polished details.

**Key Features:**

- Beautiful by default - Professional look out of the box, no extra styling needed
- Accessible - Built with accessibility in mind, following WAI-ARIA guidelines
- Flexible - Each component is made of customizable parts
- Developer-friendly - Fully typed APIs, predictable patterns, and excellent autocompletion
- Maintained - Regular updates, bug fixes, and new features

**Technology Stack:**

- React 19+ for web components
- React Native for mobile components
- Tailwind CSS v4 for styling
- TypeScript for type safety

## Available Platforms

- **React (Web)**: [/react/llms.txt](https://www.heroui.com/react/llms.txt) - React component library for web applications
- **React Native**: [/native/llms.txt](https://www.heroui.com/native/llms.txt) - React Native component library for mobile applications

## Documentation Index

### React

- [Introduction](https://www.heroui.com/docs/react/getting-started): An open-source UI component library for building beautiful and accessible user interfaces.
- [All Components](https://www.heroui.com/docs/react/components): Explore the full list of components available in the library. More are on the way.
- [Migration (for AI assistants)](https://www.heroui.com/docs/react/migration/agent-index): Entry point for AI assistants helping migrate HeroUI v2 to v3
- [Hooks](https://www.heroui.com/docs/react/migration/hooks): Migration guide for HeroUI hooks from v2 to v3
- [Migration](https://www.heroui.com/docs/react/migration): Complete guide to migrate your HeroUI v2 application to v3
- [Styling & Theming](https://www.heroui.com/docs/react/migration/styling): Complete guide to styling changes and theming system migration from HeroUI v2 to v3
- [All Releases](https://www.heroui.com/docs/react/releases): All updates and changes to HeroUI v3, including new features, fixes, and breaking changes.
- [v3.0.0-alpha.32](https://www.heroui.com/docs/react/releases/v3-0-0-alpha-32): Card component redesign, CloseButton, MCP Server for AI assistants
- [v3.0.0-alpha.33](https://www.heroui.com/docs/react/releases/v3-0-0-alpha-33): RAC upgrade, Tabs indicator redesign, Switch size variant, Related showcase
- [v3.0.0-alpha.34](https://www.heroui.com/docs/react/releases/v3-0-0-alpha-34): Essentials for building forms with a clean API Form, TextField, RadioGroup, Label, Input, Fieldset and more.
- [v3.0.0-alpha.35](https://www.heroui.com/docs/react/releases/v3-0-0-alpha-35): React Server Components support for compound components, React 19 improvements, and critical bug fixes.
- [v3.0.0-beta.1](https://www.heroui.com/docs/react/releases/v3-0-0-beta-1): Major redesign with new design system, 8 new components, and improved developer experience.
- [v3.0.0-beta.2](https://www.heroui.com/docs/react/releases/v3-0-0-beta-2): Six new components (AlertDialog, ComboBox, Dropdown, InputGroup, Modal, NumberField), Select API improvements, and component refinements.
- [v3.0.0-beta.3](https://www.heroui.com/docs/react/releases/v3-0-0-beta-3): Seven new components, fullWidth and hideSeparator support, style fixes, and breaking changes for AlertDialog/Modal backdrop variants and asChild prop removal.
- [v3.0.0-beta.4](https://www.heroui.com/docs/react/releases/v3-0-0-beta-4): New Theme Builder, three new components (Autocomplete, Breadcrumbs, Toast), Tabs secondary variant, Input/InputGroup variants, and various improvements.
- [v3.0.0-beta.6](https://www.heroui.com/docs/react/releases/v3-0-0-beta-6): 6 new color components (ColorPicker, ColorArea, ColorSlider, ColorField, ColorSwatch, ColorSwatchPicker), toast improvements, and various style fixes.
- [v3.0.0-beta.7](https://www.heroui.com/docs/react/releases/v3-0-0-beta-7): 4 new components (Calendar, RangeCalendar, DatePicker, DateRangePicker) and APIs improvements.
- [v3.0.0-beta.8](https://www.heroui.com/docs/react/releases/v3-0-0-beta-8): 3 new components (Badge, Pagination, Table), DateField improvements, and key API/style fixes.
- [v3.0.0-rc.1](https://www.heroui.com/docs/react/releases/v3-0-0-rc-1): 7 new components (Drawer, ToggleButton, ToggleButtonGroup, Meter, ProgressBar, ProgressCircle, Toolbar), Table & ListBox virtualization, ButtonGroup improvements, and bug fixes.
- [Introducing HeroUI v3](https://www.heroui.com/docs/react/releases/v3-0-0): A ground-up rewrite for React and React Native. 75+ web components, 37 native components, Tailwind CSS v4, React Aria, compound architecture, and built for AI-assisted development.
- [v3.0.2](https://www.heroui.com/docs/react/releases/v3-0-2): Bug fixes, smoother Drawer transitions, new --backdrop theme variable, and style refinements for triggers, arrows, and tags.
- [v3.0.3](https://www.heroui.com/docs/react/releases/v3-0-3): RAC 1.17 with 90% fewer deps, expandable Table rows, Apache 2.0 license, useTheme hook, DOM polymorphic render-prop API, and bug fixes.
- [Animation](https://www.heroui.com/docs/react/getting-started/animation): Add smooth animations and transitions to HeroUI v3 components
- [Colors](https://www.heroui.com/docs/react/getting-started/colors): Color palette and theming system for HeroUI v3
- [Composition](https://www.heroui.com/docs/react/getting-started/composition): Build flexible UI with component composition patterns
- [Styling](https://www.heroui.com/docs/react/getting-started/styling): Style HeroUI components with CSS, Tailwind, or CSS-in-JS
- [Theming](https://www.heroui.com/docs/react/getting-started/theming): Customize HeroUI's design system with CSS variables and global styles
- [Design Principles](https://www.heroui.com/docs/react/getting-started/design-principles): Core principles that guide HeroUI v3's design and development
- [Quick Start](https://www.heroui.com/docs/react/getting-started/quick-start): Get started with HeroUI v3 in minutes
- [Agent Skills](https://www.heroui.com/docs/react/getting-started/agent-skills): Enable AI assistants to build UIs with HeroUI v3 components
- [AGENTS.md](https://www.heroui.com/docs/react/getting-started/agents-md): Download HeroUI v3 React documentation for AI coding agents
- [LLMs.txt](https://www.heroui.com/docs/react/getting-started/llms-txt): Enable AI assistants like Claude, Cursor, and Windsurf to understand HeroUI v3
- [MCP Server](https://www.heroui.com/docs/react/getting-started/mcp-server): Access HeroUI v3 documentation directly in your AI assistant
- [ButtonGroup](https://www.heroui.com/docs/react/components/button-group): Group related buttons together with consistent styling and spacing
- [Button](https://www.heroui.com/docs/react/components/button): A clickable button component with multiple variants and states
- [CloseButton](https://www.heroui.com/docs/react/components/close-button): Button component for closing dialogs, modals, or dismissing content
- [ToggleButtonGroup](https://www.heroui.com/docs/react/components/toggle-button-group): Groups multiple ToggleButtons into a unified control, allowing users to select one or multiple options.
- [ToggleButton](https://www.heroui.com/docs/react/components/toggle-button): An interactive toggle control for on/off or selected/unselected states
- [Dropdown](https://www.heroui.com/docs/react/components/dropdown): A dropdown displays a list of actions or options that a user can choose
- [ListBox](https://www.heroui.com/docs/react/components/list-box): A listbox displays a list of options and allows a user to select one or more of them
- [TagGroup](https://www.heroui.com/docs/react/components/tag-group): A focusable list of tags with support for keyboard navigation, selection, and removal
- [ColorArea](https://www.heroui.com/docs/react/components/color-area): A 2D color picker that allows users to select colors from a gradient area
- [ColorField](https://www.heroui.com/docs/react/components/color-field): Color input field with labels, descriptions, and validation built on React Aria ColorField
- [ColorPicker](https://www.heroui.com/docs/react/components/color-picker): A composable color picker that synchronizes color value between multiple color components
- [ColorSlider](https://www.heroui.com/docs/react/components/color-slider): A color slider allows users to adjust an individual channel of a color value
- [ColorSwatchPicker](https://www.heroui.com/docs/react/components/color-swatch-picker): A list of color swatches that allows users to select a color from a predefined palette.
- [ColorSwatch](https://www.heroui.com/docs/react/components/color-swatch): A visual preview of a color value with accessibility support
- [Slider](https://www.heroui.com/docs/react/components/slider): A slider allows a user to select one or more values within a range
- [Switch](https://www.heroui.com/docs/react/components/switch): A toggle switch component for boolean states
- [Badge](https://www.heroui.com/docs/react/components/badge): Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels
- [Chip](https://www.heroui.com/docs/react/components/chip): Small informational badges for displaying labels, statuses, and categories
- [Table](https://www.heroui.com/docs/react/components/table): Tables display structured data in rows and columns with support for sorting, selection, column resizing, and infinite scrolling.
- [Calendar](https://www.heroui.com/docs/react/components/calendar): Composable date picker with month grid, navigation, and year picker support built on React Aria Calendar
- [DateField](https://www.heroui.com/docs/react/components/date-field): Date input field with labels, descriptions, and validation built on React Aria DateField
- [DatePicker](https://www.heroui.com/docs/react/components/date-picker): Composable date picker built on React Aria DatePicker with DateField and Calendar composition
- [DateRangePicker](https://www.heroui.com/docs/react/components/date-range-picker): Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition
- [RangeCalendar](https://www.heroui.com/docs/react/components/range-calendar): Composable date range picker with month grid, navigation, and year picker support built on React Aria RangeCalendar
- [TimeField](https://www.heroui.com/docs/react/components/time-field): Time input field with labels, descriptions, and validation built on React Aria TimeField
- [Alert](https://www.heroui.com/docs/react/components/alert): Display important messages and notifications to users with status indicators
- [Meter](https://www.heroui.com/docs/react/components/meter): A meter represents a quantity within a known range, or a fractional value.
- [ProgressBar](https://www.heroui.com/docs/react/components/progress-bar): A progress bar shows either determinate or indeterminate progress of an operation over time.
- [ProgressCircle](https://www.heroui.com/docs/react/components/progress-circle): A circular progress indicator that shows determinate or indeterminate progress.
- [Skeleton](https://www.heroui.com/docs/react/components/skeleton): Skeleton is a placeholder to show a loading state and the expected shape of a component.
- [Spinner](https://www.heroui.com/docs/react/components/spinner): A loading indicator component to show pending states
- [CheckboxGroup](https://www.heroui.com/docs/react/components/checkbox-group): A checkbox group component for managing multiple checkbox selections
- [Checkbox](https://www.heroui.com/docs/react/components/checkbox): Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
- [Description](https://www.heroui.com/docs/react/components/description): Provides supplementary text for form fields and other components
- [ErrorMessage](https://www.heroui.com/docs/react/components/error-message): A low-level error message component for displaying errors
- [FieldError](https://www.heroui.com/docs/react/components/field-error): Displays validation error messages for form fields
- [Fieldset](https://www.heroui.com/docs/react/components/fieldset): Group related form controls with legends, descriptions, and actions
- [Form](https://www.heroui.com/docs/react/components/form): Wrapper component for form validation and submission handling
- [InputGroup](https://www.heroui.com/docs/react/components/input-group): Group related input controls with prefix and suffix elements for enhanced form fields
- [InputOTP](https://www.heroui.com/docs/react/components/input-otp): A one-time password input component for verification codes and secure authentication
- [Input](https://www.heroui.com/docs/react/components/input): Primitive single-line text input component that accepts standard HTML attributes
- [Label](https://www.heroui.com/docs/react/components/label): Renders an accessible label associated with form controls
- [NumberField](https://www.heroui.com/docs/react/components/number-field): Number input fields with increment/decrement buttons, validation, and internationalized formatting
- [RadioGroup](https://www.heroui.com/docs/react/components/radio-group): Radio group for selecting a single option from a list
- [SearchField](https://www.heroui.com/docs/react/components/search-field): Search input field with clear button and search icon
- [TextArea](https://www.heroui.com/docs/react/components/text-area): Primitive multiline text input component that accepts standard HTML attributes
- [TextField](https://www.heroui.com/docs/react/components/text-field): Composition-friendly text fields with labels, descriptions, and inline validation
- [Card](https://www.heroui.com/docs/react/components/card): Flexible container component for grouping related content and actions
- [Separator](https://www.heroui.com/docs/react/components/separator): Visually divide content sections
- [Surface](https://www.heroui.com/docs/react/components/surface): Container component that provides surface-level styling and context for child components
- [Toolbar](https://www.heroui.com/docs/react/components/toolbar): A container for interactive controls with arrow key navigation.
- [Avatar](https://www.heroui.com/docs/react/components/avatar): Display user profile images with customizable fallback content
- [Accordion](https://www.heroui.com/docs/react/components/accordion): A collapsible content panel for organizing information in a compact space
- [Breadcrumbs](https://www.heroui.com/docs/react/components/breadcrumbs): Navigation breadcrumbs showing the current page's location within a hierarchy
- [DisclosureGroup](https://www.heroui.com/docs/react/components/disclosure-group): Container that manages multiple Disclosure items with coordinated expanded states
- [Disclosure](https://www.heroui.com/docs/react/components/disclosure): A disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps the content.
- [Link](https://www.heroui.com/docs/react/components/link): A styled anchor component for navigation with built-in icon support
- [Pagination](https://www.heroui.com/docs/react/components/pagination): Page navigation with composable page links, previous/next buttons, and ellipsis indicators
- [Tabs](https://www.heroui.com/docs/react/components/tabs): Tabs organize content into multiple sections and allow users to navigate between them.
- [AlertDialog](https://www.heroui.com/docs/react/components/alert-dialog): Modal dialog for critical confirmations requiring user attention and explicit action
- [Drawer](https://www.heroui.com/docs/react/components/drawer): Slide-out panel for supplementary content and actions
- [Modal](https://www.heroui.com/docs/react/components/modal): Dialog overlay for focused user interactions and important content
- [Popover](https://www.heroui.com/docs/react/components/popover): Displays rich content in a portal triggered by a button or any custom element
- [Toast](https://www.heroui.com/docs/react/components/toast): Display temporary notifications and messages to users with automatic dismissal and customizable placement
- [Tooltip](https://www.heroui.com/docs/react/components/tooltip): Displays informative text when users hover over or focus on an element
- [Autocomplete](https://www.heroui.com/docs/react/components/autocomplete): An autocomplete combines a select with filtering, allowing users to search and select from a list of options
- [ComboBox](https://www.heroui.com/docs/react/components/combo-box): A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query
- [Select](https://www.heroui.com/docs/react/components/select): A select displays a collapsible list of options and allows a user to select one of them
- [Kbd](https://www.heroui.com/docs/react/components/kbd): Display keyboard shortcuts and key combinations
- [ScrollShadow](https://www.heroui.com/docs/react/components/scroll-shadow): Apply visual shadows to indicate scrollable content overflow with automatic detection of scroll position.
- [Agent Skills](https://www.heroui.com/docs/react/migration/agent-skills): Enable AI assistants to migrate HeroUI v2 to v3
- [AGENTS.md](https://www.heroui.com/docs/react/migration/agents-md): Download HeroUI v2 to v3 migration docs for AI coding agents
- [MCP Server](https://www.heroui.com/docs/react/migration/mcp-server): Access HeroUI v2 to v3 migration guides in your AI assistant
- [Agent Migration Guide - Full Migration](https://www.heroui.com/docs/react/migration/agent-guide-full): Full migration guide for AI assistants helping migrate HeroUI v2 to v3
- [Agent Migration Guide - Incremental Migration with Coexistence](https://www.heroui.com/docs/react/migration/agent-guide-incremental): Incremental coexistence migration guide for AI assistants helping migrate HeroUI v2 to v3
- [Full Migration](https://www.heroui.com/docs/react/migration/full-migration): Step-by-step guide for migrating HeroUI v2 to v3 using full migration approach
- [Incremental Migration](https://www.heroui.com/docs/react/migration/incremental-migration): Step-by-step guide for migrating HeroUI v2 to v3 incrementally while keeping both versions working side-by-side
- [Accordion](https://www.heroui.com/docs/react/migration/accordion): Migration guide for Accordion from HeroUI v2 to v3
- [Alert](https://www.heroui.com/docs/react/migration/alert): Migration guide for Alert from HeroUI v2 to v3
- [Autocomplete](https://www.heroui.com/docs/react/migration/autocomplete): Migration guide for Autocomplete from HeroUI v2 to v3
- [Avatar](https://www.heroui.com/docs/react/migration/avatar): Migration guide for Avatar from HeroUI v2 to v3
- [Badge](https://www.heroui.com/docs/react/migration/badge): Migration guide for Badge from HeroUI v2 to v3
- [Breadcrumbs](https://www.heroui.com/docs/react/migration/breadcrumbs): Migration guide for Breadcrumbs from HeroUI v2 to v3
- [ButtonGroup](https://www.heroui.com/docs/react/migration/button-group): Migration guide for ButtonGroup from HeroUI v2 to v3
- [Button](https://www.heroui.com/docs/react/migration/button): Migration guide for Button from HeroUI v2 to v3
- [Calendar](https://www.heroui.com/docs/react/migration/calendar): Migration guide for Calendar from HeroUI v2 to v3
- [Card](https://www.heroui.com/docs/react/migration/card): Migration guide for Card from HeroUI v2 to v3
- [CheckboxGroup](https://www.heroui.com/docs/react/migration/checkbox-group): Migration guide for CheckboxGroup from HeroUI v2 to v3
- [Checkbox](https://www.heroui.com/docs/react/migration/checkbox): Migration guide for Checkbox from HeroUI v2 to v3
- [Chip](https://www.heroui.com/docs/react/migration/chip): Migration guide for Chip from HeroUI v2 to v3
- [CircularProgress](https://www.heroui.com/docs/react/migration/circular-progress): Migration guide for CircularProgress from HeroUI v2 to v3 (now ProgressCircle)
- [Code](https://www.heroui.com/docs/react/migration/code): Migration guide for Code from HeroUI v2 to v3
- [DatePicker](https://www.heroui.com/docs/react/migration/date-picker): Migration guide for DatePicker from HeroUI v2 to v3
- [DateRangePicker](https://www.heroui.com/docs/react/migration/date-range-picker): Migration guide for DateRangePicker from HeroUI v2 to v3
- [DateInput](https://www.heroui.com/docs/react/migration/dateinput): Migration guide for DateInput to DateField from HeroUI v2 to v3
- [Divider](https://www.heroui.com/docs/react/migration/divider): Migration guide for Divider (renamed to Separator) from HeroUI v2 to v3
- [Drawer](https://www.heroui.com/docs/react/migration/drawer): Migration guide for Drawer from HeroUI v2 to v3
- [Dropdown](https://www.heroui.com/docs/react/migration/dropdown): Migration guide for Dropdown from HeroUI v2 to v3
- [Form](https://www.heroui.com/docs/react/migration/form): Migration guide for Form from HeroUI v2 to v3
- [Image](https://www.heroui.com/docs/react/migration/image): Migration guide for Image from HeroUI v2 to v3
- [InputOTP](https://www.heroui.com/docs/react/migration/input-otp): Migration guide for InputOTP from HeroUI v2 to v3
- [Input](https://www.heroui.com/docs/react/migration/input): Migration guide for Input from HeroUI v2 to v3
- [Kbd](https://www.heroui.com/docs/react/migration/kbd): Migration guide for Kbd from HeroUI v2 to v3
- [Link](https://www.heroui.com/docs/react/migration/link): Migration guide for Link from HeroUI v2 to v3
- [Listbox](https://www.heroui.com/docs/react/migration/listbox): Migration guide for Listbox (renamed to ListBox with a capital "B") from HeroUI v2 to v3
- [Modal](https://www.heroui.com/docs/react/migration/modal): Migration guide for Modal from HeroUI v2 to v3
- [Navbar](https://www.heroui.com/docs/react/migration/navbar): Migration guide for Navbar from HeroUI v2 to v3
- [NumberInput](https://www.heroui.com/docs/react/migration/numberinput): Migration guide for NumberInput to NumberField from HeroUI v2 to v3
- [Pagination](https://www.heroui.com/docs/react/migration/pagination): Migration guide for Pagination from HeroUI v2 to v3
- [Popover](https://www.heroui.com/docs/react/migration/popover): Migration guide for Popover from HeroUI v2 to v3
- [Progress](https://www.heroui.com/docs/react/migration/progress): Migration guide for Progress from HeroUI v2 to v3 (now ProgressBar)
- [RadioGroup](https://www.heroui.com/docs/react/migration/radio-group): Migration guide for RadioGroup from HeroUI v2 to v3
- [Radio](https://www.heroui.com/docs/react/migration/radio): Migration guide for Radio from HeroUI v2 to v3
- [RangeCalendar](https://www.heroui.com/docs/react/migration/range-calendar): Migration guide for RangeCalendar from HeroUI v2 to v3
- [ScrollShadow](https://www.heroui.com/docs/react/migration/scroll-shadow): Migration guide for ScrollShadow from HeroUI v2 to v3
- [Select](https://www.heroui.com/docs/react/migration/select): Migration guide for Select from HeroUI v2 to v3
- [Skeleton](https://www.heroui.com/docs/react/migration/skeleton): Migration guide for Skeleton from HeroUI v2 to v3
- [Slider](https://www.heroui.com/docs/react/migration/slider): Migration guide for Slider from HeroUI v2 to v3
- [Snippet](https://www.heroui.com/docs/react/migration/snippet): Migration guide for Snippet from HeroUI v2 to v3
- [Spacer](https://www.heroui.com/docs/react/migration/spacer): Migration guide for Spacer from HeroUI v2 to v3
- [Spinner](https://www.heroui.com/docs/react/migration/spinner): Migration guide for Spinner from HeroUI v2 to v3
- [Switch](https://www.heroui.com/docs/react/migration/switch): Migration guide for Switch from HeroUI v2 to v3
- [Table](https://www.heroui.com/docs/react/migration/table): Migration guide for Table from HeroUI v2 to v3
- [Tabs](https://www.heroui.com/docs/react/migration/tabs): Migration guide for Tabs from HeroUI v2 to v3
- [TimeInput](https://www.heroui.com/docs/react/migration/timeinput): Migration guide for TimeInput to TimeField from HeroUI v2 to v3
- [Toast](https://www.heroui.com/docs/react/migration/toast): Migration guide for Toast from HeroUI v2 to v3
- [Tooltip](https://www.heroui.com/docs/react/migration/tooltip): Migration guide for Tooltip from HeroUI v2 to v3
- [User](https://www.heroui.com/docs/react/migration/user): Migration guide for User from HeroUI v2 to v3

### Native

- [All Components](https://www.heroui.com/docs/native/components): Explore the full list of components available in HeroUI Native. More are on the way.
- [Introduction](https://www.heroui.com/docs/native/getting-started): An open-source UI component library for building beautiful and accessible user interfaces.
- [Beta 10](https://www.heroui.com/docs/native/releases/beta-10): Bottom Sheet component, PressableFeedback refactor, Animation API State Prop extension, use-theme-color multiple colors selection, and bug fixes.
- [Beta 11](https://www.heroui.com/docs/native/releases/beta-11): Enhanced Bottom Sheet close coordination, Dialog swipe-to-dismiss fixes, TextField improvements, and PortalHost export for advanced use cases
- [Beta 12](https://www.heroui.com/docs/native/releases/beta-12): InputOTP, Label, and Description components, Popover close fixes, controlled state improvements, border radius fixes, and variant style prop support
- [Beta 13](https://www.heroui.com/docs/native/releases/beta-13): TextArea component, Button outline variant, Tabs improvements, form component decomposition, popup animation refactor, style class exports, and critical bug fixes
- [All Releases](https://www.heroui.com/docs/native/releases): All updates and changes to HeroUI Native, including new features, fixes, and breaking changes.
- [RC 1](https://www.heroui.com/docs/native/releases/rc-1): Alert component, standalone Radio component, Select TriggerIndicator, HeroUINativeProviderRaw, disableFullWindowOverlay prop, styles prop expansion, theme surface refactor
- [RC 2](https://www.heroui.com/docs/native/releases/rc-2): SearchField, ListGroup, and Slider components, Select multi-selection mode, Button feedback API refactor, peer dependency relaxation
- [RC 3](https://www.heroui.com/docs/native/releases/rc-3): TagGroup, Menu, and InputGroup components, Bottom Sheet Android back press fix, Expo 55 compatibility
- [RC 4](https://www.heroui.com/docs/native/releases/rc-4): SubMenu component, Slider Output composition, PressableFeedback ripple fix, Bottom Sheet back handler fix
- [v1.0.0](https://www.heroui.com/docs/native/releases/v1-0-0): LinkButton component, sub-menu conflict resolution, optional @gorhom/bottom-sheet, ThemeColorValue branded type
- [v1.0.1](https://www.heroui.com/docs/native/releases/v1-0-1): Toast race condition fix, disabled state styling with disabled modifier, backdrop style variable
- [v1.0.2](https://www.heroui.com/docs/native/releases/v1-0-2): asChild slot pattern for PressableFeedback and Surface, Portal accessibility modal prop, Button Android variant fix, Input and Select style refinements
- [Button](https://www.heroui.com/docs/native/components/button): Interactive component that triggers an action when pressed.
- [CloseButton](https://www.heroui.com/docs/native/components/close-button): Button component for closing dialogs, modals, or dismissing content.
- [LinkButton](https://www.heroui.com/docs/native/components/link-button): A ghost-variant button with no highlight feedback, designed for inline link-style interactions.
- [Menu](https://www.heroui.com/docs/native/components/menu): A floating context menu with positioning, selection groups, and multiple presentation modes.
- [TagGroup](https://www.heroui.com/docs/native/components/tag-group): A compound component for displaying and managing selectable tags with optional removal.
- [Slider](https://www.heroui.com/docs/native/components/slider): A draggable input for selecting a value or range within a bounded interval.
- [Switch](https://www.heroui.com/docs/native/components/switch): A toggle control that allows users to switch between on and off states.
- [Chip](https://www.heroui.com/docs/native/components/chip): Displays a compact element in a capsule shape.
- [Alert](https://www.heroui.com/docs/native/components/alert): Displays important messages and notifications to users with status indicators.
- [SkeletonGroup](https://www.heroui.com/docs/native/components/skeleton-group): Coordinates multiple skeleton loading placeholders with centralized animation control.
- [Skeleton](https://www.heroui.com/docs/native/components/skeleton): Displays a loading placeholder with shimmer or pulse animation effects.
- [Spinner](https://www.heroui.com/docs/native/components/spinner): Displays an animated loading indicator.
- [Checkbox](https://www.heroui.com/docs/native/components/checkbox): A selectable control that allows users to toggle between checked and unchecked states.
- [ControlField](https://www.heroui.com/docs/native/components/control-field): A field component that combines a label, description (or other content), and a control component (Switch or Checkbox) into a single pressable area.
- [Description](https://www.heroui.com/docs/native/components/description): Text component for providing accessible descriptions and helper text for form fields and other UI elements.
- [FieldError](https://www.heroui.com/docs/native/components/field-error): Displays validation error message content with smooth animations.
- [InputGroup](https://www.heroui.com/docs/native/components/input-group): A compound layout component that groups an input with optional prefix and suffix decorators.
- [InputOTP](https://www.heroui.com/docs/native/components/input-otp): Input component for entering one-time passwords (OTP) with individual character slots, animations, and validation support.
- [Input](https://www.heroui.com/docs/native/components/input): A text input component with styled border and background for collecting user input.
- [Label](https://www.heroui.com/docs/native/components/label): Text component for labeling form fields and other UI elements with support for required indicators and validation states.
- [RadioGroup](https://www.heroui.com/docs/native/components/radio-group): A set of radio buttons where only one option can be selected at a time.
- [SearchField](https://www.heroui.com/docs/native/components/search-field): A compound search input for filtering and querying content.
- [Select](https://www.heroui.com/docs/native/components/select): Displays a list of options for the user to pick from — triggered by a button.
- [TextArea](https://www.heroui.com/docs/native/components/text-area): A multiline text input component with styled border and background for collecting longer user input.
- [TextField](https://www.heroui.com/docs/native/components/text-field): A text input component with label, description, and error handling for collecting user input.
- [Card](https://www.heroui.com/docs/native/components/card): Displays a card container with flexible layout sections for structured content.
- [Separator](https://www.heroui.com/docs/native/components/separator): A simple line to separate content visually.
- [Surface](https://www.heroui.com/docs/native/components/surface): Container component that provides elevation and background styling.
- [Avatar](https://www.heroui.com/docs/native/components/avatar): Displays a user avatar with support for images, text initials, or fallback icons.
- [Accordion](https://www.heroui.com/docs/native/components/accordion): A collapsible content panel for organizing information in a compact space
- [ListGroup](https://www.heroui.com/docs/native/components/list-group): A Surface-based container that groups related list items with consistent layout and spacing.
- [Tabs](https://www.heroui.com/docs/native/components/tabs): Organize content into tabbed views with animated transitions and indicators.
- [BottomSheet](https://www.heroui.com/docs/native/components/bottom-sheet): Displays a bottom sheet that slides up from the bottom with animated transitions and swipe-to-dismiss gestures.
- [Dialog](https://www.heroui.com/docs/native/components/dialog): Displays a modal overlay with animated transitions and gesture-based dismissal.
- [Popover](https://www.heroui.com/docs/native/components/popover): Displays a floating content panel anchored to a trigger element with placement and alignment options.
- [Toast](https://www.heroui.com/docs/native/components/toast): Displays temporary notification messages that appear at the top or bottom of the screen.
- [PressableFeedback](https://www.heroui.com/docs/native/components/pressable-feedback): Container component that provides visual feedback for press interactions with automatic scale animation.
- [ScrollShadow](https://www.heroui.com/docs/native/components/scroll-shadow): Adds dynamic gradient shadows to scrollable content based on scroll position and overflow.
- [Animation](https://www.heroui.com/docs/native/getting-started/animation): Add smooth animations and transitions to HeroUI Native components
- [Colors](https://www.heroui.com/docs/native/getting-started/colors): Color palette and theming system for HeroUI Native
- [Composition](https://www.heroui.com/docs/native/getting-started/composition): Build flexible UI with component composition patterns
- [Portal](https://www.heroui.com/docs/native/getting-started/portal)
- [Provider](https://www.heroui.com/docs/native/getting-started/provider): Configure HeroUI Native provider with text, animation, and toast settings
- [Styling](https://www.heroui.com/docs/native/getting-started/styling): Style HeroUI Native components with Tailwind or StyleSheet API
- [Theming](https://www.heroui.com/docs/native/getting-started/theming): Customize HeroUI Native's design system with CSS variables and global styles
- [Design Principles](https://www.heroui.com/docs/native/getting-started/design-principles): Core principles that guide HeroUI v3's design and development
- [Quick Start](https://www.heroui.com/docs/native/getting-started/quick-start): Get started with HeroUI Native in minutes
- [Agent Skills](https://www.heroui.com/docs/native/getting-started/agent-skills): Enable AI assistants to build mobile UIs with HeroUI Native components
- [AGENTS.md](https://www.heroui.com/docs/native/getting-started/agents-md): Download HeroUI Native documentation for AI coding agents
- [LLMs.txt](https://www.heroui.com/docs/native/getting-started/llms-txt): Enable AI assistants like Claude, Cursor, and Windsurf to understand HeroUI Native
- [MCP Server](https://www.heroui.com/docs/native/getting-started/mcp-server): Access HeroUI Native documentation directly in your AI assistant