Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA floating translucent tab bar with a raised centre action button that opens a speed dial, keeping the home indicator clear and the content padded so nothing hides behind it. Use this when your phone app has four destinations and one primary create action that should always be within thumb reach.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when your phone app has four destinations and one primary create action that should always be within thumb reach.
Do not use it for apps with a single screen or when the create action belongs inside a screen.
It composes @tealmac/tab-bar, @tealmac/speed-dial, which the CLI installs for you.
import { FloatingGlassTabBarFab } from "@/components/floating-glass-tab-bar-fab"<div className="bg-muted relative h-80 w-full max-w-sm overflow-hidden rounded-xl border">
<div className="h-full overflow-y-auto p-4 pb-28 text-sm">
<p>Tab: {tab}</p>
<p role="status">Created: {made}</p>
{Array.from({ length: 10 }, (_, i) => (
<p key={i} className="mt-3">
Content line {i + 1}
</p>
))}
</div>
<FloatingGlassTabBarFab
items={items}
value={tab}
onValueChange={setTab}
actions={[
{
id: "note",
label: "Note",
icon: <FileTextIcon />,
onSelect: () => setMade("a note"),
},
{
id: "photo",
label: "Photo",
icon: <CameraIcon />,
onSelect: () => setMade("a photo"),
},
]}
/>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
items | TabBarItem[] | required | The tabs. |
actions | SpeedDialAction[] | required | The create actions. |
value | string | required | Selected tab. |
onValueChange | (id: string) => void | required | Tab handler. |
The pattern ships with a Testing Library test (floating-glass-tab-bar-fab.test.tsx) that drives it through roles and the keyboard.