Skip to content

Theme Editor

⌘E

Background

L 0.5

C 0.2

H 250

Foreground

L 0.5

C 0.2

H 250

Primary

L 0.5

C 0.2

H 250

Primary FG

L 0.5

C 0.2

H 250

Secondary

L 0.5

C 0.2

H 250

Secondary FG

L 0.5

C 0.2

H 250

Accent

L 0.5

C 0.2

H 250

Accent FG

L 0.5

C 0.2

H 250

Card

L 0.5

C 0.2

H 250

Card FG

L 0.5

C 0.2

H 250

Popover

L 0.5

C 0.2

H 250

Popover FG

L 0.5

C 0.2

H 250

Muted

L 0.5

C 0.2

H 250

Muted FG

L 0.5

C 0.2

H 250

Border

L 0.5

C 0.2

H 250

Input

L 0.5

C 0.2

H 250

Ring

L 0.5

C 0.2

H 250

Destructive

L 0.5

C 0.2

H 250

Destructive FG

L 0.5

C 0.2

H 250

Chart 1

L 0.5

C 0.2

H 250

Chart 2

L 0.5

C 0.2

H 250

Chart 3

L 0.5

C 0.2

H 250

Chart 4

L 0.5

C 0.2

H 250

Chart 5

L 0.5

C 0.2

H 250

Theme Editor

⌘E

Background

L 0.5

C 0.2

H 250

Foreground

L 0.5

C 0.2

H 250

Primary

L 0.5

C 0.2

H 250

Primary FG

L 0.5

C 0.2

H 250

Secondary

L 0.5

C 0.2

H 250

Secondary FG

L 0.5

C 0.2

H 250

Accent

L 0.5

C 0.2

H 250

Accent FG

L 0.5

C 0.2

H 250

Card

L 0.5

C 0.2

H 250

Card FG

L 0.5

C 0.2

H 250

Popover

L 0.5

C 0.2

H 250

Popover FG

L 0.5

C 0.2

H 250

Muted

L 0.5

C 0.2

H 250

Muted FG

L 0.5

C 0.2

H 250

Border

L 0.5

C 0.2

H 250

Input

L 0.5

C 0.2

H 250

Ring

L 0.5

C 0.2

H 250

Destructive

L 0.5

C 0.2

H 250

Destructive FG

L 0.5

C 0.2

H 250

Chart 1

L 0.5

C 0.2

H 250

Chart 2

L 0.5

C 0.2

H 250

Chart 3

L 0.5

C 0.2

H 250

Chart 4

L 0.5

C 0.2

H 250

Chart 5

L 0.5

C 0.2

H 250

Tabs

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

Preview
Source

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

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

<Tabs class="w-full max-w-md" defaultValue="features">
  <TabsList class="w-full">
    <TabsIndicator />
    <TabsTrigger value="features" aria-selected="true">Features</TabsTrigger>
    <TabsTrigger value="pricing">Pricing</TabsTrigger>
    <TabsTrigger value="testimonials">Testimonials</TabsTrigger>
  </TabsList>
  <TabsContent value="features">
    <Card>
      <CardHeader>
        <CardTitle>Powerful Features</CardTitle>
        <CardDescription>Everything you need to grow your business</CardDescription>
      </CardHeader>
      <CardContent>
        <div class="space-y-4">
          <div class="flex items-start gap-3">
            <div>
              <h4 class="font-medium mb-1">Lightning Fast Performance <Badge variant="primary">New</Badge></h4>
              <p class="text-sm text-muted-foreground">Optimized for speed and efficiency</p>
            </div>
          </div>
          <Separator />
          <div class="flex items-start gap-3">
            <div>
              <h4 class="font-medium mb-1">Easy Integration <Badge variant="success">Popular</Badge></h4>
              <p class="text-sm text-muted-foreground">Set up in minutes, not hours</p>
            </div>
          </div>
        </div>
      </CardContent>
      <CardFooter>
        <Button variant="outline" class="w-full">Explore All Features</Button>
      </CardFooter>
    </Card>
  </TabsContent>
  <TabsContent value="pricing">
    <Card>
      <CardHeader>
        <div class="flex items-center justify-between">
          <CardTitle>Pro Plan</CardTitle>
          <Badge variant="primary">Most Popular</Badge>
        </div>
        <CardDescription>Perfect for growing teams</CardDescription>
      </CardHeader>
      <CardContent>
        <div class="mb-4">
          <span class="text-4xl font-medium">$49</span>
          <span class="text-muted-foreground">/month</span>
        </div>
        <ul class="space-y-2 text-sm">
          <li class="flex items-center gap-2">
            <CircleCheckIcon class="size-5" />
            Unlimited projects
          </li>
          <li class="flex items-center gap-2">
            <CircleCheckIcon class="size-5" />
            Priority support
          </li>
          <li class="flex items-center gap-2">
            <CircleCheckIcon class="size-5" />
            Advanced analytics
          </li>
        </ul>
      </CardContent>
      <CardFooter class="flex gap-2">
        <Button class="flex-1">Get Started</Button>
        <Button variant="outline">Compare Plans</Button>
      </CardFooter>
    </Card>
  </TabsContent>
  <TabsContent value="testimonials">
    <Card>
      <CardContent>
        <p class="text-lg mb-4 italic">
          "This product transformed how we work. Highly recommended for any growing business!"
        </p>
        <div class="flex items-center gap-3">
          <Avatar>
            <AvatarImage src="/avatars/sarah.jpg" alt="Sarah Johnson" />
            <AvatarFallback>SJ</AvatarFallback>
          </Avatar>
          <div>
            <p class="font-semibold">Sarah Johnson</p>
            <p class="text-sm text-muted-foreground">CEO, TechCorp</p>
          </div>
        </div>
      </CardContent>
      <CardFooter>
        <Button variant="outline" class="w-full">Read More Stories</Button>
      </CardFooter>
    </Card>
  </TabsContent>
