Component

Mobile Dock

A floating mobile dock with a moving active indicator, spaced icon targets, and a raised center action.

Preview

Today

$482.40

Live

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { MobileDock } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/mobile-dock.json

Copied source import

code

import "@/styles/axie.css";import { MobileDock } from "@/components/axie/mobile-dock";

Prefer @axie/mobile-dock? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { MobileDock } from "axie-ui";import {  ActivityLogIcon,  BarChartIcon,  CalendarIcon,  DashboardIcon,  PlusIcon} from "@radix-ui/react-icons";export function Example() {  return (    <MobileDock      action={{ icon: <PlusIcon />, label: "Add entry" }}      defaultValue="home"      items={[        { icon: <DashboardIcon />, label: "Home", value: "home", href: "/" },        { icon: <BarChartIcon />, label: "Overview", value: "overview", href: "/overview" },        { icon: <CalendarIcon />, label: "Plan", value: "plan", href: "/plan" },        { icon: <ActivityLogIcon />, label: "Activity", value: "activity", href: "/activity" }      ]}    />  );}

Accessibility

Keep icon-only items labeled with accessible names.
Use `aria-current` for navigational links and `aria-pressed` for local state buttons.
Respect safe-area spacing so the dock does not collide with mobile browser chrome.

Static

Use static placement when the dock belongs inside a preview, drawer, or demo frame.

API Reference

Prop	Type	Default	Description
items	MobileDockItem[]	-	Navigation items with value, label, icon, optional href, and disabled state.
action	MobileDockAction	-	Raised center action rendered between the item groups.
value	string	-	Controlled active item value.
defaultValue	string	-	Initial active item value for uncontrolled usage.
onValueChange	(value, item) => void	-	Called when a dock item is selected.
position	"fixed" \| "static"	fixed	Use fixed viewport placement or static placement for previews.
ariaLabel	string	Primary navigation	Accessible label for the nav landmark.