Tabs

Navigation MenuBreadcrumb

Switches between views, underline or segmented.

Base UI APISource
Newest screens first.

Installation

pnpm dlx shadcn@latest add https://yea-ui.vercel.app/r/tabs.json

Usage

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"
<Tabs defaultValue="latest">
  <TabsList>
    <TabsTab value="latest">Latest</TabsTab>
    <TabsTab value="popular">Most popular</TabsTab>
  </TabsList>
  <TabsPanel value="latest">Newest screens first.</TabsPanel>
  <TabsPanel value="popular">Most saved this week.</TabsPanel>
</Tabs>

Examples

Segmented

A pill control for short, mutually exclusive options.

API reference

Tabs

Root. The variant is shared with every list and tab inside through context.

PropTypeDefaultDescription
variant"underline" | "segmented""underline"Sliding underline or pill indicator.

TabsList

Holds the tabs and renders the animated indicator.

TabsTab

One tab. The value must match a panel.

TabsPanel

Content shown when its value is active.

All other props are forwarded to the underlying Base UI component.