Yugen UI

Tabs

TabList switches between sibling content panels without leaving the page.

The selected tab has bold text and a 3px brand bar along the bottom. Hovering a tab shows a gray bar.
You have 3 unread messages.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { Tabs, TabsList, TabsTrigger, TabsContent } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Appearance subtle

Shows a background on hover. Use it on toolbars.

Size

small, medium (default), large.

Vertical

orientation="vertical" for secondary navigation on settings pages.

Usage

Do
  • Keep tab labels short (1–2 words).
  • Keep to about 6 tabs per row at most.
Don't
  • Don't use Tabs for sequential steps. Use a wizard or stepper.
  • Don't nest Tabs inside Tabs.

Props

Prop · TypeDefaultDescription
Tabs.defaultValue / valuestringDefault: —Selected tab.
Tabs.orientation"horizontal" | "vertical"Default: "horizontal"Orientation.
TabsList.appearance"transparent" | "subtle"Default: "transparent"Background on hover.
TabsList.size"small" | "medium" | "large"Default: "medium"Tab size.
TabsList.material"glass" | "glass-clear"Default: —Yugen Labs — a floating glass tab bar; the selected tab is a rounded fill.
TabsList.minimizedbooleanDefault: falseTabs with an icon keep only the icon (the name is still read out, and shows again on focus). Use with useScrollMinimize({ target?, threshold?, topOffset? }).
TabsTrigger.iconReactNodeDefault: —Icon before the label (brand-colored when active).