# HeroUI v3 Native Documentation

> Documentation for HeroUI Native component library.

HeroUI Native is a component library built on [Tailwind v4](https://tailwindcss.com/) 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.

**Key Features:**

- Beautiful by default - Professional look out of the box
- Accessible - Built with accessibility best practices
- Flexible - Customizable components with predictable patterns
- Developer-friendly - Fully typed APIs and excellent autocompletion

## Documentation Index

### Components

- [All Components](https://v3.heroui.com/docs/native/components): Explore the full list of components available in HeroUI Native. More are on the way.
- [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.

### Getting-started

- [Introduction](https://v3.heroui.com/docs/native/getting-started): An open-source UI component library for building beautiful and accessible user interfaces.
- [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