1.0.0-beta.2

The second beta of HeroUI Native Pro lands seven new components — Badge, ProgressBar, ProgressCircle, ToggleButton, ToggleButtonGroup, BarChart, and Widget — alongside a calendar year-picker sync fix and a small API tightening on the date picker family. Everything composes on the same compound, theme-token, and animation primitives introduced in beta.1.

Try It on Your Device

Installation

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

What's New

New Components

This release introduces 7 new components spanning four categories:

• BarChart: victory-native-powered bar chart with single, grouped, and stacked variants. (Documentation)
• Badge: Notification dot or pill anchored to any element. (Documentation)
• ProgressBar: Horizontal determinate / indeterminate progress indicator. (Documentation)
• ProgressCircle: Circular determinate / indeterminate progress indicator. (Documentation)
• ToggleButton: Selectable button with selected / unselected styling. (Documentation)
• ToggleButtonGroup: Single- or multi-select group of ToggleButtons with attached and detached layouts. (Documentation)
• Widget: Dashboard surface that pairs an optional header / footer with an elevated content card for charts, tables, and KPIs. (Documentation)

BarChart

A victory-native-powered bar chart with the same theming, animation cascade, and Uniwind colorClassName API as LineChart. Compound primitives cover the three common bar layouts — single series, grouped (clustered) series, and stacked columns — and each renders as a Uniwind-wrapped Skia path.

Features:

• Compound parts — BarChart.Bar, BarChart.BarGroup, BarChart.BarGroupItem, BarChart.StackedBar
• Themed fills via colorClassName (e.g. accent-chart-1, accent-chart-3) with full accent-chart-* token support
• Built-in draw-on animation, gated by the cascading animation="disable-all" prop through AnimationSettingsProvider
• Configurable barWidth, roundedCorners, and domainPadding
• useBarPath, useBarGroupPaths, and useStackedBarPaths hooks re-exported for custom rendering (gradients, patterns, etc.)
• Reports resolved barWidth, groupWidth, and gapWidth through BarGroup's onBarSizeChange for synchronized overlays
• victory-native stays an optional dependency — only loaded when BarChart or LineChart is imported

Usage:

import { BarChart } from "heroui-native-pro";

const DATA = [
  { month: "Jan", sales: 120 },
  { month: "Feb", sales: 180 },
  { month: "Mar", sales: 150 },
];

export function Example() {
  return (
    <BarChart
      data={DATA}
      xKey="month"
      yKeys={["sales"]}
      wrapperClassName="h-52"
    >
      {({ points, chartBounds }) => (
        <BarChart.Bar points={points.sales} chartBounds={chartBounds} />
      )}
    </BarChart>
  );
}

For complete documentation and examples, see the BarChart component page.

Badge

A small indicator positioned relative to another element. Use it for unread counters on Avatars, status dots on icons, or standalone pills in lists. Renders as a dot when no children are passed and as a pill when string or number children are provided.

Features:

• Compound parts — Badge.Anchor, Badge, Badge.Label
• color — default, accent, success, warning, danger
• variant — primary, secondary, soft
• size — sm, md, lg
• placement — top-right, top-left, bottom-right, bottom-left when used inside Badge.Anchor
• Animated mount / unmount transitions with full animation cascade support

Usage:

import { Avatar, Badge } from "heroui-native-pro";

export function Example() {
  return (
    <Badge.Anchor>
      <Avatar>...</Avatar>
      <Badge color="danger" size="sm">
        5
      </Badge>
    </Badge.Anchor>
  );
}

For complete documentation and examples, see the Badge component page.

ProgressBar

A horizontal progress bar that supports both determinate and indeterminate modes. The root computes the percentage and formatted value text from value, minValue, maxValue, and formatOptions, while the Track and Fill primitives handle the visual styling. Plain string children auto-expand into the full label / track / fill layout.

Features:

• Compound parts — ProgressBar.Track, ProgressBar.Fill, ProgressBar.Label, ProgressBar.ValueLabel
• Determinate width animation and indeterminate translateX sweep, switched via isIndeterminate
• color — default, accent, success, warning, danger
• size — sm, md, lg track heights
• Locale-aware formatting through formatOptions (e.g. style: "percent")
• Tabular figures on ValueLabel for stable digit alignment
• accessibilityLabel for screen-reader-only labels when no visual Label is rendered

Usage:

import { ProgressBar } from "heroui-native-pro";
import { View } from "react-native";

export function Example() {
  return (
    <ProgressBar value={60}>
      <View className="flex-row items-center justify-between">
        <ProgressBar.Label>Loading</ProgressBar.Label>
        <ProgressBar.ValueLabel />
      </View>
      <ProgressBar.Track>
        <ProgressBar.Fill />
      </ProgressBar.Track>
    </ProgressBar>
  );
}

For complete documentation and examples, see the ProgressBar component page.

ProgressCircle

A circular progress indicator built on Skia / SVG with the same determinate / indeterminate API as ProgressBar. The Indicator animates strokeDashoffset for determinate progress and rotates continuously when isIndeterminate is set. Drop a ValueLabel inside to render the formatted value centered on the circle.

Features:

• Compound parts — ProgressCircle.Indicator, ProgressCircle.ValueLabel
• Determinate stroke animation and indeterminate spin, switched via isIndeterminate
• color — default, accent, success, warning, danger
• size — sm, md, lg presets, or a custom pixel number for full control
• strokeWidth, trackColor, and fillColor overrides on Indicator
• Locale-aware formatOptions, with a ValueLabel that supports custom child content
• Tabular figures and full animation cascade support

Usage:

import { ProgressCircle } from "heroui-native-pro";

export function Example() {
  return (
    <ProgressCircle value={75} color="success" size="lg">
      <ProgressCircle.Indicator />
      <ProgressCircle.ValueLabel />
    </ProgressCircle>
  );
}

