Wensity

Tabs

Tabbed navigation for sections, settings, and segmented controls.

tabsnavigationsegmentedpillsunderlineverticalprimitivedashboard
Loading preview...

Examples

Practical examples and common states for the same installable component.

Default

Subtle background fill on active tab, clean and minimal.

examples/tabs-default.tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/wensity/tabs";


export function TabsDefault() {
  return (
    <Tabs variant="default" defaultValue="dashboard">
      <TabsList>
        <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
        <TabsTrigger value="team">Team</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="dashboard">Dashboard content</TabsContent>
      <TabsContent value="team">Team content</TabsContent>
      <TabsContent value="settings">Settings content</TabsContent>
    </Tabs>
  );
}

Underline

Sliding underline indicator with spring physics.

examples/tabs-underline.tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/wensity/tabs";


export function TabsUnderline() {
  return (
    <Tabs variant="underline" defaultValue="preview">
      <TabsList>
        <TabsTrigger value="preview">Preview</TabsTrigger>
        <TabsTrigger value="code">Code</TabsTrigger>
        <TabsTrigger value="docs">Docs</TabsTrigger>
      </TabsList>
      <TabsContent value="preview">Preview content</TabsContent>
      <TabsContent value="code">Code content</TabsContent>
      <TabsContent value="docs">Docs content</TabsContent>
    </Tabs>
  );
}

Pills

Rounded capsule tabs with floating background indicator.

examples/tabs-pills.tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/wensity/tabs";


export function TabsPills() {
  return (
    <Tabs variant="pills" defaultValue="all">
      <TabsList>
        <TabsTrigger value="all">All</TabsTrigger>
        <TabsTrigger value="active">Active</TabsTrigger>
        <TabsTrigger value="archived">Archived</TabsTrigger>
      </TabsList>
      <TabsContent value="all">All items</TabsContent>
      <TabsContent value="active">Active items</TabsContent>
      <TabsContent value="archived">Archived items</TabsContent>
    </Tabs>
  );
}

Segmented

iOS-style segmented control with sliding backdrop.

examples/tabs-segmented.tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/wensity/tabs";


export function TabsSegmented() {
  return (
    <Tabs variant="segmented" defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="members">Members</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Overview content</TabsContent>
      <TabsContent value="members">Members content</TabsContent>
      <TabsContent value="settings">Settings content</TabsContent>
    </Tabs>
  );
}

Vertical

Sidebar-style vertical tabs with sliding accent bar.

examples/tabs-vertical.tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/wensity/tabs";


export function TabsVertical() {
  return (
    <Tabs variant="vertical" defaultValue="general">
      <TabsList>
        <TabsTrigger value="general">General</TabsTrigger>
        <TabsTrigger value="team">Team</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="general">General settings</TabsContent>
      <TabsContent value="team">Team management</TabsContent>
      <TabsContent value="billing">Billing details</TabsContent>
    </Tabs>
  );
}