Tabs

Organize content into tabbed panels, rendering one panel at a time.

1
---
2
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bejamas/ui/components/card';
3
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bejamas/ui/components/tabs';
4
---
5

6
<Tabs defaultValue="overview" class="w-full max-w-[400px]">
7
  <TabsList>
8
    <TabsTrigger value="overview">Overview</TabsTrigger>
9
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
10
    <TabsTrigger value="reports">Reports</TabsTrigger>
11
    <TabsTrigger value="settings">Settings</TabsTrigger>
12
  </TabsList>
13
  <TabsContent value="overview">
14
    <Card>
15
      <CardHeader>
16
        <CardTitle>Overview</CardTitle>
17
        <CardDescription>
18
          View key metrics and recent activity across active projects.
19
        </CardDescription>
20
      </CardHeader>
21
      <CardContent class="text-sm text-muted-foreground">
22
        You have 12 active projects and 3 pending tasks.
23
      </CardContent>
24
    </Card>
25
  </TabsContent>
26
  <TabsContent value="analytics">
27
    <Card>
28
      <CardHeader>
29
        <CardTitle>Analytics</CardTitle>
30
        <CardDescription>
31
          Track engagement trends and performance over time.
32
        </CardDescription>
33
      </CardHeader>
34
      <CardContent class="text-sm text-muted-foreground">
35
        Page views are up 25% compared to last month.
36
      </CardContent>
37
    </Card>
38
  </TabsContent>
39
  <TabsContent value="reports">
40
    <Card>
41
      <CardHeader>
42
        <CardTitle>Reports</CardTitle>
43
        <CardDescription>
44
          Generate detailed exports for sharing and analysis.
45
        </CardDescription>
46
      </CardHeader>
47
      <CardContent class="text-sm text-muted-foreground">
48
        You have 5 reports ready to export.
49
      </CardContent>
50
    </Card>
51
  </TabsContent>
52
  <TabsContent value="settings">
53
    <Card>
54
      <CardHeader>
55
        <CardTitle>Settings</CardTitle>
56
        <CardDescription>
57
          Manage account preferences and personalization options.
58
        </CardDescription>
59
      </CardHeader>
60
      <CardContent class="text-sm text-muted-foreground">
61
        Configure notifications, security, and themes.
62
      </CardContent>
63
    </Card>
64
  </TabsContent>
65
</Tabs>

Installation

bunx bejamas add tabs

npx bejamas add tabs

pnpm dlx bejamas add tabs

yarn dlx bejamas add tabs

Usage

1
---
2
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@bejamas/ui/components/tabs';
3
---
4

5
<Tabs defaultValue="overview">
6
  <TabsList>
7
    <TabsTrigger value="overview">Overview</TabsTrigger>
8
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
9
  </TabsList>
10
  <TabsContent value="overview">Overview content...</TabsContent>
11
  <TabsContent value="analytics">Analytics content...</TabsContent>
12
</Tabs>

Props

Prop	Type	Default
`class`	`string`	`""`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`defaultValue`	`string`

Examples

Line Animated

1
---
2
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bejamas/ui/components/tabs';
3
---
4

5
<Tabs defaultValue="overview">
6
  <TabsList variant="line-animated" class="mb-4">
7
    <TabsTrigger value="overview">Overview</TabsTrigger>
8
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
9
    <TabsTrigger value="reports">Reports</TabsTrigger>
10
  </TabsList>
11
  <TabsContent value="overview">Line variant content.</TabsContent>
12
  <TabsContent value="analytics">Analytics content.</TabsContent>
13
  <TabsContent value="reports">Reports content.</TabsContent>
14
</Tabs>

Vertical

1
---
2
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bejamas/ui/components/tabs';
3
---
4

5
<Tabs defaultValue="profile" orientation="vertical" class="w-full max-w-xl">
6
  <TabsList class="min-w-40">
7
    <TabsTrigger value="profile" class="justify-start px-3">Profile</TabsTrigger>
8
    <TabsTrigger value="billing" class="justify-start px-3">Billing</TabsTrigger>
9
    <TabsTrigger value="notifications" class="justify-start px-3">Notifications</TabsTrigger>
10
  </TabsList>
11
  <TabsContent value="profile" class="rounded-lg border p-4">
12
    Profile settings content.
13
  </TabsContent>
14
  <TabsContent value="billing" class="rounded-lg border p-4">
15
    Billing settings content.
16
  </TabsContent>
17
  <TabsContent value="notifications" class="rounded-lg border p-4">
18
    Notifications settings content.
19
  </TabsContent>
20
</Tabs>

Disabled

1
---
2
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bejamas/ui/components/tabs';
3
---
4

5
<Tabs defaultValue="active">
6
  <TabsList>
7
    <TabsTrigger value="active">Active</TabsTrigger>
8
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
9
    <TabsTrigger value="secondary">Secondary</TabsTrigger>
10
  </TabsList>
11
  <TabsContent value="active">Active tab content.</TabsContent>
12
  <TabsContent value="disabled">Disabled tab content.</TabsContent>
13
  <TabsContent value="secondary">Secondary tab content.</TabsContent>
14
</Tabs>

Overflow

1
---
2
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bejamas/ui/components/tabs';
3
---
4

