HeroUI Pro
Getting Started
Components
Releases

1.0.0-beta.1

April 2026

The first public beta of HeroUI Native Pro is here. Seventeen premium React Native components, a unified date & time stack, new interaction patterns like slide-to-confirm and hold-to-confirm, a Skia-powered line chart, and a brand-new toolkit for AI-assisted native development — all built on the same foundations you already know from HeroUI Native OSS.

Overview

HeroUI Native Pro (heroui-native-pro) is a premium extension of HeroUI Native OSS. This beta ships production-ready components across 6 categories:

  • Date & Time — Calendar, RangeCalendar, DateField, DatePicker, DateRangePicker
  • Charts — LineChart
  • Buttons — SlideButton, ProgressButton, SocialAuthButton
  • Forms — NumberField, NumberStepper, RadioButtonGroup
  • Navigation — Stepper, SplitView
  • Feedback — Rating, NumberValue, TrendChip

Everything composes on top of heroui-native, uses the same theme tokens, the same compound pattern, the same animation prop, and the same Uniwind + Tailwind CSS v4 styling system. If you already build with HeroUI Native OSS, you already know how to use Pro.

Try It on Your Device

Scan the QR code with your device's camera or Expo Go to explore every Pro component live on your phone:

Expo Go QR Code

📱 Open Demo App in Expo Go

Android users: If scanning the QR code redirects you to a browser with a 404 error, open Expo Go first and use its built-in QR scanner instead.

Installation

Follow the installation guide to authenticate the private registry with your HEROUI_PERSONAL_TOKEN, install heroui-native-pro, and wire up HeroUINativeProvider.

Built on HeroUI Native OSS

HeroUI Native Pro inherits every core principle from HeroUI Native OSS. Same mental model, same API surface, same everything — just more components:

  • Compound components — Every Pro component uses dot-notation primitives (Calendar.Grid, Stepper.Step, DateField.Trigger) so you can style, reorder, or replace any internal slot.
  • Shared theme tokens — accent, surface, foreground, muted, success, danger — the same semantic tokens resolve identically in Pro components.
  • Uniwind + Tailwind CSS v4 — Style with familiar utility classes. No separate styling system, no new learning curve.
  • Unified animation prop — Every animated Pro component exposes the same animation API. Disable, customize, or cascade per-component, per-subtree, or app-wide — same as OSS.
  • Reduce Motion out of the box — Respects the system Reduce Motion setting automatically. No extra wiring.
  • Adaptive presentation modes — DateField, DatePicker, and DateRangePicker switch between popover, dialog, and bottom-sheet with a single prop, matching the pattern established by Select and Menu in OSS.
  • Granular imports — Import from the root or from per-component subpaths. Ship only what you use.
import { Calendar, DatePicker, Stepper } from "heroui-native-pro";

The Agent Skills and MCP Server know about both libraries at once.

Date & Time

A full, compound date & time stack. Five components that compose the same primitives — a shared Calendar / RangeCalendar engine, a masked DateField input, and trigger-based DatePicker and DateRangePicker variants. All five are built on @internationalized/date, so locale, time zone, and non-Gregorian calendars are first-class.

Every date component ships with:

  • Controlled + uncontrolled modes with value / defaultValue
  • minValue / maxValue and isDateUnavailable for constraints
  • Optional year-picker overlay for fast long-range navigation
  • BCP 47 locale support (Gregorian, Buddhist, Indian, Persian, and more)
  • isRequired, isInvalid, and FieldError integration for forms
  • popover, dialog, and bottom-sheet presentations on picker-based variants

Calendar

A single-date calendar with month navigation, internationalization, year picker, and fully customizable day cells (including render-prop driven CellIndicator for event dots).

RangeCalendar

Two-tap start/end date range selection with a highlight strip, allowsNonContiguousRanges for split bookings, and the same cell render props as Calendar.

DateField

A masked dd/mm/yyyy input with an optional calendar popup in the trailing suffix slot. Supports "masked" and "loose" input modes, keyboard dismissal on trigger press, and full form-field integration with Label, Description, and FieldError.

DatePicker and DateRangePicker pair the same calendar engines with a trigger-first layout — a pressable Trigger that opens the overlay and a Value slot that displays the formatted selection. See the component docs for full API details.

