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.
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.
Follow the installation guide to authenticate the private registry with your HEROUI_PERSONAL_TOKEN, install heroui-native-pro, and wire up HeroUINativeProvider.
This release introduces 3 new components across buttons and data display:
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:
FAB.Trigger, FAB.Portal, FAB.Overlay, FAB.Content, FAB.Item, and FAB.ItemLabelplacement and align resolution from the trigger's screen position, with manual overrides supporteditemsAppearance, with a tunable animation.stagger.itemWindow for stagger intensitytranslate / scaleuseFAB and useFABAnimation hooks for controlled state and custom backdrops (e.g. a blur backdrop built on expo-blur)FullWindowOverlay portal support through the optional react-native-screens peer dependencyanimation="disable-all" to skip animation across the entire subtreeUsage:
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.
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:
FlipCard.Front and FlipCard.BackisFlipped + onFlipChange) and uncontrolled (defaultFlipped) modes, with isPressDisabled to opt out of tap-to-flipdirection ("horizontal" = rotateY, "vertical" = rotateX) and rotation ("normal" / "reverse")accessibilityElementsHidden and importantForAccessibility; the root exposes accessibilityRole="button" and its selected stateanimation.progress.springConfig, with "disable-all" and per-face "disabled" escape hatchesuseFlipCard and useFlipCardAnimation hooks for advanced consumers building custom progress-driven partsUsage:
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.
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:
Timeline.Item, Timeline.Leading, Timeline.Rail, Timeline.Marker, Timeline.Connector, Timeline.Content, Timeline.Title, and Timeline.Descriptionstatus tones — "default", "muted", "current", "success", "warning", and "danger" — drive the marker colorsize ("sm" / "md" / "lg") and density ("compact" / "comfortable") scale markers, text, and vertical rhythm togetherTimeline.Leading column for timestamps or short metadata to the left of the railTimeline.Marker; connector can be forced on item 0 with forcesrc/primitives/timeline) with a styled Uniwind layer on topUsage:
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.
The following documentation pages have been updated to reflect the changes in this release:
1.0.0-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.
Fitness App v1.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.