# 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://v3.heroui.com/react/llms.txt) - React component library for web applications
- **React Native**: [/native/llms.txt](https://v3.heroui.com/native/llms.txt) - React Native component library for mobile applications

## Documentation Index

### React

- [All Components](https://v3.heroui.com/docs/react/components): Explore the full list of components available in the library. More are on the way.
- [Introduction](https://v3.heroui.com/docs/react/getting-started): An open-source UI component library for building beautiful and accessible user interfaces.
- [All Releases](https://v3.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://v3.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://v3.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://v3.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://v3.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://v3.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://v3.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://v3.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.
- [ButtonGroup](https://v3.heroui.com/docs/react/components/button-group): Group related buttons together with consistent styling and spacing
- [Button](https://v3.heroui.com/docs/react/components/button): A clickable button component with multiple variants and states
- [CloseButton](https://v3.heroui.com/docs/react/components/close-button): Button component for closing dialogs, modals, or dismissing content
- [Dropdown](https://v3.heroui.com/docs/react/components/dropdown): A dropdown displays a list of actions or options that a user can choose
- [ListBox](https://v3.heroui.com/docs/react/components/listbox): A listbox displays a list of options and allows a user to select one or more of them
- [TagGroup](https://v3.heroui.com/docs/react/components/tag-group): A focusable list of tags with support for keyboard navigation, selection, and removal
- [Slider](https://v3.heroui.com/docs/react/components/slider): A slider allows a user to select one or more values within a range
- [Switch](https://v3.heroui.com/docs/react/components/switch): A toggle switch component for boolean states
- [Chip](https://v3.heroui.com/docs/react/components/chip): Small informational badges for displaying labels, statuses, and categories
- [Alert](https://v3.heroui.com/docs/react/components/alert): Display important messages and notifications to users with status indicators
- [Skeleton](https://v3.heroui.com/docs/react/components/skeleton): Skeleton is a placeholder to show a loading state and the expected shape of a component.
- [Spinner](https://v3.heroui.com/docs/react/components/spinner): A loading indicator component to show pending states
- [CheckboxGroup](https://v3.heroui.com/docs/react/components/checkbox-group): A checkbox group component for managing multiple checkbox selections
- [Checkbox](https://v3.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.
- [DateField](https://v3.heroui.com/docs/react/components/date-field): Date input field with labels, descriptions, and validation built on React Aria DateField
- [Description](https://v3.heroui.com/docs/react/components/description): Provides supplementary text for form fields and other components
- [ErrorMessage](https://v3.heroui.com/docs/react/components/error-message): A low-level error message component for displaying errors
- [FieldError](https://v3.heroui.com/docs/react/components/field-error): Displays validation error messages for form fields
- [Fieldset](https://v3.heroui.com/docs/react/components/fieldset): Group related form controls with legends, descriptions, and actions
- [Form](https://v3.heroui.com/docs/react/components/form): Wrapper component for form validation and submission handling
- [InputGroup](https://v3.heroui.com/docs/react/components/input-group): Group related input controls with prefix and suffix elements for enhanced form fields
- [InputOTP](https://v3.heroui.com/docs/react/components/input-otp): A one-time password input component for verification codes and secure authentication
- [Input](https://v3.heroui.com/docs/react/components/input): Primitive single-line text input component that accepts standard HTML attributes
- [Label](https://v3.heroui.com/docs/react/components/label): Renders an accessible label associated with form controls
- [NumberField](https://v3.heroui.com/docs/react/components/number-field): Number input fields with increment/decrement buttons, validation, and internationalized formatting
- [RadioGroup](https://v3.heroui.com/docs/react/components/radio-group): Radio group for selecting a single option from a list
- [SearchField](https://v3.heroui.com/docs/react/components/search-field): Search input field with clear button and search icon
- [TextField](https://v3.heroui.com/docs/react/components/text-field): Composition-friendly text fields with labels, descriptions, and inline validation
- [TextArea](https://v3.heroui.com/docs/react/components/textarea): Primitive multiline text input component that accepts standard HTML attributes
- [TimeField](https://v3.heroui.com/docs/react/components/time-field): Time input field with labels, descriptions, and validation built on React Aria TimeField
- [Card](https://v3.heroui.com/docs/react/components/card): Flexible container component for grouping related content and actions
- [Separator](https://v3.heroui.com/docs/react/components/separator): Visually divide content sections
- [Surface](https://v3.heroui.com/docs/react/components/surface): Container component that provides surface-level styling and context for child components
- [Avatar](https://v3.heroui.com/docs/react/components/avatar): Display user profile images with customizable fallback content
- [Accordion](https://v3.heroui.com/docs/react/components/accordion): A collapsible content panel for organizing information in a compact space
- [DisclosureGroup](https://v3.heroui.com/docs/react/components/disclosure-group): Container that manages multiple Disclosure items with coordinated expanded states
- [Disclosure](https://v3.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://v3.heroui.com/docs/react/components/link): A styled anchor component for navigation with built-in icon support
- [Tabs](https://v3.heroui.com/docs/react/components/tabs): Tabs organize content into multiple sections and allow users to navigate between them.
- [Alert Dialog](https://v3.heroui.com/docs/react/components/alert-dialog): Modal dialog for critical confirmations requiring user attention and explicit action
- [Modal](https://v3.heroui.com/docs/react/components/modal): Dialog overlay for focused user interactions and important content
- [Popover](https://v3.heroui.com/docs/react/components/popover): Displays rich content in a portal triggered by a button or any custom element
- [Tooltip](https://v3.heroui.com/docs/react/components/tooltip): Displays informative text when users hover over or focus on an element
- [ComboBox](https://v3.heroui.com/docs/react/components/combobox): 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://v3.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://v3.heroui.com/docs/react/components/kbd): Display keyboard shortcuts and key combinations
- [Scroll Shadow](https://v3.heroui.com/docs/react/components/scroll-shadow): Apply visual shadows to indicate scrollable content overflow with automatic detection of scroll position.
- [Animation](https://v3.heroui.com/docs/react/getting-started/animation): Add smooth animations and transitions to HeroUI v3 components
- [Colors](https://v3.heroui.com/docs/react/getting-started/colors): Color palette and theming system for HeroUI v3
- [Composition](https://v3.heroui.com/docs/react/getting-started/composition): Build flexible UI with component composition patterns
- [Styling](https://v3.heroui.com/docs/react/getting-started/styling): Style HeroUI components with CSS, Tailwind, or CSS-in-JS
- [Theming](https://v3.heroui.com/docs/react/getting-started/theming): Customize HeroUI's design system with CSS variables and global styles
- [Design Principles](https://v3.heroui.com/docs/react/getting-started/design-principles): Core principles that guide HeroUI v3's design and development
- [Quick Start](https://v3.heroui.com/docs/react/getting-started/quick-start): Get started with HeroUI v3 in minutes
- [LLMs.txt](https://v3.heroui.com/docs/react/getting-started/llms-txt): Enable AI assistants like Claude, Cursor, and Windsurf to understand HeroUI v3
- [MCP Server](https://v3.heroui.com/docs/react/getting-started/mcp-server): Access HeroUI v3 documentation directly in your AI assistant

### Native

- [Introduction](https://v3.heroui.com/docs/native/getting-started): An open-source UI component library for building beautiful and accessible user interfaces.
- [All Components](https://v3.heroui.com/docs/native/components): Explore the full list of components available in HeroUI Native. More are on the way.
- [Animation](https://v3.heroui.com/docs/native/getting-started/animation): Add smooth animations and transitions to HeroUI Native components
- [Colors](https://v3.heroui.com/docs/native/getting-started/colors): Color palette and theming system for HeroUI Native
- [Composition](https://v3.heroui.com/docs/native/getting-started/composition): Build flexible UI with component composition patterns
- [Provider](https://v3.heroui.com/docs/native/getting-started/provider): Configure HeroUI Native provider with text, animation, and toast settings
- [Styling](https://v3.heroui.com/docs/native/getting-started/styling): Style HeroUI Native components with Tailwind or StyleSheet API
- [Theming](https://v3.heroui.com/docs/native/getting-started/theming): Customize HeroUI Native's design system with CSS variables and global styles
- [Design Principles](https://v3.heroui.com/docs/native/getting-started/design-principles): Core principles that guide HeroUI v3's design and development
- [Quick Start](https://v3.heroui.com/docs/native/getting-started/quick-start): Get started with HeroUI Native in minutes
- [LLMs.txt](https://v3.heroui.com/docs/native/getting-started/llms-txt): Enable AI assistants like Claude, Cursor, and Windsurf to understand HeroUI Native
- [MCP Server](https://v3.heroui.com/docs/native/getting-started/mcp-server): Access HeroUI Native documentation directly in your AI assistant
- [Button](https://v3.heroui.com/docs/native/components/button): Interactive component that triggers an action when pressed.
- [Chip](https://v3.heroui.com/docs/native/components/chip): Displays a compact element in a capsule shape.
- [ErrorView](https://v3.heroui.com/docs/native/components/error-view): Displays validation error message content with smooth animations.
- [SkeletonGroup](https://v3.heroui.com/docs/native/components/skeleton-group): Coordinates multiple skeleton loading placeholders with centralized animation control.
- [Skeleton](https://v3.heroui.com/docs/native/components/skeleton): Displays a loading placeholder with shimmer or pulse animation effects.
- [Spinner](https://v3.heroui.com/docs/native/components/spinner): Displays an animated loading indicator.
- [Checkbox](https://v3.heroui.com/docs/native/components/checkbox): A selectable control that allows users to toggle between checked and unchecked states.
- [FormField](https://v3.heroui.com/docs/native/components/form-field): Provides consistent layout and interaction for form controls with label, description, and error handling. Perfect for Switch and Checkbox components when you want the entire field to be pressable.
- [RadioGroup](https://v3.heroui.com/docs/native/components/radio-group): A set of radio buttons where only one option can be selected at a time.
- [Select](https://v3.heroui.com/docs/native/components/select): Displays a list of options for the user to pick from — triggered by a button.
- [Switch](https://v3.heroui.com/docs/native/components/switch): A toggle control that allows users to switch between on and off states.
- [TextField](https://v3.heroui.com/docs/native/components/text-field): A text input component with label, description, and error handling for collecting user input.
- [Card](https://v3.heroui.com/docs/native/components/card): Displays a card container with flexible layout sections for structured content.
- [Divider](https://v3.heroui.com/docs/native/components/divider): A simple line to separate content visually.
- [Surface](https://v3.heroui.com/docs/native/components/surface): Container component that provides elevation and background styling.
- [Avatar](https://v3.heroui.com/docs/native/components/avatar): Displays a user avatar with support for images, text initials, or fallback icons.
- [Accordion](https://v3.heroui.com/docs/native/components/accordion): A collapsible content panel for organizing information in a compact space
- [Tabs](https://v3.heroui.com/docs/native/components/tabs): Organize content into tabbed views with animated transitions and indicators.
- [Dialog](https://v3.heroui.com/docs/native/components/dialog): Displays a modal overlay with animated transitions and gesture-based dismissal.
- [Popover](https://v3.heroui.com/docs/native/components/popover): Displays a floating content panel anchored to a trigger element with placement and alignment options.
- [Toast](https://v3.heroui.com/docs/native/components/toast): Displays temporary notification messages that appear at the top or bottom of the screen.
- [PressableFeedback](https://v3.heroui.com/docs/native/components/pressable-feedback): Container component that provides visual feedback for press interactions with automatic scale animation.
- [ScrollShadow](https://v3.heroui.com/docs/native/components/scroll-shadow): Adds dynamic gradient shadows to scrollable content based on scroll position and overflow.