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

## When to use HeroUI Pro

- Use HeroUI Pro when a licensed React or React Native project needs premium application components, complete templates, design-system tooling, or authenticated AI coding context.
- Use the HeroUI Agents documentation and API when embedding a hosted generative UI agent, declaring client tools, or reading that Agent's users, conversations, messages, and runs from a backend.
- Use the open-source [HeroUI documentation](https://heroui.com) instead when the project only needs the free `@heroui/react` component library. Do not assume a HeroUI Pro license or copy protected Pro source into an unlicensed project.

## Developer resources

- [HeroUI Agents API documentation](https://heroui.pro/docs/agents/api-reference): Authentication, permissions, pagination, errors, and endpoint reference
- [HeroUI Agents OpenAPI 3.1 document](https://heroui.pro/openapi.json): Function-calling-compatible schema for `https://api.heroui.pro/v1`
- [API catalog](https://heroui.pro/.well-known/api-catalog): Machine-readable links for HeroUI Pro APIs and MCP services
- [HeroUI Pro MCP server](https://heroui.pro/.well-known/mcp/server-card.json): Authenticated Streamable HTTP service at `https://mcp.heroui.pro/mcp`; OAuth or a valid personal token is required
- [HeroUI Pro CLI installation](https://heroui.pro/docs/react/getting-started/installation): Use the published `heroui-pro` CLI for login, licensed package installation, updates, and status

**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
- **HeroUI Agents**: [/agents/llms.txt](https://heroui.pro/docs/agents/llms.txt) - Hosted agents with generative UI and client tools

## Documentation Index

### React

- [React Components](https://heroui.pro/docs/react/components): Browse HeroUI Pro components for charts, data display, forms, navigation, AI interfaces, and more.
- [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.
- [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.
- [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.
- [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.
- [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.
- [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.
- [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.
- [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.
- [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
- [HeroUI Pro Theming](https://heroui.pro/docs/react/getting-started/theming): Configure HeroUI Pro themes, CSS variables, import order, Design Systems, and theme variants alongside HeroUI OSS.
- [Figma](https://heroui.pro/docs/react/getting-started/figma): Design HeroUI Pro React interfaces with exclusive Figma components and theme-variable sync.
- [Install HeroUI Pro for React](https://heroui.pro/docs/react/getting-started/installation): Install HeroUI Pro for React 19 and Tailwind CSS v4, authenticate with the CLI, and add the package styles to your app.
- [Licensing](https://heroui.pro/docs/react/getting-started/licensing): HeroUI Pro React licensing: perpetual access, optional renewals, team seats, personal tokens, and v2 upgrades.
- [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.

### 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.10](https://heroui.pro/docs/native/releases/beta-10): Adds Table, Carousel, MorphButton, and PhoneNumberField, plus a theme-aware background layer for carousel navigation buttons.
- [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.
- [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.
- [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.
- [MorphButton](https://heroui.pro/docs/native/components/morph-button): A pressable surface that morphs between auto-measured collapsed and expanded content, growing toward one of eight logical directions.
- [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.
- [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
- [Carousel](https://heroui.pro/docs/native/components/carousel): A horizontal snap pager with navigation buttons, dot indicators, and a thumbnail strip.
- [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.
- [Table](https://heroui.pro/docs/native/components/table): A data table for structured tabular content with row selection, controlled sorting, and an opt-in virtualized body.
- [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.
- [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.
- [PhoneNumberField](https://heroui.pro/docs/native/components/phone-number-field): An international phone number field with per-country as-you-type formatting, validation, E.164 output, smart paste, and a searchable country picker.
- [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.
- [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.
- [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
- [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
- [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.

### agents

- [Identifying users](https://heroui.pro/docs/agents/identifying-users): Connect Agent conversations to the people in your product, and keep their history when they sign in.
- [Overview](https://heroui.pro/docs/agents): Embed an AI assistant that understands your product, takes action, and generates interfaces from your data.
- [Installation](https://heroui.pro/docs/agents/installation): Install the HeroUI Agent host bridge in React, Next.js, or a vanilla web application.
- [Quickstart](https://heroui.pro/docs/agents/quickstart): Embed HeroUI Agent in any modern website with React, Next.js, or vanilla JavaScript.
- [What Is Generative UI?](https://heroui.pro/docs/agents/what-is-generative-ui): Learn how generative UI turns AI responses into useful, interactive interfaces and how HeroUI Agent renders them safely in React.
- [Actions](https://heroui.pro/docs/agents/components/actions): Generated actions and follow-up prompts that connect Agent UI to host behavior.
- [Custom Components](https://heroui.pro/docs/agents/components/custom-components): Bring your own React components into hosted Agent conversations. Coming soon.
- [Data Visualization](https://heroui.pro/docs/agents/components/data-visualization): Charts, metrics, tables, comparisons, meters, and dashboards for analytical results.
- [Display Information](https://heroui.pro/docs/agents/components/display-information): Cards, text, media, records, and composed interfaces for generated results.
- [Form Elements](https://heroui.pro/docs/agents/components/form-elements): Declarative forms and compact controls for collecting structured user input.
- [All Components](https://heroui.pro/docs/agents/components): Explore the hosted components HeroUI Agent can generate in a response.
- [Authentication](https://heroui.pro/docs/agents/api-reference/authentication): Authenticate server-to-server requests with a scoped workspace API key.
- [Client Tools](https://heroui.pro/docs/agents/api-reference/client-tools): Give HeroUI Agent typed access to browser data and actions with createToolHelper.
- [Configuration](https://heroui.pro/docs/agents/api-reference/configuration): Configure the Agent's appearance, composer, permissions, capabilities, Markdown, and start screen.
- [Errors](https://heroui.pro/docs/agents/api-reference/errors): Handle consistent JSON errors and HTTP status codes.
- [HeroUIAgent](https://heroui.pro/docs/agents/api-reference/hero-ui-agent): Mount and configure the hosted HeroUI Agent from a React application.
- [Introduction](https://heroui.pro/docs/agents/api-reference): Read Agent activity and manage the files and URLs in its knowledge base.
- [Models](https://heroui.pro/docs/agents/api-reference/models): Choose the model HeroUI Agent runs and let end users switch between hosted models.
- [Pagination](https://heroui.pro/docs/agents/api-reference/pagination): Traverse list endpoints with opaque cursors.
- [Usage limits](https://heroui.pro/docs/agents/api-reference/usage-limits): Understand per-key and per-Agent request limits and retry safely.
- [useAgent](https://heroui.pro/docs/agents/api-reference/use-agent): Control a mounted HeroUI Agent from any component in your React tree.
- [Examples](https://heroui.pro/docs/agents/examples): Explore HeroUI Agent in complete product experiences with realistic data, tools, and actions.
- [API keys](https://heroui.pro/docs/agents/configure/api-keys): Create, scope, and rotate workspace-wide keys used by your Agent integrations.
- [Appearance](https://heroui.pro/docs/agents/configure/appearance): Design the embed visually in the dashboard and have it apply automatically, or export the props and pin them in your code.
- [Configure](https://heroui.pro/docs/agents/configure): Understand which agent settings live in the dashboard and which live in your code, and where to change each one.
- [Knowledge base](https://heroui.pro/docs/agents/configure/knowledge-base): Attach documents and webpages so the agent answers from your own policies, pricing, and procedures instead of guessing.
- [MCP servers](https://heroui.pro/docs/agents/configure/mcp-servers): Connect Model Context Protocol servers so your agent can borrow tools from external systems without writing an integration.
- [System prompt](https://heroui.pro/docs/agents/configure/system-prompt): Write the private instructions that shape how your agent behaves in every conversation.
- [Tools](https://heroui.pro/docs/agents/configure/tools): Choose what your agent can do beyond writing text, across built-in toolkits, browser client tools, and MCP servers.
- [Conversations](https://heroui.pro/docs/agents/monitor/conversations): Read full transcripts of what people asked and how your agent answered.
- [Monitor](https://heroui.pro/docs/agents/monitor): Track usage, engagement, and reliability for your agent, then drill into the users, conversations, and runs behind each number.
- [Logs](https://heroui.pro/docs/agents/monitor/logs): Inspect individual runs for latency, tool calls, errors, and the identifiers you need to report a problem.
- [Users](https://heroui.pro/docs/agents/monitor/users): Browse the people who have talked to your agent and open their conversation history.
- [List conversation messages](https://heroui.pro/docs/agents/api-reference/conversations/list-conversation-messages): Returns persisted messages for one conversation, ordered from oldest to newest. The conversation must belong to the authenticated agent.
- [List conversations](https://heroui.pro/docs/agents/api-reference/conversations/list-conversations): Returns conversations for the authenticated agent, ordered from most recently updated to oldest. Message content is available from List conversation messages.
- [Retrieve a conversation](https://heroui.pro/docs/agents/api-reference/conversations/retrieve-conversation): Returns one conversation that belongs to the authenticated agent.
- [Add a knowledge URL](https://heroui.pro/docs/agents/api-reference/knowledge/create-knowledge-url): Adds a public HTTP or HTTPS URL and starts extraction and indexing. The returned document begins in processing status.
- [Delete a knowledge document](https://heroui.pro/docs/agents/api-reference/knowledge/delete-knowledge-document): Permanently deletes a knowledge document, its extracted content, and its search vectors.
- [List knowledge documents](https://heroui.pro/docs/agents/api-reference/knowledge/list-knowledge-documents): Returns knowledge documents for the authenticated Agent, ordered from newest to oldest. Poll this endpoint or Retrieve a knowledge document to observe processing status.
- [Refresh a knowledge document](https://heroui.pro/docs/agents/api-reference/knowledge/refresh-knowledge-document): Starts a refresh of a URL knowledge document. Poll the document until refresh_status is no longer refreshing.
- [Retrieve knowledge content](https://heroui.pro/docs/agents/api-reference/knowledge/retrieve-knowledge-document-content): Returns the extracted markdown currently indexed for the document. During a refresh, this remains the previous ready version until the replacement succeeds.
- [Retrieve a knowledge document](https://heroui.pro/docs/agents/api-reference/knowledge/retrieve-knowledge-document): Returns one knowledge document and its current ingestion and refresh status.
- [Update a knowledge refresh schedule](https://heroui.pro/docs/agents/api-reference/knowledge/update-knowledge-document-schedule): Sets the automatic refresh interval for a URL knowledge document. Use zero to disable scheduled refreshes.
- [Update a knowledge document](https://heroui.pro/docs/agents/api-reference/knowledge/update-knowledge-document): Renames a knowledge document or enables or disables it for Agent search.
- [Upload a knowledge file](https://heroui.pro/docs/agents/api-reference/knowledge/upload-knowledge-file): Uploads one file up to 10 MB and starts extraction and indexing. Supported formats are PDF, Word, Excel, PowerPoint, text, Markdown, HTML, CSV, and JSON. The returned document begins in processing status.
- [List runs](https://heroui.pro/docs/agents/api-reference/runs/list-runs): Returns model runs for the authenticated agent, ordered from newest to oldest. Usage, cost, and billing data are not exposed.
- [Retrieve a run](https://heroui.pro/docs/agents/api-reference/runs/retrieve-run): Returns one model run that belongs to the authenticated agent.
- [List users](https://heroui.pro/docs/agents/api-reference/users/list-users): Returns users observed by the authenticated agent, ordered from most recently seen to oldest.
- [Retrieve a user](https://heroui.pro/docs/agents/api-reference/users/retrieve-user): Returns one user that belongs to the authenticated agent.