5
<Tabs defaultValue="monday">
6
  <TabsList class="w-full max-w-[20rem] justify-start overflow-x-auto whitespace-nowrap">
7
    <TabsTrigger value="monday" class="shrink-0">Monday</TabsTrigger>
8
    <TabsTrigger value="tuesday" class="shrink-0">Tuesday</TabsTrigger>
9
    <TabsTrigger value="wednesday" class="shrink-0">Wednesday</TabsTrigger>
10
    <TabsTrigger value="thursday" class="shrink-0">Thursday</TabsTrigger>
11
    <TabsTrigger value="friday" class="shrink-0">Friday</TabsTrigger>
12
    <TabsTrigger value="saturday" class="shrink-0">Saturday</TabsTrigger>
13
    <TabsTrigger value="sunday" class="shrink-0">Sunday</TabsTrigger>
14
  </TabsList>
15
  <TabsContent value="monday">Monday content.</TabsContent>
16
  <TabsContent value="tuesday">Tuesday content.</TabsContent>
17
  <TabsContent value="wednesday">Wednesday content.</TabsContent>
18
  <TabsContent value="thursday">Thursday content.</TabsContent>
19
  <TabsContent value="friday">Friday content.</TabsContent>
20
  <TabsContent value="saturday">Saturday content.</TabsContent>
21
  <TabsContent value="sunday">Sunday content.</TabsContent>
22
</Tabs>

Direction Animation

1
---
2
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bejamas/ui/components/tabs';
3
---
4

5
<Tabs defaultValue="overview">
6
  <TabsList>
7
    <TabsTrigger value="overview">Overview</TabsTrigger>
8
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
9
    <TabsTrigger value="reports">Reports</TabsTrigger>
10
  </TabsList>
11
  <TabsContent value="overview" animation="direction">Direction-aware overview.</TabsContent>
12
  <TabsContent value="analytics" animation="direction">Direction-aware analytics.</TabsContent>
13
  <TabsContent value="reports" animation="direction">Direction-aware reports.</TabsContent>
14
</Tabs>

Sizes

1
---
2
import { Tabs, TabsList, TabsTrigger } from '@bejamas/ui/components/tabs';
3
---
4

5
<div class="space-y-4">
6
  <Tabs defaultValue="sm-account">
7
    <TabsList size="sm">
8
      <TabsTrigger value="sm-account" class="text-xs px-2">Account</TabsTrigger>
9
      <TabsTrigger value="sm-password" class="text-xs px-2">Password</TabsTrigger>
10
    </TabsList>
11
  </Tabs>
12

13
  <Tabs defaultValue="md-account">
14
    <TabsList size="default">
15
      <TabsTrigger value="md-account">Account</TabsTrigger>
16
      <TabsTrigger value="md-password">Password</TabsTrigger>
17
    </TabsList>
18
  </Tabs>
19

20
  <Tabs defaultValue="lg-account">
21
    <TabsList size="lg">
22
      <TabsTrigger value="lg-account" class="text-base px-4">Account</TabsTrigger>
23
      <TabsTrigger value="lg-password" class="text-base px-4">Password</TabsTrigger>
24
    </TabsList>
25
  </Tabs>
26
</div>

API Reference

Events

The tabs component emits custom events that you can listen to:

Event	Detail	Description
`tabs:change`	`{ value: string }`	Fired when the selected tab changes

Waiting for logs…

1
<Tabs id="my-tabs" defaultValue="tab1">
2
  <TabsList>
3
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
4
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
5
  </TabsList>
6
  <TabsContent value="tab1">Content 1</TabsContent>
7
  <TabsContent value="tab2">Content 2</TabsContent>
8
</Tabs>
9

10
<script>
11
  const tabs = document.getElementById('my-tabs');
12

13
  tabs.addEventListener('tabs:change', (e) => {
14
    console.log('Selected tab:', e.detail.value);
15
  });
16
</script>

Programmatic Control

You can control the tabs programmatically by dispatching a tabs:set event:

const tabs = document.getElementById('my-tabs');

// Select a tab
tabs.dispatchEvent(new CustomEvent('tabs:set', {
  detail: { value: 'tab2' }
}));

Variants

Prop	Element	Values	Default
`variant`	tabs-list	`indicator`, `default`, `line`, `line-animated`	`indicator`
`size`	tabs-list	`sm`, `default`, `lg`	`default`
`animation`	tabs-content	`none`, `fade`, `slide`, `direction`	`none`

Data Attributes

The tabs component sets these data attributes that you can use for styling or querying state:

Attribute	Element	Description
`data-orientation`	tabs	Current orientation (`horizontal` or `vertical`)
`data-variant`	tabs-list	Current list variant (`indicator`, `default`, `line`, or `line-animated`)
`data-activation-direction`	tabs-content	Last activation direction after tab change (`left`, `right`, `up`, or `down`, not set on initial mount)
`data-state`	tabs-trigger	Current state (`active` or `inactive`)

CSS Variables

The tabs indicator exposes CSS variables for animation:

Variable	Element	Description
`--active-tab-left`	tabs-indicator	Left position of active tab
`--active-tab-width`	tabs-indicator	Width of active tab
`--active-tab-top`	tabs-indicator	Top position of active tab
`--active-tab-height`	tabs-indicator	Height of active tab