1.0.0-beta.6

The sixth beta of HeroUI Native Pro introduces three brand-new components: a portal-rendered FAB that expands into a list of actions with automatic screen-aware placement, a FlipCard that flips between two faces with a spring-driven 3D rotation, and a Timeline for event histories, activity logs, and milestone feeds. All three follow the same compound-component and animation-cascade conventions as the rest of the Pro library and slot into the existing Buttons and Data Display categories.

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 3 new components across buttons and data display:

• FAB: Floating action button that expands into a list of actions with automatic content placement, portal rendering, and a shared open/close animation. (Documentation)
• FlipCard: Pressable card that flips between a front and back face with a spring-driven 3D rotation. (Documentation)
• Timeline: Composable event-history component for feeds, activity logs, and vertical milestone chronologies. (Documentation)

FAB

A floating action button that toggles a list of actions. The root resolves placement and align automatically from the trigger's screen position — a FAB in the bottom-right corner opens upwards with end alignment, a FAB in the top-left opens downwards with start alignment — and drives a shared [idle, open, close] progress that orchestrates the overlay, items, and trigger rotation. Content renders in a portal (backed by FullWindowOverlay on iOS) so it floats above everything else on screen.

Features:

• Compound parts — FAB.Trigger, FAB.Portal, FAB.Overlay, FAB.Content, FAB.Item, and FAB.ItemLabel
• Automatic placement and align resolution from the trigger's screen position, with manual overrides supported
• Staggered or simultaneous item appearance via itemsAppearance, with a tunable animation.stagger.itemWindow for stagger intensity
• Progress-driven animations on the trigger rotation, overlay opacity, and per-item translate / scale
• useFAB and useFABAnimation hooks for controlled state and custom backdrops (e.g. a blur backdrop built on expo-blur)
• iOS FullWindowOverlay portal support through the optional react-native-screens peer dependency
• Cascading animation="disable-all" to skip animation across the entire subtree

Usage:

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

export function Example() {
  return (
    <FAB className="absolute bottom-6 right-6">
      <FAB.Trigger>
        <PlusIcon />
      </FAB.Trigger>
      <FAB.Portal>
        <FAB.Overlay />
        <FAB.Content>
          <FAB.Item onPress={handleNewMessage}>New message</FAB.Item>
          <FAB.Item onPress={handleNewLabel}>New label</FAB.Item>
        </FAB.Content>
      </FAB.Portal>
    </FAB>
  );
}

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

FlipCard

A pressable card that flips between two faces with a spring-driven 3D rotation. Tapping the root toggles the flip state (controllable via isFlipped + onFlipChange or uncontrolled via defaultFlipped), and the off-screen face is removed from hit testing and the accessibility tree so hidden interactive content can't intercept touches. Use it for reveal interactions on cards — think travel destinations, trading cards, or hidden statistics.

Features:

• Compound parts — FlipCard.Front and FlipCard.Back
• Controlled (isFlipped + onFlipChange) and uncontrolled (defaultFlipped) modes, with isPressDisabled to opt out of tap-to-flip
• Configurable direction ("horizontal" = rotateY, "vertical" = rotateX) and rotation ("normal" / "reverse")
• True 3D feel with perspective and a mid-flip scale dip that de-emphasizes the flat edge
• Accessibility: off-screen face is hidden via accessibilityElementsHidden and importantForAccessibility; the root exposes accessibilityRole="button" and its selected state
• Customizable flip spring through animation.progress.springConfig, with "disable-all" and per-face "disabled" escape hatches
• useFlipCard and useFlipCardAnimation hooks for advanced consumers building custom progress-driven parts

Usage:

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

export function Example() {
  return (
    <FlipCard className="aspect-[1.3]">
      <FlipCard.Front>{/* front face content */}</FlipCard.Front>
      <FlipCard.Back className="bg-surface-secondary p-6">
        {/* back face content */}
      </FlipCard.Back>
    </FlipCard>
  );
}

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

Timeline

A composable event-history component for feeds, activity logs, and vertical milestone chronologies. The root manages size, density, and default itemAlign context, and connectors use per-item layout measurements to bridge variable-height rows without hard-coding gaps.

Features:

• Compound parts — Timeline.Item, Timeline.Leading, Timeline.Rail, Timeline.Marker, Timeline.Connector, Timeline.Content, Timeline.Title, and Timeline.Description
• Per-item status tones — "default", "muted", "current", "success", "warning", and "danger" — drive the marker color
• size ("sm" / "md" / "lg") and density ("compact" / "comfortable") scale markers, text, and vertical rhythm together
• Optional Timeline.Leading column for timestamps or short metadata to the left of the rail
• Connectors are positioned via layout measurements so they bridge variable-height items cleanly, and are automatically omitted on the first item
• Custom markers via icon children on Timeline.Marker; connector can be forced on item 0 with force
• Built on a lower-level primitives layer (src/primitives/timeline) with a styled Uniwind layer on top

Usage:

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

export function Example() {
  return (
    <Timeline density="compact" size="sm">
      <Timeline.Item status="success">
        <Timeline.Rail />
        <Timeline.Content>
          <Timeline.Title>Order placed</Timeline.Title>
          <Timeline.Description>We received your order.</Timeline.Description>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item status="current">
        <Timeline.Rail />
        <Timeline.Content>
          <Timeline.Title>Processing</Timeline.Title>
          <Timeline.Description>Preparing your items.</Timeline.Description>
        </Timeline.Content>
      </Timeline.Item>
    </Timeline>
  );
}

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

Updated Documentation

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

• FAB — New component page covering auto placement, manual overrides, staggered vs. simultaneous item appearance, controlled state, custom blur backdrops, and animation configuration
• FlipCard — New component page with horizontal / vertical directions, reverse rotation, controlled mode, and custom spring configuration
• Timeline — New component page covering statuses, leading columns, custom markers, sizes, and density variants

Links

• Installation
• Component Documentation
• UI for Agents