primitives

Tabs

Switch between equivalent views of the same object (Overview / Settings / Activity). For navigation between *different* objects use the sidebar; for filtering a list use a SegmentedControl or filter chips.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/tabs.json

Or import from the workspace package:

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@8maverik8/design";

Examples

Default

Overview content

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
  <TabsContent value="activity">Activity content</TabsContent>
</Tabs>

Line variant

<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
</Tabs>

Variants

TabsList variant

default(default)Filled segmented look — page-level tabs inside content.
lineUnderline + brand-violet accent on the active tab. Used for top-of-page tabs in product chrome.

Guidelines

Use Tabs only when each panel is an equivalent view of the same thing.If switching tabs changes *what* you're looking at, it's navigation — use the sidebar.
Nest tabs inside tabs.Two-level tabs are a sign that the page model is wrong — usually one level should be a sidebar item or a filter.
Use the `line` variant for the page-top product tabs (active label paints brand-violet).