DockiOS

Floating bottom tab bar with a gliding accent disc, labels on the active tab, badge dots, and an optional action button

$ npx lumioui add dock

import { Dock } from "@/components/ui/dock/dock";

Props9

items	DockItem[]
value	string	Currently selected item value.
onValueChange	(value: string) => void
variant?	"floating" \| "attached" \| "fused"	"floating" renders the detached pill (default); "attached" renders a classic full-width bar; "fused" welds the tabs into one bar — the active tab peels away with a gooey neck.
labels?	"active" \| "always" \| "never"	Which items show their label. Default "active".
action?	DockAction	Prominent action disc appended at the end of the bar.
haptic?	"selection" \| "light" \| false	Haptic on selection. Default "selection".
safeArea?	boolean	Lift above / pad past the home indicator. Default true.
className?	string

Dock — Attached barattached.tsx

dock/variants/attached.tsx open

Floating bottom tab bar with a gliding accent disc, labels on the active tab, badge dots, and an optional action button

import { DockAttached } from "@/components/ui/dock/variants/attached";

export function Example() {
  return (
    <DockAttached />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Dock } from "../dock";

/** DockAttached — classic full-width tab bar, labels always on. */
export function DockAttached() {
  const [tab, setTab] = React.useState("home");
  return (
    <View className="w-full">
      <Dock
        variant="attached"
        labels="always"
        value={tab}
        onValueChange={setTab}
        items={[
          { value: "home", icon: "home", label: "Home" },
          { value: "orders", icon: "package", label: "Orders" },
          { value: "wishlist", icon: "heart", label: "Saved" },
          { value: "profile", icon: "user", label: "Account" },
        ]}
      />
    </View>
  );
}

Dock — Icon-onlycompact.tsx

dock/variants/compact.tsx open

Floating bottom tab bar with a gliding accent disc, labels on the active tab, badge dots, and an optional action button

import { DockCompact } from "@/components/ui/dock/variants/compact";

export function Example() {
  return (
    <DockCompact />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Dock } from "../dock";

/** DockCompact — icon-only floating pill; the gliding disc carries the state. */
export function DockCompact() {
  const [tab, setTab] = React.useState("feed");
  return (
    <View className="w-full items-center py-4">
      <Dock
        variant="floating"
        labels="never"
        value={tab}
        onValueChange={setTab}
        items={[
          { value: "feed", icon: "home", label: "Feed" },
          { value: "explore", icon: "grid", label: "Explore" },
          { value: "activity", icon: "bell", label: "Activity", badge: true },
          { value: "profile", icon: "user", label: "Profile" },
        ]}
      />
    </View>
  );
}

Dock — Floatingfloating.tsx

dock/variants/floating.tsx open

Floating bottom tab bar with a gliding accent disc, labels on the active tab, badge dots, and an optional action button

import { DockFloating } from "@/components/ui/dock/variants/floating";

export function Example() {
  return (
    <DockFloating />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Dock } from "../dock";

/** DockFloating — detached pill with gliding accent disc, badges, action disc. */
export function DockFloating() {
  const [tab, setTab] = React.useState("home");
  return (
    <View className="w-full items-center py-4">
      <Dock
        value={tab}
        onValueChange={setTab}
        items={[
          { value: "home", icon: "home", label: "Home" },
          { value: "search", icon: "search", label: "Search" },
          { value: "messages", icon: "message-circle", label: "Messages", badge: 3 },
          { value: "profile", icon: "user", label: "Profile" },
        ]}
        action={{ icon: "plus", accessibilityLabel: "Create", onPress: () => setTab("search") }}
      />
    </View>
  );
}

Dock — Fusedfused.tsx

dock/variants/fused.tsx open

Floating bottom tab bar with a gliding accent disc, labels on the active tab, badge dots, and an optional action button

import { DockFused } from "@/components/ui/dock/variants/fused";

export function Example() {
  return (
    <DockFused />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Dock } from "../dock";

/** DockFused — tabs welded into one bar; the active tab peels away with a
 *  gooey neck. */
export function DockFused() {
  const [tab, setTab] = React.useState("home");
  return (
    <View className="w-full items-center py-4">
      <Dock
        variant="fused"
        labels="always"
        value={tab}
        onValueChange={setTab}
        items={[
          { value: "home", icon: "home", label: "Home" },
          { value: "search", icon: "search", label: "Search" },
          { value: "messages", icon: "message-circle", label: "Messages", badge: 3 },
          { value: "profile", icon: "user", label: "Profile" },
        ]}
      />
    </View>
  );
}