# All Components **Category**: native **URL**: https://v3.heroui.com/en/docs/native/components **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/native/components/index.mdx > Explore the full list of components available in HeroUI Native. More are on the way. ## Buttons ## Collections ## Controls ## Forms ## Navigation ## Overlays ## Feedback ## Layout ## Media ## Data Display ## Typography ## Utilities # Introduction **Category**: native **URL**: https://v3.heroui.com/en/docs/native/getting-started **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/native/getting-started/index.mdx > An open-source UI component library for building beautiful and accessible user interfaces. HeroUI Native is a React Native component library built on [Tailwind v4](https://tailwindcss.com/blog/tailwindcss-v4) via [Uniwind](https://uniwind.dev/) and modern mobile development technologies. Every component comes with smooth animations, polished details, and built-in accessibility—ready to use, fully customizable. ## HeroUI Ecosystem * **🌐 HeroUI v3** (web) — React components with Tailwind CSS v4 * **📱 HeroUI Native (mobile)** — Beautiful components for React Native * **🤖 [HeroUI Chat](https://heroui.chat?ref=heroui-v3)** (text-to-app) — Create apps with natural language * **🧠 UI for LLMs** — New platform & MCPs coming soon ## FAQ **Is HeroUI Native free?** Yes, completely free and open source under the Apache License 2.0. **Is it production-ready?** Yes, HeroUI Native is production-ready and actively used in production apps. **Can I customize the components?** Yes! Update default styles, animations or compose component parts differently. Every slot is customizable. **Does it work with TypeScript?** Fully typed with excellent IDE support and autocompletion. **What about accessibility?** Accessibility follows mobile development best practices with proper focus management, touch accessibility, and screen reader support built into every component. **Is there a Figma file?** Yes! Access our design system at [HeroUI Figma Kit V3](https://www.figma.com/community/file/1546526812159103429). ## Get Involved Join the community, share feedback, or contribute: * [GitHub Discussions](https://github.com/heroui-inc/heroui-native/discussions) * [Discord](https://discord.gg/9b6yyZKmH4) * [X/Twitter](https://x.com/hero_ui) * [Contributing Guidelines](https://github.com/heroui-inc/heroui-native/blob/main/CONTRIBUTING.md) HeroUI Native is released under the [Apache License 2.0](https://github.com/heroui-inc/heroui-native/blob/main/LICENSE). # Beta 10 **Category**: native **URL**: https://v3.heroui.com/en/docs/native/releases/beta-10 **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/native/releases/beta-10.mdx > Bottom Sheet component, PressableFeedback refactor, Animation API State Prop extension, use-theme-color multiple colors selection, and bug fixes.
December 30, 2025
This release introduces the new [Bottom Sheet](/docs/native/components/bottom-sheet) component, refactors [PressableFeedback](/docs/native/components/pressable-feedback) with improved API, extends the Animation API with State Prop support, enhances the `use-theme-color` hook to handle multiple colors selection, and includes various bug fixes and documentation improvements. ## Installation Update to the latest version: ```bash npm i heroui-native@beta ``` ```bash pnpm add heroui-native@beta ``` ```bash yarn add heroui-native@beta ``` ```bash bun add heroui-native@beta ``` **Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI Native to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI Native MCP Server](/docs/native/getting-started/mcp-server). ## What's New ### New Components #### Bottom Sheet This release introduces the **Bottom Sheet** component, a versatile overlay component that slides up from the bottom of the screen with animated transitions and swipe-to-dismiss gestures. **Features:** * Smooth animated transitions with gesture support * Multiple snap points for flexible sizing * Detached mode for custom positioning * Customizable overlay with blur effects * Full accessibility support * Built on [@gorhom/bottom-sheet](https://gorhom.dev/react-native-bottom-sheet) **Usage:** ```tsx import { BottomSheet, Button } from 'heroui-native'; Title Description ``` For complete documentation and examples, see the [Bottom Sheet component page](/docs/native/components/bottom-sheet). **Related PR:** [#174](https://github.com/heroui-inc/heroui-native/pull/174) ## Component Improvements ### PressableFeedback Refactor The [PressableFeedback](/docs/native/components/pressable-feedback) component has been refactored with an improved API and better animation control. **Improvements:** * Enhanced animation configuration API * Better support for custom animation states * Improved performance and smoother animations * More flexible feedback positioning options The component maintains backward compatibility while providing more control over press feedback animations. **Related PR:** [#182](https://github.com/heroui-inc/heroui-native/pull/182) ## API Enhancements ### Animation API State Prop Extension The Animation API has been extended with a new `state` prop that allows you to disable animations while customizing properties. This provides more granular control over animation behavior. **New Capability:** ```tsx ``` The `state` prop can be: * `'disabled'`: Disable animations while still allowing property customization * `'disable-all'`: Disable all animations including children * `boolean`: Simple enable/disable control This enhancement makes it easier to customize animation properties without enabling animations, useful for fine-tuning component behavior. **Related PR:** [#176](https://github.com/heroui-inc/heroui-native/pull/176) ### use-theme-color Multiple Colors Selection The `use-theme-color` hook has been refactored to handle multiple colors selection, making it more flexible and powerful for theme customization. **Enhancement:** * Support for selecting multiple colors at once * Improved color selection logic * Better performance when working with multiple color values This improvement makes it easier to work with complex theming scenarios where multiple colors need to be selected and applied together. **Related PR:** [#170](https://github.com/heroui-inc/heroui-native/pull/170) ## Documentation ### Animated Styles Guide Comments Added comprehensive comments and documentation to the Animated Styles Guide, making it easier for developers to understand and use animation features effectively. **Improvements:** * Enhanced code examples with detailed comments * Better explanation of animation patterns * Clearer guidance on when to use different animation approaches **Related PR:** [#179](https://github.com/heroui-inc/heroui-native/pull/179) ## Bug Fixes This release includes fixes for the following issues: * **[Issue #173](https://github.com/heroui-inc/heroui-native/issues/173)**: Fixed issue where `classNames={{container:"bg-x"}}` was not working for styling the backgroundColor of TextField.Input container * **[Issue #177](https://github.com/heroui-inc/heroui-native/issues/177)**: Fixed button scale animation issue where the scale would sometimes stay at 0.9x and not bounce back after being pressed * **[Issue #178](https://github.com/heroui-inc/heroui-native/issues/178)**: Fixed bug affecting component functionality ## Updated Documentation The following documentation pages have been updated to reflect the changes in this release: * [Animation Guide](/docs/native/getting-started/animation) - Updated with Animation API State Prop documentation * [Colors Guide](/docs/native/getting-started/colors) - Updated with use-theme-color multiple colors selection information * [PressableFeedback Component](/docs/native/components/pressable-feedback) - Updated with refactored API documentation ## Links * [Component Documentation](../components) * [GitHub Repository](https://github.com/heroui-inc/heroui-native) ## Contributors Thanks to everyone who contributed to this release! # Beta 11 **Category**: native **URL**: https://v3.heroui.com/en/docs/native/releases/beta-11 **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/native/releases/beta-11.mdx > Enhanced Bottom Sheet close coordination, Dialog swipe-to-dismiss fixes, TextField improvements, and PortalHost export for advanced use cases
January 6, 2026
Beta 11 focuses on improving component reliability and developer experience across several key areas. This release enhances Bottom Sheet close coordination to ensure consistent behavior across all close mechanisms, fixes Dialog swipe-to-dismiss gesture handling issues, resolves TextField styling and functionality problems, and introduces a new PortalHost export for advanced portal mounting scenarios. These improvements make interactions smoother and provide developers with more control over component behavior. ## Installation Update to the latest version: ```bash npm i heroui-native@beta ``` ```bash pnpm add heroui-native@beta ``` ```bash yarn add heroui-native@beta ``` ```bash bun add heroui-native@beta ``` **Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI Native to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI Native MCP Server](/docs/native/getting-started/mcp-server). ## Try It on Your Device ## Component Improvements ### Bottom Sheet Close Coordination Enhancement The [Bottom Sheet](/docs/native/components/bottom-sheet) component has been enhanced with improved close coordination across all close mechanisms. **Improvements:** * Enhanced synchronization between swipe-to-dismiss, overlay press, close button, and programmatic close actions * Improved state management to prevent race conditions during close operations * More reliable `onOpenChange` callback firing across all close scenarios * Better coordination between animation progress and close state transitions The Bottom Sheet component supports multiple ways to close: swiping down, pressing the overlay, clicking the close button, or programmatically calling close. Previously, these mechanisms could sometimes conflict or produce inconsistent behavior. This update ensures all close mechanisms work harmoniously together, providing a smoother and more predictable user experience. **Related PR:** [#201](https://github.com/heroui-inc/heroui-native/pull/201) ### Dialog Swipe-to-Dismiss Gesture Handling Fix The [Dialog](/docs/native/components/dialog) component has been fixed to properly handle swipe-to-dismiss gestures. **Improvements:** * Fixed gesture detection and handling for swipe-to-dismiss functionality * Improved gesture state management during swipe interactions * Enhanced animation coordination during gesture release * More reliable dismissal when swiping beyond the threshold The Dialog component supports swipe-to-dismiss functionality, allowing users to dismiss dialogs by swiping down. This fix resolves issues where gesture handling could become unresponsive or produce unexpected behavior during swipe interactions. **Related PR:** [#193](https://github.com/heroui-inc/heroui-native/pull/193) ### TextField Styling and Functionality Fixes The [TextField](/docs/native/components/text-field) component has been fixed to resolve styling and functionality issues. **Improvements:** * Fixed input styling inconsistencies * Resolved animation state management issues * Improved focus and blur state handling * Enhanced error state visual feedback * Fixed placeholder and selection color application These fixes ensure the TextField component displays correctly across all states (focused, blurred, invalid) and provides consistent visual feedback to users. **Related PR:** [#202](https://github.com/heroui-inc/heroui-native/pull/202) ## API Enhancements ### PortalHost Export for Advanced Use Cases The `PortalHost` component is now exported from the main provider module, enabling advanced portal host mounting scenarios. **New Capability:** ```tsx import { HeroUINativeProvider, PortalHost } from "@heroui/native"; export function CustomLayout() { return ( <> {/* Your app content */} {/* Manually mount PortalHost in a custom location */} ); } ``` This enhancement allows developers to manually mount portal hosts in custom layouts, which is particularly useful for scenarios where you need portals to render in specific locations (e.g., within BottomSheet, Modal, or other overlay components). By default, `HeroUINativeProvider` includes a `PortalHost` for standard use cases, but now you can create additional hosts with custom names for advanced scenarios. **Use Cases:** * Mounting portals within BottomSheet components * Creating portal hosts in Modal components * Custom overlay rendering scenarios * Multi-host portal architectures **Related PR:** [#185](https://github.com/heroui-inc/heroui-native/pull/185) ## Bug Fixes This release includes fixes for the following issues: * **[Issue #187](https://github.com/heroui-inc/heroui-native/issues/187)**: Fixed an issue where multiple presses were required to re-open a bottom sheet or dialog after it was dismissed via swipe gesture. The internal state now properly synchronizes with the close animation, allowing immediate reopening regardless of how the component was closed. * **[Issue #189](https://github.com/heroui-inc/heroui-native/issues/189)**: Fixed app freezing when swiping to dismiss dialogs containing text inputs. * **[Issue #196](https://github.com/heroui-inc/heroui-native/issues/196)**: Fixed TextField multiline input behavior to match React Native's TextInput multiline functionality. * **[Issue #199](https://github.com/heroui-inc/heroui-native/issues/199)**: Fixed placeholder text positioning within TextField Input component. **Related PRs:** * [#201](https://github.com/heroui-inc/heroui-native/pull/201) * [#202](https://github.com/heroui-inc/heroui-native/pull/202) * [#193](https://github.com/heroui-inc/heroui-native/pull/193) ## Links * [Component Documentation](../components) * [GitHub Repository](https://github.com/heroui-inc/heroui-native) ## Contributors Thanks to everyone who contributed to this release! # Beta 12 **Category**: native **URL**: https://v3.heroui.com/en/docs/native/releases/beta-12 **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/native/releases/beta-12.mdx > InputOTP, Label, and Description components, Popover close fixes, controlled state improvements, border radius fixes, and variant style prop support
January 13, 2026
Beta 12 introduces three essential form components—InputOTP, Label, and Description—that enhance form building capabilities in React Native applications. This release also includes critical fixes for Popover close behavior, popup controlled state management, border radius configuration, and adds variant style prop support across multiple form components. These improvements provide developers with more robust form components and better control over component styling and behavior. ## Installation Update to the latest version: ```bash npm i heroui-native@beta ``` ```bash pnpm add heroui-native@beta ``` ```bash yarn add heroui-native@beta ``` ```bash bun add heroui-native@beta ``` **Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI Native to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI Native MCP Server](/docs/native/getting-started/mcp-server). ## Try It on Your Device ## What's New ### New Components This release introduces **3 new** essential form components: * **[InputOTP](/docs/native/components/input-otp)**: Input component for entering one-time passwords (OTP) with individual character slots, animations, and validation support. * **[Label](/docs/native/components/label)**: Text component for labeling form fields and other UI elements with support for required indicators and validation states. * **[Description](/docs/native/components/description)**: Text component for providing accessible descriptions and helper text for form fields and other UI elements. #### InputOTP The InputOTP component provides a complete solution for one-time password input scenarios, such as two-factor authentication, verification codes, and PIN entry. It features individual character slots with smooth animations, customizable grouping, separators, and comprehensive validation support. **Features:** * Individual character slots with smooth animations and caret indicators * Flexible grouping with separators for visual organization * Pattern-based input restriction (digits, characters, or custom regex) * Controlled and uncontrolled value management * Validation state support with visual feedback * Customizable placeholder characters per slot position * Paste support with transformer function * Complete accessibility support **Usage:** ```tsx import { InputOTP, Label, Description } from "heroui-native"; export function Example() { return ( <> console.log(code)}> We've sent a code to your email ); } ``` For complete documentation and examples, see the [InputOTP component page](/docs/native/components/input-otp). **Related PR:** [#214](https://github.com/heroui-inc/heroui-native/pull/214) #### Label The Label component provides accessible labeling for form fields with built-in support for required indicators, validation states, and disabled states. It automatically displays an asterisk for required fields and adapts its styling based on the field's validation state. **Features:** * Automatic required field indicator (asterisk) * Invalid state styling for validation errors * Disabled state support * Compound component architecture for custom layouts * Full accessibility support with nativeID linking * Customizable styling via className, classNames, and styles props **Usage:** ```tsx import { Label, TextField } from "heroui-native"; export function Example() { return ( ); } ``` For complete documentation and examples, see the [Label component page](/docs/native/components/label). **Related PR:** [#214](https://github.com/heroui-inc/heroui-native/pull/214) #### Description The Description component provides accessible helper text and descriptions for form fields. It features muted styling by default and supports linking to form fields via nativeID for screen reader support. **Features:** * Muted text styling optimized for helper text * Accessibility linking via nativeID and aria-describedby * Seamless integration with form components * Customizable styling support **Usage:** ```tsx import { Description, TextField } from "heroui-native"; export function Example() { return ( Email address We'll never share your email with anyone else. ); } ``` For complete documentation and examples, see the [Description component page](/docs/native/components/description). **Related PR:** [#214](https://github.com/heroui-inc/heroui-native/pull/214) ## Component Improvements ### Popover Close via Ref Fix The [Popover](/docs/native/components/popover) component has been fixed to properly handle programmatic close operations via ref. **Improvements:** * Fixed ref-based close method to properly trigger close animations * Improved state synchronization between ref calls and component state * Enhanced reliability of programmatic close operations This fix ensures that when developers call `popoverRef.current?.close()`, the popover closes reliably with proper animation and state management. **Related PR:** [#207](https://github.com/heroui-inc/heroui-native/pull/207) ### Popup Controlled State Fix Popup components (including Dialog, Bottom Sheet, and Popover) have been fixed to properly handle controlled state via the `isOpen` prop. **Improvements:** * Fixed controlled state synchronization for popup components * Improved handling of external state changes * Enhanced reliability when using controlled mode This fix ensures that popup components correctly respond to external state changes when using controlled mode, providing developers with more predictable behavior when managing popup state externally. **Related PR:** [#215](https://github.com/heroui-inc/heroui-native/pull/215) ### Button, Chip, and Tabs Border Radius Fix The [Button](/docs/native/components/button), [Chip](/docs/native/components/chip), and [Tabs](/docs/native/components/tabs) components have been fixed to properly respect global border radius configuration. **Improvements:** * Fixed border radius configuration application for Button component * Fixed border radius configuration application for Chip component * Fixed border radius configuration application for Tabs component * Improved consistency across components using global theme configuration These fixes ensure that global border radius settings defined in the theme configuration are properly applied to Button, Chip, and Tabs components, providing consistent styling across the application. **Related PR:** [#218](https://github.com/heroui-inc/heroui-native/pull/218) ### TextField.Input Props Cleanup The [TextField](/docs/native/components/text-field) component's Input subcomponent has been cleaned up by removing the `animation` and `isAnimatedStyleActive` props. **Changes:** * Removed `animation` prop from TextField.Input * Removed `isAnimatedStyleActive` prop from TextField.Input * Simplified component API for better maintainability These props were removed to streamline the TextField.Input API and reduce complexity. Animation behavior is now handled internally by the component, providing a more consistent and predictable experience without requiring manual animation configuration. **Related PR:** [#220](https://github.com/heroui-inc/heroui-native/pull/220) ## API Enhancements ### HeroUINativeProvider devInfo Configuration The `HeroUINativeProvider` component now supports `devInfo` configuration options for enhanced development experience. **New Capability:** ```tsx import { HeroUINativeProvider } from "heroui-native"; export function App() { return ( {/* Your app content */} ); } ``` This enhancement provides developers with additional configuration options for development and debugging scenarios, making it easier to troubleshoot and optimize applications during development. **Related PR:** [#217](https://github.com/heroui-inc/heroui-native/pull/217) ### Variant Style Prop Support The [Checkbox](/docs/native/components/checkbox), [Radio](/docs/native/components/radio), [TextField](/docs/native/components/text-field), and [InputOTP](/docs/native/components/input-otp) components now support the `variant` style prop for easier variant customization. **New Capability:** ```tsx import { Checkbox, Radio, TextField, InputOTP } from "heroui-native"; // Apply variant styles directly via style prop Option 1 Option 2 ``` This enhancement provides developers with more flexibility when customizing component variants, allowing variant changes to be applied via the style prop in addition to the component's variant prop. **Related PR:** [#220](https://github.com/heroui-inc/heroui-native/pull/220) ## Style Fixes ### Border Radius Configuration Fixed global border radius configuration not applying correctly to certain components. **Fixes:** * Fixed Button component not respecting global border radius configuration * Fixed Chip component border radius application * Fixed Tabs component border radius application ### Style Optimizations * **Border Radius Consistency**: Improved consistency of border radius application across Button, Chip, and Tabs components * **Theme Configuration**: Enhanced theme configuration propagation to ensure all components respect global settings ## Bug Fixes This release includes fixes for the following issues: * **[Issue #93](https://github.com/heroui-inc/heroui-native/issues/93)**: Fixed global border radius configuration not applying to Button component in hero-ui-native using Unwind. The Button component now properly respects border radius settings defined in the global theme configuration, ensuring consistent styling across the application. * **[Issue #213](https://github.com/heroui-inc/heroui-native/issues/213)**: Fixed Select controlled mode (`isOpen`) not working. The Select component now properly handles controlled state when the `isOpen` prop is provided, allowing developers to manage Select open/close state externally with predictable behavior. **Related PRs:** * [#218](https://github.com/heroui-inc/heroui-native/pull/218) * [#215](https://github.com/heroui-inc/heroui-native/pull/215) ## Links * [Component Documentation](../components) * [GitHub Repository](https://github.com/heroui-inc/heroui-native) ## Contributors Thanks to everyone who contributed to this release! # Beta 13 **Category**: native **URL**: https://v3.heroui.com/en/docs/native/releases/beta-13 **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/native/releases/beta-13.mdx > TextArea component, Button outline variant, Tabs improvements, form component decomposition, popup animation refactor, style class exports, and critical bug fixes
February 3, 2026
Beta 13 introduces the TextArea component for multiline text input, adds Button outline variant, and exports style class names for all components. This release also includes significant improvements to Tabs with better animations and clearer variant naming, decomposes form components into standalone primitives for better flexibility, refactors popup animation system for improved consistency and Android compatibility, and fixes critical issues including Chinese character input handling, theme color calculations, Uniwind Pro compatibility, BottomSheet opening issues, and tree-shaking support. These updates enhance developer experience and component reliability across the library. ## Installation Update to the latest version: ```bash npm i heroui-native@beta ``` ```bash pnpm add heroui-native@beta ``` ```bash yarn add heroui-native@beta ``` ```bash bun add heroui-native@beta ``` **Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI Native to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI Native MCP Server](/docs/native/getting-started/mcp-server). ## Try It on Your Device ## What's New ### New Components This release introduces **3 new** essential components: * **[TextArea](/docs/native/components/text-area)**: Multiline text input component with styled border and background for collecting longer user input. * **[Input](/docs/native/components/input)**: Single-line text input component with styled border and background, now available as a standalone component separate from TextField. * **[CloseButton](/docs/native/components/close-button)**: Reusable button component for closing dialogs, modals, or dismissing content with consistent styling across overlay components. #### TextArea The TextArea component provides a complete solution for multiline text input scenarios, such as comments, messages, descriptions, and longer form fields. It features seamless integration with TextField for complete form structure, validation state support, and customizable variants for different visual contexts. **Features:** * Multiline text input with customizable rows * Seamless integration with TextField component * Validation state support with visual feedback * Primary and secondary variants for different contexts * Disabled and read-only states * Customizable styling via className and styles props * Complete accessibility support **Usage:** ```tsx import { Description, Label, TextArea, TextField } from "heroui-native"; export function Example() { return (