# HeroUI 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.

## Documentation Index

### Components

- [Button](./components/button/button.md): Interactive component that triggers an action when pressed.
- [CloseButton](./components/close-button/close-button.md): Button component for closing dialogs, modals, or dismissing content.
- [Menu](./components/menu/menu.md): A floating context menu with positioning, selection groups, and multiple presentation modes.
- [TagGroup](./components/tag-group/tag-group.md): A compound component for displaying and managing selectable tags with optional removal.
- [Slider](./components/slider/slider.md): A draggable input for selecting a value or range within a bounded interval.
- [Switch](./components/switch/switch.md): A toggle control that allows users to switch between on and off states.
- [Chip](./components/chip/chip.md): Displays a compact element in a capsule shape.
- [Alert](./components/alert/alert.md): Displays important messages and notifications to users with status indicators.
- [SkeletonGroup](./components/skeleton-group/skeleton-group.md): Coordinates multiple skeleton loading placeholders with centralized animation control.
- [Skeleton](./components/skeleton/skeleton.md): Displays a loading placeholder with shimmer or pulse animation effects.
- [Spinner](./components/spinner/spinner.md): Displays an animated loading indicator.
- [Checkbox](./components/checkbox/checkbox.md): A selectable control that allows users to toggle between checked and unchecked states.
- [ControlField](./components/control-field/control-field.md): A field component that combines a label, description (or other content), and a control component (Switch or Checkbox) into a single pressable area.
- [Description](./components/description/description.md): Text component for providing accessible descriptions and helper text for form fields and other UI elements.
- [FieldError](./components/field-error/field-error.md): Displays validation error message content with smooth animations.
- [InputGroup](./components/input-group/input-group.md): A compound layout component that groups an input with optional prefix and suffix decorators.
- [InputOTP](./components/input-otp/input-otp.md): Input component for entering one-time passwords (OTP) with individual character slots, animations, and validation support.
- [Input](./components/input/input.md): A text input component with styled border and background for collecting user input.
- [Label](./components/label/label.md): Text component for labeling form fields and other UI elements with support for required indicators and validation states.
- [RadioGroup](./components/radio-group/radio-group.md): A set of radio buttons where only one option can be selected at a time.
- [SearchField](./components/search-field/search-field.md): A compound search input for filtering and querying content.
- [Select](./components/select/select.md): Displays a list of options for the user to pick from — triggered by a button.
- [TextArea](./components/text-area/text-area.md): A multiline text input component with styled border and background for collecting longer user input.
- [TextField](./components/text-field/text-field.md): A text input component with label, description, and error handling for collecting user input.
- [Card](./components/card/card.md): Displays a card container with flexible layout sections for structured content.
- [Separator](./components/separator/separator.md): A simple line to separate content visually.
- [Surface](./components/surface/surface.md): Container component that provides elevation and background styling.
- [Avatar](./components/avatar/avatar.md): Displays a user avatar with support for images, text initials, or fallback icons.
- [Accordion](./components/accordion/accordion.md): A collapsible content panel for organizing information in a compact space
- [ListGroup](./components/list-group/list-group.md): A Surface-based container that groups related list items with consistent layout and spacing.
- [Tabs](./components/tabs/tabs.md): Organize content into tabbed views with animated transitions and indicators.
- [BottomSheet](./components/bottom-sheet/bottom-sheet.md): Displays a bottom sheet that slides up from the bottom with animated transitions and swipe-to-dismiss gestures.
- [Dialog](./components/dialog/dialog.md): Displays a modal overlay with animated transitions and gesture-based dismissal.
- [Popover](./components/popover/popover.md): Displays a floating content panel anchored to a trigger element with placement and alignment options.
- [Toast](./components/toast/toast.md): Displays temporary notification messages that appear at the top or bottom of the screen.
- [PressableFeedback](./components/pressable-feedback/pressable-feedback.md): Container component that provides visual feedback for press interactions with automatic scale animation.
- [ScrollShadow](./components/scroll-shadow/scroll-shadow.md): Adds dynamic gradient shadows to scrollable content based on scroll position and overflow.