# HeroUI Pro Documentation

> Premium React and React Native components, templates, and design systems for production applications.

HeroUI Pro extends HeroUI with polished application components, advanced data visualization, mobile components, and templates. A valid HeroUI Pro license is required for protected package source and skill downloads.

**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+ and Next.js for web components
- React Native with Uniwind for mobile components
- Tailwind CSS v4 for styling
- TypeScript for type safety

## Available Platforms

- **React (Web)**: [/react/llms.txt](https://heroui.pro/docs/react/llms.txt) - Premium application components for React
- **React Native**: [/native/llms.txt](https://heroui.pro/docs/native/llms.txt) - Premium mobile components and templates

## Documentation Index

### React

- [All Components](https://heroui.pro/docs/react/components): Explore the full list of Pro components available in HeroUI React. More are on the way.
- [Introduction](https://heroui.pro/docs/react/getting-started): Premium composable components that extend HeroUI — built for teams who want to ship beautiful, production-ready apps fast.
- [1.0.0-beta.1](https://heroui.pro/docs/react/releases/beta-1): The first public beta of HeroUI Pro React. 47 premium components, 4 production templates, premium themes, AI tooling, and full documentation.
- [1.0.0-beta.2](https://heroui.pro/docs/react/releases/beta-2): Vite/SSR compatibility fix, CLI improvements, peer dependency bump, and docs reorganization.
- [1.0.0-beta.3](https://heroui.pro/docs/react/releases/beta-3): Segment ghost variant + dynamic width, AppLayout content-scroll mode, FileTree checkboxes, EmojiReactionButton read-only, and keyboard support for PressableFeedback.
- [1.0.0-beta.4](https://heroui.pro/docs/react/releases/beta-4): New Agenda component with day, week, and month views, a Mouve theme, and a DataGrid column-toggle fix.
- [1.0.0-beta.5](https://heroui.pro/docs/react/releases/beta-5): New AI components for chat and agent interfaces, an upgraded Chat template, HeroUI 3.1.0 peer dependency support, and focused polish.
- [1.0.0-beta.6](https://heroui.pro/docs/react/releases/beta-6): Rich Text Editor and Timeline components, PromptInput layout API, Resizable pixel sizing, HeroUI 3.2.0 peer dependency support and focused polish across Agenda, Rating, and scroll surfaces.
- [1.0.0-beta.7](https://heroui.pro/docs/react/releases/beta-7): MapLibre-based Map component, RTL support through logical CSS properties, Navbar RouterProvider routing, Rich Text Editor link popover polish, and HeroUI 3.2.2 peer dependency support.
- [1.0.0-beta.8](https://heroui.pro/docs/react/releases/beta-8): Updated HeroUI Pro React and Native Figma files, a Sidebar page switcher, SSR-safe subpath imports for peer-heavy components, KPI chart tooltips, broader RTL support across Pro components, DataGrid type fixes, a MapLibre GL v6 upgrade, and dependency bumps to HeroUI 3.2.3 and tailwind-variants 3.3.0.
- [Design Systems](https://heroui.pro/docs/react/releases/design-systems): Import your brand, customize a complete HeroUI design system, use it in AI Chat, and export it to code.
- [Figma Plugin Sync](https://heroui.pro/docs/react/releases/figma-plugin-sync): Sync custom HeroUI themes from the Pro Style Guides into your Figma files — keeping supported design tokens aligned between code and design.
- [HeroUI Chat on the edge](https://heroui.pro/docs/react/releases/heroui-chat-edge): Faster generation, instant static previews, resumable sessions, in-chat theme editing, and separate HeroUI Pro and HeroUI Chat workspaces.
- [All Releases](https://heroui.pro/docs/react/releases): All updates and changes to HeroUI Pro for React, including new features, components, and improvements.
- [MCP Server v0.2.0](https://heroui.pro/docs/react/releases/mcp-0.2.0): Unified MCP — one server covers both @heroui-pro/react and @heroui/react. No more juggling separate OSS and Pro MCPs.
- [Introducing HeroUI v3](https://heroui.pro/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.
- [Templates](https://heroui.pro/docs/react/templates): Ready-to-use, full-page templates built with HeroUI Pro. Download and start building from a solid foundation.
- [Chain Of Thought](https://heroui.pro/docs/react/components/chain-of-thought): A collapsible reasoning timeline for assistant thinking, progress, and agent traces.
- [Chat Attachment](https://heroui.pro/docs/react/components/chat-attachment): Attachment previews and composer file input helpers for AI chat surfaces.
- [Chat Conversation](https://heroui.pro/docs/react/components/chat-conversation): A stick-to-bottom conversation viewport for streaming chat messages.
- [Chat List View](https://heroui.pro/docs/react/components/chat-list-view): Thread list rows for chat sidebars and conversation pickers.
- [Chat Loader](https://heroui.pro/docs/react/components/chat-loader): Loading skeletons and typing placeholders for assistant responses.
- [Chat Message Actions](https://heroui.pro/docs/react/components/chat-message-actions): Inline action buttons for assistant and user messages.
- [Chat Message](https://heroui.pro/docs/react/components/chat-message): Composable user and assistant message layouts for AI chat.
- [Chat Source](https://heroui.pro/docs/react/components/chat-source): Citation chips and grouped source lists for AI responses.
- [Chat Tool](https://heroui.pro/docs/react/components/chat-tool): Collapsible tool-call cards for inputs, outputs, errors, approvals, and grouped tool activity.
- [Code Block](https://heroui.pro/docs/react/components/code-block): Syntax-highlighted code blocks with language labels and copy actions for AI markdown.
- [Markdown](https://heroui.pro/docs/react/components/markdown): Render AI responses with rich markdown, memoized streaming blocks, and optional Streamdown rendering.
- [Prompt Input](https://heroui.pro/docs/react/components/prompt-input): A composable AI prompt composer with attachments, toolbar actions, send states, queued prompts, and drag-and-drop support.
- [Prompt Suggestion](https://heroui.pro/docs/react/components/prompt-suggestion): Suggested prompts and starter actions for AI chat empty states.
- [Text Shimmer](https://heroui.pro/docs/react/components/text-shimmer): Animated shimmer text for streaming, thinking, and loading labels.
- [Area Chart](https://heroui.pro/docs/react/components/area-chart): An area chart for visualizing trends with gradient fills, stacked series, and sparkline variants.
- [Bar Chart](https://heroui.pro/docs/react/components/bar-chart): A bar chart for comparing categorical data with grouped, stacked, and horizontal layout support.
- [Chart Tooltip](https://heroui.pro/docs/react/components/chart-tooltip): A composable React tooltip for chart data points with customizable indicators, labels, and value formatters.
- [Composed Chart](https://heroui.pro/docs/react/components/composed-chart): A React composed chart that combines bar, line, and area series for multi-metric web dashboards.
- [Line Chart](https://heroui.pro/docs/react/components/line-chart): A React line chart for web trend data with multi-series, sparkline, and custom tooltip support.
- [Pie Chart](https://heroui.pro/docs/react/components/pie-chart): A pie and donut chart for proportional data with labels, legends, and nested ring support.
- [Radar Chart](https://heroui.pro/docs/react/components/radar-chart): A React radar chart for comparing multivariate web data with fill, dots, and multiple series.
- [Radial Chart](https://heroui.pro/docs/react/components/radial-chart): A React radial chart for web gauges, progress rings, and circular data with customizable arcs and labels.
- [Action Bar](https://heroui.pro/docs/react/components/action-bar): A floating toolbar for contextual actions — bulk selection, editing controls, or any set of actions that appear in response to user interaction.
- [Agenda](https://heroui.pro/docs/react/components/agenda): A composable calendar component with day, week, and month views for displaying and managing events with drag interactions.
- [Carousel](https://heroui.pro/docs/react/components/carousel): A content browsing component for navigating through a collection of images or items, with thumbnails, dots, and navigation controls.
- [Data Grid](https://heroui.pro/docs/react/components/data-grid): A full-featured data grid with sorting, selection, column resizing, pinned columns, drag-and-drop row reorder, virtualization, and async loading — built on the HeroUI Table.
- [Empty State](https://heroui.pro/docs/react/components/empty-state): A React empty-state component with icon, title, description, and action for guiding web users.
- [File Tree](https://heroui.pro/docs/react/components/file-tree): A hierarchical file explorer with expand/collapse, drag-and-drop, icons, and multi-selection support.
- [Floating TOC](https://heroui.pro/docs/react/components/floating-toc): A floating table of contents that tracks scroll position and provides quick navigation to page sections.
- [Hover Card](https://heroui.pro/docs/react/components/hover-card): A popover card that appears on hover to preview additional content without navigating away.
- [Item Card Group](https://heroui.pro/docs/react/components/item-card-group): A layout component for grouping item cards in list or grid arrangements with section headers and dividers.
- [Item Card](https://heroui.pro/docs/react/components/item-card): A versatile list card with icon, title, description, and optional trailing actions like switches or selects.
- [Kanban](https://heroui.pro/docs/react/components/kanban): A drag-and-drop kanban board with columns, cards, and keyboard navigation for organizing tasks and workflows.
- [KPI Group](https://heroui.pro/docs/react/components/kpi-group): A layout component for arranging multiple KPI cards in horizontal or vertical stacks with consistent spacing.
- [KPI](https://heroui.pro/docs/react/components/kpi): A key performance indicator card displaying a metric value with trend chip, sparkline chart, and contextual details.
- [List View](https://heroui.pro/docs/react/components/list-view): A single-column interactive list with keyboard navigation, selection, and accessible item actions — built on RAC GridList.
- [Map](https://heroui.pro/docs/react/components/map): A MapLibre-powered map surface for custom styles, markers, popups, routes, arcs, clusters, and controls.
- [Timeline](https://heroui.pro/docs/react/components/timeline): A composable React timeline for web activity feeds, event histories, and milestones.
- [Widget](https://heroui.pro/docs/react/components/widget): A dashboard container that wraps charts, tables, KPIs, or any content with a consistent surface treatment — secondary background shell with an elevated white content area.
- [Emoji Reaction Button](https://heroui.pro/docs/react/components/emoji-reaction-button): An animated emoji reaction button with count display and toggle state for social interactions.
- [Number Value](https://heroui.pro/docs/react/components/number-value): A React number display with locale-aware currency, percentage, and compact formatting.
- [Pressable Feedback](https://heroui.pro/docs/react/components/pressable-feedback): A press interaction layer adding ripple, highlight, hold-to-confirm, and progress feedback effects to any element.
- [Rating](https://heroui.pro/docs/react/components/rating): A React star rating input with fractional read-only values, custom icons, sizes, and selection.
- [Trend Chip](https://heroui.pro/docs/react/components/trend-chip): A React trend chip for web metrics with direction, percentage, icon, and contextual suffix.
- [Cell Color Picker](https://heroui.pro/docs/react/components/cell-color-picker): A compact color picker styled as a settings cell with preset palettes and custom color input.
- [Cell Select](https://heroui.pro/docs/react/components/cell-select): A compact select input styled as a settings cell, ideal for preference panels and configuration forms.
- [Cell Slider](https://heroui.pro/docs/react/components/cell-slider): A range slider styled as a settings cell with label, value display, and step configuration.
- [Cell Switch](https://heroui.pro/docs/react/components/cell-switch): A toggle switch styled as a settings cell with label and description, ideal for preference panels.
- [Checkbox Button Group](https://heroui.pro/docs/react/components/checkbox-button-group): A multi-selection button group with card-style checkboxes, icons, and custom indicators.
- [Drop Zone](https://heroui.pro/docs/react/components/drop-zone): A drag-and-drop file upload area with file type filtering, size limits, and file list preview.
- [Inline Select](https://heroui.pro/docs/react/components/inline-select): A minimal inline dropdown that blends into surrounding text for contextual selections without a full form field.
- [Native Select](https://heroui.pro/docs/react/components/native-select): A styled wrapper around the native HTML select element with label, description, and validation support.
- [Number Stepper](https://heroui.pro/docs/react/components/number-stepper): A React numeric input with increment and decrement controls, bounds, step intervals, and formatting.
- [Radio Button Group](https://heroui.pro/docs/react/components/radio-button-group): A single-selection button group with card-style radio options, icons, and custom indicators.
- [Rich Text Editor](https://heroui.pro/docs/react/components/rich-text-editor): A composable Tiptap editor with toolbar controls, selection bubble menu, JSON value updates, and character count support.
- [Resizable](https://heroui.pro/docs/react/components/resizable): Resizable panel groups with composable handle types and variants. Built on react-resizable-panels, wired up with HeroUI design tokens.
- [AppLayout](https://heroui.pro/docs/react/components/app-layout): A scaffold layout that composes a full-height sidebar, a sticky navbar, a main content area, and an optional right-side aside panel.
- [Command](https://heroui.pro/docs/react/components/command): A command palette with fuzzy search, keyboard navigation, and nested groups for quick actions.
- [Context Menu](https://heroui.pro/docs/react/components/context-menu): A right-click context menu with nested submenus, selection state, and long-press support for touch.
- [Navbar](https://heroui.pro/docs/react/components/navbar): A composable top navigation bar with hide-on-scroll, responsive mobile menu, and client-side routing support.
- [Segment](https://heroui.pro/docs/react/components/segment): A React segmented control for switching between a small set of mutually exclusive web options.
- [Sidebar](https://heroui.pro/docs/react/components/sidebar): A responsive sidebar navigation component with collapsible groups, rail mode, and mobile sheet support.
- [Stepper](https://heroui.pro/docs/react/components/stepper): A step-by-step progress indicator with numbered, icon, and bullet variants in horizontal or vertical layouts.
- [Emoji Picker](https://heroui.pro/docs/react/components/emoji-picker): A searchable emoji picker with virtualized list, category navigation, skin tone selection, and recent emoji tracking.
- [Sheet](https://heroui.pro/docs/react/components/sheet): A bottom sheet overlay with snap points, swipe-to-dismiss, and placement options for mobile-friendly dialogs.
- [Skills](https://heroui.pro/docs/react/getting-started/agent-skills): Teach your AI assistant how to build with HeroUI Pro
- [Design Taste](https://heroui.pro/docs/react/getting-started/design-taste): Teach your AI assistant how to build polished, production-quality UIs with HeroUI
- [MCP Server](https://heroui.pro/docs/react/getting-started/mcp-server): Access HeroUI Pro and OSS documentation from a single AI assistant connection
- [Overview](https://heroui.pro/docs/react/getting-started/overview): Tools and resources for building HeroUI Pro projects with AI coding assistants
- [Animation](https://heroui.pro/docs/react/getting-started/animation): Add smooth animations and transitions to HeroUI Pro components
- [Colors](https://heroui.pro/docs/react/getting-started/colors): Pro-specific color variables that extend the HeroUI color system
- [Composition](https://heroui.pro/docs/react/getting-started/composition): Build flexible React UI with HeroUI Pro compound components, render props, and framework-agnostic styles.
- [Styling](https://heroui.pro/docs/react/getting-started/styling): Style HeroUI Pro components with CSS, Tailwind, or CSS-in-JS
- [Theming](https://heroui.pro/docs/react/getting-started/theming): Pro themes, Design Systems, and what's different from HeroUI OSS theming
- [Figma](https://heroui.pro/docs/react/getting-started/figma): Design HeroUI Pro React interfaces with exclusive Figma components and theme-variable sync.
- [Installation](https://heroui.pro/docs/react/getting-started/installation): Set up HeroUI Pro in your project
- [Licensing](https://heroui.pro/docs/react/getting-started/licensing): HeroUI Pro React licensing: perpetual access, optional renewals, team seats, personal tokens, and v2 upgrades.

### Native

- [All Components](https://heroui.pro/docs/native/components): Explore the full list of components available in HeroUI Native. More are on the way.
- [Introduction](https://heroui.pro/docs/native/getting-started): Premium composable React Native components that extend HeroUI Native — built for teams who want to ship beautiful, production-ready mobile apps fast.
- [Templates](https://heroui.pro/docs/native/templates): Ready-to-use, full-page templates built with HeroUI Native Pro. Download and start building from a solid foundation.
- [Brutalism](https://heroui.pro/docs/native/themes/brutalism): Bold borders, hard shadows, and display typography — a raw, high-contrast take on every component.
- [Default](https://heroui.pro/docs/native/themes/default): The signature HeroUI Native look — clean surfaces, soft radii, and balanced typography that works out of the box.
- [Glass](https://heroui.pro/docs/native/themes/glass): Frosted translucent surfaces and real iOS blur — a soft, layered take on every component.
- [All Themes](https://heroui.pro/docs/native/themes): Premium design themes for HeroUI Native Pro. Restyle every component with a single import.
- [1.0.0-beta.1](https://heroui.pro/docs/native/releases/beta-1): HeroUI Native Pro beta 1 introduced 17 premium mobile components, unified date and time controls, charts, and AI-ready tooling.
- [1.0.0-beta.2](https://heroui.pro/docs/native/releases/beta-2): Adds Badge, ProgressBar, ProgressCircle, ToggleButton, ToggleButtonGroup, BarChart, and Widget components, fixes calendar year picker sync after nav-button paging, locks date picker trigger variants, and launches the HeroUI Native Pro Figma library.
- [1.0.0-beta.3](https://heroui.pro/docs/native/releases/beta-3): Adds AreaChart, ChartCrosshair, ChartIndicator, EmptyState, and Segment components, unifies press-driven overlays across cartesian charts, removes LineChart.Tooltip and LineChart.Crosshair, and cleans up ProgressButton press-out handling.
- [1.0.0-beta.4](https://heroui.pro/docs/native/releases/beta-4): Adds PieChart, RadarChart, WheelPicker, WheelPickerGroup, TimePicker, WheelTimePicker, DateTimePicker, and WheelDateTimePicker, refactors component labels to soft-foreground tokens, and fixes NumberStepper digit jitter plus WheelPicker overscroll and re-render edge cases.
- [1.0.0-beta.5](https://heroui.pro/docs/native/releases/beta-5): Adds ComposedChart, ChartTooltip, NumberPad, and RadialChart, improves SplitView mount behavior, and fixes NumberField runaway onChange on rapid taps.
- [1.0.0-beta.6](https://heroui.pro/docs/native/releases/beta-6): Adds FAB, FlipCard, and Timeline — a floating action button that expands into portal-rendered actions, a spring-driven 3D flip card, and a composable vertical event chronology.
- [1.0.0-beta.7](https://heroui.pro/docs/native/releases/beta-7): Adds the Brutalism theme and extracts every component's styles into overridable BEM CSS, so a single import can restyle the entire library.
- [1.0.0-beta.8](https://heroui.pro/docs/native/releases/beta-8): Adds the Glass theme with real iOS blur, theme-aware background layers across 17 components, a blur variant for FAB.Overlay, themeable chart ramp tokens, and a new NumberPad highlightColor prop.
- [1.0.0-beta.9](https://heroui.pro/docs/native/releases/beta-9): Adds Agenda, Autocomplete, and ComboBox, plus RTL layout support across components with example-app localization for English, Arabic, and Hebrew.
- [All Releases](https://heroui.pro/docs/native/releases): All updates and changes to HeroUI Native, including new features, fixes, and breaking changes.
- [MCP Server v0.2.0](https://heroui.pro/docs/native/releases/mcp-0.2.0): Unified Native MCP — one server covers both heroui-native-pro and heroui-native. No more juggling separate OSS and Pro MCPs.
- [Crypto Wallet v1.0.0](https://heroui.pro/docs/native/releases/template-crypto-wallet-1.0.0): First HeroUI Native Pro template — a fully-built mobile crypto wallet with portfolio, assets, and transaction views.
- [Fitness App v1.0.0](https://heroui.pro/docs/native/releases/template-fitness-app-1.0.0): A HeroUI Native Pro template — Stride, a workout & activity app with activity rings, a program library, full in-session logging, and a celebratory summary screen.
- [Style Guides Native](https://heroui.pro/docs/native/releases/theme-builder-native): Design themes in the Pro Style Guides, preview them live on iOS and Android, and scan a QR code to open your theme in the HeroUI Native app.
- [FAB](https://heroui.pro/docs/native/components/fab): A floating action button that expands into a list of actions with automatic content placement and a shared, progress-driven open/close animation.
- [ProgressButton](https://heroui.pro/docs/native/components/progress-button): A press-and-hold button that fills a progress overlay to confirm an action.
- [SlideButton](https://heroui.pro/docs/native/components/slide-button): A slide-to-action button that requires a deliberate swipe gesture to confirm an action.
- [SocialAuthButton](https://heroui.pro/docs/native/components/social-auth-button): A specialised Button that renders a provider-specific icon alongside a label for social login flows.
- [ToggleButtonGroup](https://heroui.pro/docs/native/components/toggle-button-group): Groups multiple React Native ToggleButtons into a unified control for single or multiple selection.
- [ToggleButton](https://heroui.pro/docs/native/components/toggle-button): A selectable React Native button with controlled state, icons, labels, and ToggleButtonGroup integration.
- [AreaChart](https://heroui.pro/docs/native/components/area-chart): An area chart for visualizing trends, stacked contributions, and confidence bands with Skia-accelerated rendering.
- [BarChart](https://heroui.pro/docs/native/components/bar-chart): A bar chart for visualizing categorical data with single, grouped, and stacked column layouts.
- [ChartCrosshair](https://heroui.pro/docs/native/components/chart-crosshair): A vertical rule and tooltip overlay that highlight the pressed point on a chart.
- [ChartIndicator](https://heroui.pro/docs/native/components/chart-indicator): A themed Skia double-dot (outer halo + inner) marker that follows the pressed point on a chart.
- [ChartTooltip](https://heroui.pro/docs/native/components/chart-tooltip): A composable React Native tooltip for chart data points with customizable indicators, labels, and value formatters.
- [ComposedChart](https://heroui.pro/docs/native/components/composed-chart): A React Native composed chart that combines bar, line, and area series for multi-metric mobile dashboards.
- [LineChart](https://heroui.pro/docs/native/components/line-chart): A React Native line chart for mobile trend data with multi-series, sparkline, and custom tooltip support.
- [PieChart](https://heroui.pro/docs/native/components/pie-chart): A polar chart for visualizing categorical proportions with pie, donut, and segmented donut layouts.
- [RadarChart](https://heroui.pro/docs/native/components/radar-chart): A React Native radar chart for comparing multivariate mobile data with fill, dots, and multiple series.
- [RadialChart](https://heroui.pro/docs/native/components/radial-chart): A React Native radial chart for mobile gauges, progress rings, and circular data with customizable arcs and labels.
- [Badge](https://heroui.pro/docs/native/components/badge): Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels
- [EmptyState](https://heroui.pro/docs/native/components/empty-state): A React Native empty-state view with icon, title, description, and action for guiding mobile users.
- [FlipCard](https://heroui.pro/docs/native/components/flip-card): A pressable card that flips between a front and back face with a spring-driven 3D rotation.
- [Timeline](https://heroui.pro/docs/native/components/timeline): A composable React Native timeline for mobile activity feeds, event histories, and milestones.
- [Widget](https://heroui.pro/docs/native/components/widget): A dashboard container that pairs an optional header and footer with an elevated content card for charts, tables, and KPIs.
- [NumberValue](https://heroui.pro/docs/native/components/number-value): A React Native number display with locale-aware currency, percentage, and compact formatting.
- [ProgressBar](https://heroui.pro/docs/native/components/progress-bar): A progress bar shows either determinate or indeterminate progress of an operation over time.
- [ProgressCircle](https://heroui.pro/docs/native/components/progress-circle): A circular progress indicator that shows determinate or indeterminate progress of an operation over time.
- [Rating](https://heroui.pro/docs/native/components/rating): A React Native star rating input with fractional read-only values, custom icons, sizes, and selection.
- [TrendChip](https://heroui.pro/docs/native/components/trend-chip): A React Native trend chip for mobile metrics with direction, percentage, icon, and contextual suffix.
- [Agenda](https://heroui.pro/docs/native/components/agenda): A full calendar surface for mobile: a collapsible month calendar on top of a horizontally paged day / week / month body with draggable, resizable events.
- [Calendar](https://heroui.pro/docs/native/components/calendar): A single-date calendar for selecting dates with month navigation, locale support, and customizable day cells.
- [DateField](https://heroui.pro/docs/native/components/date-field): A date input field with `dd/mm/yyyy` masking and an optional calendar popup for selecting dates.
- [DatePicker](https://heroui.pro/docs/native/components/date-picker): A single-date picker that combines a trigger field with a calendar popup for selecting dates.
- [DateRangePicker](https://heroui.pro/docs/native/components/date-range-picker): A date range picker that combines a trigger field with a range calendar popup for selecting start and end dates.
- [DateTimePicker](https://heroui.pro/docs/native/components/date-time-picker): A field shell that pairs a `Select` trigger with a `WheelDateTimePicker` presentation surface, exchanging an `@internationalized/date` `CalendarDateTime`.
- [RangeCalendar](https://heroui.pro/docs/native/components/range-calendar): A date range calendar for selecting start and end dates with month navigation, locale support, and customizable day cells.
- [TimePicker](https://heroui.pro/docs/native/components/time-picker): A time picker that combines a trigger field with a scrollable wheel popup for selecting an hour, minute, and optional AM/PM period.
- [WheelDateTimePicker](https://heroui.pro/docs/native/components/wheel-date-time-picker): A standalone wheel date-time selector built on `WheelPickerGroup` that exchanges an `@internationalized/date` `CalendarDateTime` value.
- [WheelTimePicker](https://heroui.pro/docs/native/components/wheel-time-picker): A standalone wheel time selector built on `WheelPickerGroup` that exchanges an `@internationalized/date` `Time` value.
- [Segment](https://heroui.pro/docs/native/components/segment): A React Native segmented control for switching between a small set of mutually exclusive mobile options.
- [SplitView](https://heroui.pro/docs/native/components/split-view): A vertical split layout with a draggable divider between a top and bottom section.
- [Stepper](https://heroui.pro/docs/native/components/stepper): A multi-step progress indicator for guiding users through sequential workflows.
- [Autocomplete](https://heroui.pro/docs/native/components/autocomplete): An autocomplete combines a select with filtering, allowing users to search and select from a list of options.
- [ComboBox](https://heroui.pro/docs/native/components/combo-box): A text input combined with a listbox popover, letting users filter a collection of options to items matching a query.
- [NumberField](https://heroui.pro/docs/native/components/number-field): A numeric input with increment and decrement buttons for precise value entry.
- [NumberPad](https://heroui.pro/docs/native/components/number-pad): A numeric keypad for entering PINs, codes, and amounts with subtle press animations.
- [Number Stepper](https://heroui.pro/docs/native/components/number-stepper): A React Native numeric input with increment and decrement controls, bounds, step intervals, and formatting.
- [RadioButtonGroup](https://heroui.pro/docs/native/components/radio-button-group): A compound radio group for choosing one option, with flexible item content and styling hooks for selected state and variants.
- [WheelPickerGroup](https://heroui.pro/docs/native/components/wheel-picker-group): A coordinated row of `WheelPicker` instances that share layout, emit a composite values record, and report when every wheel has come to rest.
- [WheelPicker](https://heroui.pro/docs/native/components/wheel-picker): A vertical wheel picker with snap-to-row selection, distance-based fade and scale, and optional fade overlays.
- [Skills](https://heroui.pro/docs/native/getting-started/agent-skills): Teach your AI assistant how to build with HeroUI Native Pro
- [Design Taste](https://heroui.pro/docs/native/getting-started/design-taste): Teach your AI assistant how to build polished, production-quality mobile UIs with HeroUI Native
- [MCP Server](https://heroui.pro/docs/native/getting-started/mcp-server): Access HeroUI Native Pro and OSS documentation from a single AI assistant connection
- [Overview](https://heroui.pro/docs/native/getting-started/overview): Tools and resources for building HeroUI Native projects with AI coding assistants
- [Figma](https://heroui.pro/docs/native/getting-started/figma): Design HeroUI Pro Native interfaces with exclusive Figma components and theme-variable sync.
- [Installation](https://heroui.pro/docs/native/getting-started/installation): Set up HeroUI Native Pro in your project
- [Licensing](https://heroui.pro/docs/native/getting-started/licensing): HeroUI Pro Native licensing: perpetual access, optional renewals, team seats, personal tokens, and v2 upgrades.
- [Animation](https://heroui.pro/docs/native/getting-started/animation): Add smooth animations and transitions to HeroUI Native components
- [Colors](https://heroui.pro/docs/native/getting-started/colors): Color palette and theming system for HeroUI Native
- [Composition](https://heroui.pro/docs/native/getting-started/composition): Build flexible React Native UI with HeroUI Pro compound components, asChild, and custom variants.
- [Portal](https://heroui.pro/docs/native/getting-started/portal): Configure portals for HeroUI Native Pro overlays, including default and custom PortalHost behavior.
- [Provider](https://heroui.pro/docs/native/getting-started/provider): Configure HeroUI Native provider with text, animation, and toast settings
- [Styling](https://heroui.pro/docs/native/getting-started/styling): Style HeroUI Native components with Tailwind or StyleSheet API
- [Theming](https://heroui.pro/docs/native/getting-started/theming): Customize HeroUI Native's design system with CSS variables and global styles