</Tabs>

Installation

CLI
Manual

 bunx bejamas add tabs

 npx bejamas add tabs

 pnpm dlx bejamas add tabs

 yarn dlx bejamas add tabs

---
/**
 * @component Tabs
 * @title Tabs
 * @description Organize content into tabbed panels, rendering one panel at a time.
 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2523-6067&t=YFStJ3V8fXEO8QD8-4
 *
 * @preview
 *
 * <Tabs class="w-full max-w-md" defaultValue="features">
 *   <TabsList class="w-full">
 *     <TabsIndicator />
 *     <TabsTrigger value="features" aria-selected="true">Features</TabsTrigger>
 *     <TabsTrigger value="pricing">Pricing</TabsTrigger>
 *     <TabsTrigger value="testimonials">Testimonials</TabsTrigger>
 *   </TabsList>
 *   <TabsContent value="features">
 *     <Card>
 *       <CardHeader>
 *         <CardTitle>Powerful Features</CardTitle>
 *         <CardDescription>Everything you need to grow your business</CardDescription>
 *       </CardHeader>
 *       <CardContent>
 *         <div class="space-y-4">
 *           <div class="flex items-start gap-3">
 *             <div>
 *               <h4 class="font-medium mb-1">Lightning Fast Performance <Badge variant="primary">New</Badge></h4>
 *               <p class="text-sm text-muted-foreground">Optimized for speed and efficiency</p>
 *             </div>
 *           </div>
 *           <Separator />
 *           <div class="flex items-start gap-3">
 *             <div>
 *               <h4 class="font-medium mb-1">Easy Integration <Badge variant="success">Popular</Badge></h4>
 *               <p class="text-sm text-muted-foreground">Set up in minutes, not hours</p>
 *             </div>
 *           </div>
 *         </div>
 *       </CardContent>
 *       <CardFooter>
 *         <Button variant="outline" class="w-full">Explore All Features</Button>
 *       </CardFooter>
 *     </Card>
 *   </TabsContent>
 *   <TabsContent value="pricing">
 *     <Card>
 *       <CardHeader>
 *         <div class="flex items-center justify-between">
 *           <CardTitle>Pro Plan</CardTitle>
 *           <Badge variant="primary">Most Popular</Badge>
 *         </div>
 *         <CardDescription>Perfect for growing teams</CardDescription>
 *       </CardHeader>
 *       <CardContent>
 *         <div class="mb-4">
 *           <span class="text-4xl font-medium">$49</span>
 *           <span class="text-muted-foreground">/month</span>
 *         </div>
 *         <ul class="space-y-2 text-sm">
 *           <li class="flex items-center gap-2">
 *             <CircleCheckIcon class="size-5" />
 *             Unlimited projects
 *           </li>
 *           <li class="flex items-center gap-2">
 *             <CircleCheckIcon class="size-5" />
 *             Priority support
 *           </li>
 *           <li class="flex items-center gap-2">
 *             <CircleCheckIcon class="size-5" />
 *             Advanced analytics
 *           </li>
 *         </ul>
 *       </CardContent>
 *       <CardFooter class="flex gap-2">
 *         <Button class="flex-1">Get Started</Button>
 *         <Button variant="outline">Compare Plans</Button>
 *       </CardFooter>
 *     </Card>
 *   </TabsContent>
 *   <TabsContent value="testimonials">
 *     <Card>
 *       <CardContent>
 *         <p class="text-lg mb-4 italic">
 *           "This product transformed how we work. Highly recommended for any growing business!"
 *         </p>
 *         <div class="flex items-center gap-3">
 *           <Avatar>
 *             <AvatarImage src="/avatars/sarah.jpg" alt="Sarah Johnson" />
 *             <AvatarFallback>SJ</AvatarFallback>
 *           </Avatar>
 *           <div>
 *             <p class="font-semibold">Sarah Johnson</p>
 *             <p class="text-sm text-muted-foreground">CEO, TechCorp</p>
 *           </div>
 *         </div>
 *       </CardContent>
 *       <CardFooter>
 *         <Button variant="outline" class="w-full">Read More Stories</Button>
 *       </CardFooter>
 *     </Card>
 *   </TabsContent>
 * </Tabs>
 *
 * @usage
 *
 * ```astro
 * ---
 * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@bejamas/ui/components/tabs';
 * ---
 *
 * <Tabs defaultValue="overview">
 *   <TabsList>
 *     <TabsTrigger value="overview">Overview</TabsTrigger>
 *   </TabsList>
 *   <TabsContent value="overview">Content...</TabsContent>
 * </Tabs>
 * ```
 */

import type { HTMLAttributes } from "astro/types";
import { cn } from "@bejamas/ui/lib/utils";

type Props = {
  class?: string;
} & HTMLAttributes<"div">;

const { class: className = "", ...rest } = Astro.props as Props;
---

<div {...rest} data-slot="tabs" class={cn("flex flex-col gap-2", className)}>
  <slot />
</div>

<script>
  import { createTabs } from "@data-slot/tabs";
  document
    .querySelectorAll('[data-slot="tabs"]')
    .forEach((el) => createTabs(el));
</script>

Usage

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

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Content...</TabsContent>
</Tabs>