Chuv Studio

02 — COMPONENTS

Tabs

Content switcher for portfolio narratives, service breakdowns, stack views, and project documentation. Built from shadcn/ui and adapted to the Chuv Studio section rules with zero corner radius on all internal elements.

Variants

Two navigation styles adapted to the studio foundation

Default
High-level view of the project, scope, and business context.
<Tabs defaultValue="overview">
  <TabsList variant="default">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="process">Process</TabsTrigger>
    <TabsTrigger value="result">Result</TabsTrigger>
  </TabsList>
</Tabs>
Line
Best for lighter navigation patterns inside a dense section.
<TabsList variant="line">
  <TabsTrigger value="design">Design</TabsTrigger>
  <TabsTrigger value="dev">Dev</TabsTrigger>
  <TabsTrigger value="handoff">Handoff</TabsTrigger>
</TabsList>

Studio Contexts

Examples that fit portfolio, services, and stack storytelling

Case Study

Context, challenge, and strategic framing.

Services

Identity systems, tone, and visual consistency.

Tool Stack

Figma, design systems, flows, and prototypes.
<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="process">Process</TabsTrigger>
  </TabsList>
</Tabs>

States & Orientation

Horizontal and vertical patterns with icons and disabled states

Icons
Use icons when the tab labels map to different categories fast.
<TabsTrigger value="stack">
  <Code2 />
  Stack
</TabsTrigger>
Disabled
Disabled tabs are useful when a section exists in the roadmap but is not yet ready to navigate.
<TabsTrigger value="coming-soon" disabled>
  Coming Soon
</TabsTrigger>
Vertical
Vertical tabs work well when content is dense and the navigation needs to stay persistent beside the panel.
<Tabs orientation="vertical" defaultValue="research">
  <TabsList variant="line">
    <TabsTrigger value="research">Research</TabsTrigger>
    <TabsTrigger value="interface">Interface</TabsTrigger>
    <TabsTrigger value="system">System</TabsTrigger>
  </TabsList>
</Tabs>

Interactive Demo

Preview variant, orientation, icon usage, and dark mode

Variant

Orientation

Use tabs to separate narratives without fragmenting the section.
<Tabs defaultValue="overview">
  <TabsList variant="default">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="details">Details</TabsTrigger>
    <TabsTrigger value="handoff">Handoff</TabsTrigger>
  </TabsList>
</Tabs>

Usage

Import, props, and accessibility notes

Import

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/components/ui/tabs"

Props

Tabs.defaultValue

string

Initial active tab

Tabs.orientation

"horizontal" | "vertical"

"horizontal"

TabsList.variant

"default" | "line"

"default"

TabsTrigger.value

string

Associates trigger with content panel

TabsTrigger.disabled

boolean

Disables navigation for a tab

Accessibility

  • Tabs should organize related content panels, not unrelated navigation destinations.
  • Keep labels short and distinct so keyboard navigation stays clear.
  • Disabled tabs should be used sparingly and only when the unavailable state is meaningful to the user.