Charts

LineChart

A Skia-powered line chart for visualizing trends over time. Built on victory-native and wrapped in a themed outer View, with compound primitives for static and draw-on animated lines, a crosshair that tracks chart presses, and a tooltip indicator dot. Multi-series, sparkline, and custom tooltip layouts all compose from the same building blocks.

  • Compound parts — LineChart.Line, LineChart.AnimatedLine, LineChart.Tooltip, LineChart.Crosshair
  • curveType — natural cubic spline or linear segments
  • Replayable draw-on animation via resetKey with configurable timing/spring config
  • Cascading animation="disable-all" to skip path interpolation across the entire subtree
  • Render-prop children expose points and chartBounds for fully custom overlays
  • Themed stroke colors via colorClassName (e.g. accent-chart-1, accent-chart-3)

SplitView

A vertical split layout with a draggable divider between a top and bottom section. Snap points can be defined as ratios of the container height (0..1) or absolute pixel values (> 1). The top section animates between snaps with spring physics and supports:

  • Controlled (snapIndex / onSnapIndexChange) and uncontrolled usage
  • Render-prop children for reading animated layout values (topSectionHeight, minPx, maxPx)
  • useSplitView hook for triggering snapTo programmatically from any descendant
  • Extended hit target on SplitView.DragArea so the drag handle is easy to grab
  • Cascading animation="disable-all" for the entire subtree

Useful for map-over-list screens, drawer-style inspectors, or any "pull up a panel" interaction.

Stepper

A multi-step progress indicator for sequential workflows — onboarding, checkout, multi-step forms. Every step is a pressable Stepper.Step that automatically receives its index and one of three statuses: inactive, active, or complete. The default rail renders an animated indicator circle with a check-draw-in animation on completion and a separator fill that animates along the progress.

  • Controlled (currentStep / onStepChange) and uncontrolled modes
  • orientation — vertical or horizontal
  • Fully customizable compound parts — Indicator, IndicatorCheck, IndicatorNumber, Separator, SeparatorTrack, SeparatorFill, Title, Description
  • Per-step color overrides via data-status attributes

Buttons

Two interaction patterns that are common in native apps but painful to build from scratch: slide-to-confirm and hold-to-confirm. Both guard against accidental taps for destructive or high-intent actions, both support variant (accent, success, danger, etc.), autoReset, and controlled completion state.

SlideButton

A pan-gesture driven slider. Two content layers — an UnderlayContent that peels away as the thumb moves, and an OverlayContent that clip-reveals from left to right. Built for "slide to unlock", "slide to approve", or "slide to delete" flows.

ProgressButton

A press-and-hold button. An absolutely positioned Overlay sweeps left-to-right on press, with an inverted-color MaskLabel that counter-translates to keep the label aligned — producing a clean color-wipe effect. Use holdDuration to tune how long the user must hold, and autoReset + autoResetDelay to return to idle.

SocialAuthButton

A specialized button that renders a provider-specific icon and label for social sign-in flows. Pass a provider (google, apple, github, facebook, and more) and get the correct icon, label, and styling automatically.

Forms

NumberStepper

A compact numeric stepper with a decrement button, a current-value display with direction-aware flip animations, and an increment button. Auto-disables the relevant button at the minValue / maxValue boundary and supports custom step intervals (including decimals like 0.5).

<NumberStepper defaultValue={0} step={5} minValue={0} maxValue={100}>
  <NumberStepper.DecrementButton />
  <NumberStepper.Value />
  <NumberStepper.IncrementButton />
</NumberStepper>

Typical use cases: cart quantity selectors, item counters, compact numeric toggles in settings. The render-prop API ({({ isAtMin }) => ...}) lets you swap the decrement icon to a trash can when the value reaches the floor — a common pattern for "remove from cart" interactions.

NumberField

A full numeric input with inline increment/decrement buttons anchored to the input edges. Supports long-press repeat on the buttons, Intl number formatting, min/max/step constraints, and full form-field integration (Label, Description, FieldError). Use this when you need a text-entry numeric field; use NumberStepper for purely button-driven counters.

RadioButtonGroup

A compound radio group that wraps HeroUI Native's RadioGroup primitive with styled item rows. Supports group-level variant (primary / secondary) and flexible item content via ItemContent.

