Tabs

Open in GitHub

Open in Figma

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

1
---
2
import { CircleCheckIcon } from '@lucide/astro';
3

4
import { Avatar, AvatarFallback, AvatarImage } from '@bejamas/ui/components/avatar';
5
import { Badge } from '@bejamas/ui/components/badge';
6
import { Button } from '@bejamas/ui/components/button';
7
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@bejamas/ui/components/card';
8
import { Separator } from '@bejamas/ui/components/separator';
9
import { Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger } from '@bejamas/ui/components/tabs';
10
---
11

12
<Tabs class="w-full max-w-md" defaultValue="features">
13
  <TabsList class="w-full">
14
    <TabsIndicator />
15
    <TabsTrigger value="features" aria-selected="true">Features</TabsTrigger>
16
    <TabsTrigger value="pricing">Pricing</TabsTrigger>
17
    <TabsTrigger value="testimonials">Testimonials</TabsTrigger>
18
  </TabsList>
19
  <TabsContent value="features">
20
    <Card>
21
      <CardHeader>
22
        <CardTitle>Powerful Features</CardTitle>
23
        <CardDescription>Everything you need to grow your business</CardDescription>
24
      </CardHeader>
25
      <CardContent>
26
        <div class="space-y-4">
27
          <div class="flex items-start gap-3">
28
            <div>
29
              <h4 class="font-medium mb-1">Lightning Fast Performance <Badge variant="primary">New</Badge></h4>
30
              <p class="text-sm text-muted-foreground">Optimized for speed and efficiency</p>
31
            </div>
32
          </div>
33
          <Separator />
34
          <div class="flex items-start gap-3">
35
            <div>
36
              <h4 class="font-medium mb-1">Easy Integration <Badge variant="success">Popular</Badge></h4>
37
              <p class="text-sm text-muted-foreground">Set up in minutes, not hours</p>
38
            </div>
39
          </div>
40
        </div>
41
      </CardContent>
42
      <CardFooter>
43
        <Button variant="outline" class="w-full">Explore All Features</Button>
44
      </CardFooter>
45
    </Card>
46
  </TabsContent>
47
  <TabsContent value="pricing">
48
    <Card>
49
      <CardHeader>
50
        <div class="flex items-center justify-between">
51
          <CardTitle>Pro Plan</CardTitle>
52
          <Badge variant="primary">Most Popular</Badge>
53
        </div>
54
        <CardDescription>Perfect for growing teams</CardDescription>
55
      </CardHeader>
56
      <CardContent>
57
        <div class="mb-4">
58
          <span class="text-4xl font-medium">$49</span>
59
          <span class="text-muted-foreground">/month</span>
60
        </div>
61
        <ul class="space-y-2 text-sm">
62
          <li class="flex items-center gap-2">
63
            <CircleCheckIcon class="size-5" />
64
            Unlimited projects
65
          </li>
66
          <li class="flex items-center gap-2">
67
            <CircleCheckIcon class="size-5" />
68
            Priority support
69
          </li>
70
          <li class="flex items-center gap-2">
71
            <CircleCheckIcon class="size-5" />
72
            Advanced analytics
73
          </li>
74
        </ul>
75
      </CardContent>
76
      <CardFooter class="flex gap-2">
77
        <Button class="flex-1">Get Started</Button>
78
        <Button variant="outline">Compare Plans</Button>
79
      </CardFooter>
80
    </Card>
81
  </TabsContent>
82
  <TabsContent value="testimonials">
83
    <Card>
84
      <CardContent>
85
        <p class="text-lg mb-4 italic">
86
          "This product transformed how we work. Highly recommended for any growing business!"
87
        </p>
88
        <div class="flex items-center gap-3">
89
          <Avatar>
90
            <AvatarImage src="/avatars/sarah.jpg" alt="Sarah Johnson" />
91
            <AvatarFallback>SJ</AvatarFallback>
92
          </Avatar>
93
          <div>
94
            <p class="font-semibold">Sarah Johnson</p>
95
            <p class="text-sm text-muted-foreground">CEO, TechCorp</p>
96
          </div>
97
        </div>
98
      </CardContent>
99
      <CardFooter>
100
        <Button variant="outline" class="w-full">Read More Stories</Button>
101
      </CardFooter>
102
    </Card>
103
  </TabsContent>
104
</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
  </TabsList>
9
  <TabsContent value="overview">Content...</TabsContent>
10
</Tabs>

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

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' }
}));

Data Attributes

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

Attribute	Element	Description
`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