Three to five top destinations on Mobile, as a labeled bar or a floating dock.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/tab-barPlayground
Labeled, Inbox
Floating, Inbox
Style
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/tab-bar
Accessibility
- A nav of links, with aria-current on the active one.
- Unread dots have a text equivalent in the label.
Motion
- In the dock, the ink pill stretches to the new tab and the label slides in.
- In the labeled bar, the 5% pill slides between icons.
- With reduced motion, the pill swaps.
Responsive behavior
- Icons 20 and labels 10 in the labeled bar. Tabs 44 in the dock.
Performance
- The active pill is one shared layout element.
- On Floating, only the active tab mounts its label.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import TabBar from @/components/fetaui/tab-bar after installing it. items is required, each with value, label and icon.
- With href a tab is a link. Without it, a button that reports through onValueChange.
- badge is read out with the label and drawn as a dot, so write it as words.
- It does not position itself, so pin it to the screen edge yourself. homeIndicator applies to labeled only.
Related
TabsComponentSwitch between views of the same thing. Panels swipe with the finger and the indicator follows.SidebarComponentNav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.Bottom SheetComponentA panel that slides up for one focused task. Mobile docks with a grabber, and Web floats at 480.Navigation MenuComponentA tray pill of triggers with soft panels that morph as you move across them.BadgeComponentA short label that names a status or a category. The pill stays ink and the mark carries the tone.