Bottom Tab Bar

A mobile navigation bar with icons and labels. The selected tab gets a colored icon, a pill background, and a dot.

Dependencies: motion
Size: 175 lines
Controls: 6 controls

example.tsx

1import { BottomTabBar } from "@/components/onycx/bottom-tab-bar";23export default function Example() {4  return (5    <BottomTabBar6      defaultValue={"home"}7      accent={"#E85002"}8      faint={"#5B6470"}9      border={"#23262E"}10      label={"Primary"}11      fixed={false}12    />13  );14}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/bottom-tab-bar.json

1 · Dependencies

npm install motion

2 · Copy the source

components/onycx/bottom-tab-bar.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the bottom-tab-bar.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
tabs	BottomTab[]	—	{ key, label, icon, href? }; icon is one of home, reports, map, heart, person (outline when idle, filled when active).
value / defaultValue / onChange	string / string / (key) => void	undefined / "home"	Controlled or uncontrolled active tab; defaultValue falls back to the first tab when it matches no key.
label	string	"Primary"	aria-label of the <nav> landmark.
accent / faint	string	"#E85002" / "#5B6470"	Active and inactive icon and label colours; the bubble uses the accent at 14% with a 32% border.
surface / border	string	"rgba(16, 19, 25, 0.92)" / "#23262E"	Bar background and top hairline. Filled icons cut their inner lines in #101319.
fixed	boolean	false	Pin to the viewport bottom and pad by env(safe-area-inset-bottom).