For complete documentation and examples, see the ProgressCircle component page.

ToggleButton & ToggleButtonGroup

A pair of components for two-state and segmented selection. ToggleButton wraps heroui-native's Button with selected / unselected background styling, and ToggleButtonGroup composes multiple toggles into a single segmented control with shared selection, size, and disabled state via context.

Features:

• ToggleButton compound parts — ToggleButton.Label with automatic selected / unselected text colors
• variant — default, ghost (selected appearance is shared)
• size — sm, md, lg
• isIconOnly for square icon-only toggles
• Controlled (isSelected / onChange) and uncontrolled (defaultSelected) modes
• useToggleButton hook for reading state from descendants
• ToggleButtonGroup selectionMode — single or multiple, with selectedKeys / onSelectionChange exposed as Set<string>
• ToggleButtonGroup orientation — horizontal or vertical
• isDetached to render each toggle as a separate rounded button instead of an attached segment
• fullWidth to stretch the group across its container

Usage:

import { ToggleButton, ToggleButtonGroup } from "heroui-native-pro";

export function Example() {
  return (
    <ToggleButtonGroup
      selectionMode="single"
      defaultSelectedKeys={["center"]}
    >
      <ToggleButton id="left">Left</ToggleButton>
      <ToggleButton id="center">Center</ToggleButton>
      <ToggleButton id="right">Right</ToggleButton>
    </ToggleButtonGroup>
  );
}

For complete documentation and examples, see the ToggleButton and ToggleButtonGroup component pages.

Widget

A dashboard container surface that pairs an optional header and footer with an elevated content card. Drop a LineChart, BarChart, table, or KPI block inside Widget.Content and you get the standard dashboard chrome — title, description, inline legend, and footer summary — without hand-rolling cards on every screen.

Features:

• Compound parts — Widget.Header, Widget.Title, Widget.Description, Widget.Content, Widget.Footer, Widget.Legend, Widget.LegendItem
• Two-layer surface — outer bg-surface-secondary shell with an inner elevated bg-surface content card
• Inline Widget.Legend with Widget.LegendItem entries that accept colorClassName (theme tokens, preferred) or color (inline color string)
• Slot-aware Widget.LegendItem with classNames, styles, and textProps overrides for the wrapper, dot, and label slots
• animation="disable-all" on the root cascades through AnimationSettingsProvider to every animated descendant (charts, progress bars, etc.)
• All sub-components are optional — drop Widget.Footer for compact panels, omit Widget.Header for chart-only widgets

Usage:

import { LineChart, Widget } from "heroui-native-pro";

export function Example() {
  return (
    <Widget>
      <Widget.Header>
        <Widget.Title>Tokens Over Time</Widget.Title>
        <Widget.Legend>
          <Widget.LegendItem colorClassName="bg-chart-4">
            Input
          </Widget.LegendItem>
          <Widget.LegendItem colorClassName="bg-chart-1">
            Output
          </Widget.LegendItem>
        </Widget.Legend>
      </Widget.Header>
      <Widget.Content>
        <LineChart data={DATA} xKey="date" yKeys={["input", "output"]}>
          {/* ... */}
        </LineChart>
      </Widget.Content>
    </Widget>
  );
}

For complete documentation and examples, see the Widget component page.

Component Improvements

CalendarYearPicker Sync Fix

Fixed a sync issue where the Calendar and RangeCalendar year picker stayed pinned to the page the calendar was opened on after paging via the next / previous month buttons. The year picker trigger heading and the highlighted / scrolled-to year now always reflect the page the user is currently viewing.

⚠️ Breaking Changes

Removed variant from Date Picker triggers

The variant prop has been removed from the Trigger subcomponents of DateField, DatePicker, and DateRangePicker. Each trigger now hardcodes its variant internally to enforce consistent styling across the date picker family:

• DateField.Trigger always renders with variant="unstyled"
• DatePicker.Trigger always renders with variant="default"
• DateRangePicker.Trigger always renders with variant="default"

Trigger prop types are now Omit<SelectTriggerProps, "variant">, so passing variant will produce a TypeScript error.

Migration:

If you were passing the previous default variant, just drop the prop:

// Before
<DatePicker>
  <DatePicker.Trigger variant="default">
    <DatePicker.Value />
  </DatePicker.Trigger>
</DatePicker>

// After
<DatePicker>
  <DatePicker.Trigger>
    <DatePicker.Value />
  </DatePicker.Trigger>
</DatePicker>

If you previously passed variant="unstyled" to DatePicker.Trigger or DateRangePicker.Trigger to render a fully custom trigger, you will need to recompose the trigger using the lower-level Select.Trigger from heroui-native directly, since these triggers now always render in the default variant.

There are no runtime behavior changes for consumers using the previous defaults.

Updated Documentation

The following documentation pages have been updated to reflect the changes in this release:

• BarChart — New component page with basic, horizontal, gradient, grouped, stacked, and animated examples
• LineChart — Now links out to the underlying victory-native docs
• Calendar and RangeCalendar — Now reference @internationalized/date for locale, time-zone, and non-Gregorian calendar context
• DateField, DatePicker, DateRangePicker — variant removed from Trigger prop tables
• Badge, ProgressBar, ProgressCircle, ToggleButton, ToggleButtonGroup, Widget — New component pages

HeroUI Native Pro Figma

The full Figma design library for HeroUI Native Pro is now available — including both open source and Pro components, ready to drop into your designs.

• Every component perfectly matched to the code
• Open source + Pro components included
• Start designing faster with production-ready building blocks

Get it from your dashboard or check the Figma setup guide.

Links

• Installation
• Component Documentation
• UI for Agents
• Figma Setup Guide