Feedback

Rating

A star rating input built on top of heroui-native's RadioGroup. Auto-renders items from 1 to maxValue when children are omitted, supports fractional read-only display (e.g. 3.7 stars), fully swappable icons, and controlled/uncontrolled modes. Exposes a render-function Item for completely custom indicators.

<Rating defaultValue={4} />
<Rating value={3.7} isReadOnly maxValue={5} />
  • size — sm, md, lg
  • isReadOnly for display-only rendering with fractional fills
  • Custom icons via the icon prop or Rating.Item render children
  • Full form-field integration through the underlying RadioGroup

Pair it with TrendChip in a review summary, or drop it straight into a feedback form.

NumberValue

A formatted number display with locale-aware rendering. Wraps the runtime's built-in Intl.NumberFormat to produce decimals, currency, percentages, and compact notation (1.2K, 3.4M) with a consistent API. The root auto-renders the value when no children are provided, or composes with Prefix, Value, and Suffix primitives for richer layouts.

<NumberValue value={1234.56} style="currency" currency="USD" />
<NumberValue value={0.482} style="percent" />

<NumberValue value={1204} notation="compact">
  <NumberValue.Prefix>approx </NumberValue.Prefix>
  <NumberValue.Value />
  <NumberValue.Suffix> users</NumberValue.Suffix>
</NumberValue>

Works out of the box on modern Hermes/JSC runtimes; for advanced options (notation: "compact", signDisplay, non-default locales) the docs walk through the FormatJS polyfill setup so behavior matches the web exactly.

TrendChip

A compact chip for financial and metrics dashboards. Built on top of heroui-native's Chip — pass a trend prop (up, neutral, down) and the chip automatically derives its color (success, warning, danger), arrow direction, and icon. Digits render with tabular figures so percentages align vertically across stacked chips.

<TrendChip trend="up">+12.4%</TrendChip>
<TrendChip trend="neutral">0.0%</TrendChip>
<TrendChip trend="down">-3.2%</TrendChip>

Supports variant, size, an optional Prefix and Suffix for $, %, or vs last month labels, and a render-prop Indicator for fully custom SVG arrows.

AI Tooling

HeroUI Native Pro ships with a complete toolkit for AI-assisted mobile development. Three pieces that work together:

MCP Server

A remote MCP server (https://native-mcp.heroui.pro/mcp) that gives AI assistants live access to every Pro component's docs, props, theme variables, and setup guides. Supported in Cursor, Claude Code, VS Code Copilot, Windsurf, and Zed.

.cursor/mcp.json
{
  "mcpServers": {
    "heroui-native-pro": {
      "url": "https://native-mcp.heroui.pro/mcp",
      "headers": {
        "x-heroui-personal-token": "HEROUI_PERSONAL_TOKEN"
      }
    }
  }
}

Native Pro Skill

An installable knowledge pack that teaches your agent heroui-native-pro conventions — compound component rules, MCP tool routing, Uniwind styling, Reanimated gotchas, and the common mistakes that produce broken native UIs.

curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-native-pro

Design Taste Skill

A second skill focused purely on visual polish — spacing, typography, color token usage, card anatomy, form layout, button hierarchy, and mobile-native navigation patterns. 78 design principles learned from iterative human feedback, so your agent stops producing generic layouts and starts producing production-quality ones.

curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-native-pro-design-taste

Skills teach, MCP does. Install all three for the best results — your agent writes correct code, with live documentation access, in a polished design system. Learn more in the UI for Agents overview.

What's Next

This is beta.1. We're polishing APIs, adding more components, and squashing edge cases as they surface. Feedback during beta shapes the 1.0.0 stable release — please file issues and share what you're building.

All Releases

All updates and changes to HeroUI Native, including new features, fixes, and breaking changes.

On this page

OverviewTry It on Your DeviceInstallationBuilt on HeroUI Native OSSDate & TimeCalendarRangeCalendarDateFieldChartsLineChartNavigationSplitViewStepperButtonsSlideButtonProgressButtonSocialAuthButtonFormsNumberStepperNumberFieldRadioButtonGroupFeedbackRatingNumberValueTrendChipAI ToolingMCP ServerNative Pro SkillDesign Taste SkillWhat's NextLinks