Tabs

Tabs wrappers

Overview

View your key metrics and recent project activity. Track progress across all your active projects.

You have 12 active projects and 3 pending tasks.

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
...

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

const tabs = [
  ['overview', 'Overview', 'View your key metrics and recent project activity. Track progress across all your active projects.', 'You have 12 active projects and 3 pending tasks.'],
  ['analytics', 'Analytics', 'Track performance and user engagement metrics. Monitor trends and identify growth opportunities.', 'Page views are up 25% compared to last month.'],
  ['reports', 'Reports', 'Generate and download your detailed reports. Export data in multiple formats for analysis.', 'You have 5 reports ready and available to export.'],
  ['settings', 'Settings', 'Manage your account preferences and options. Customize your experience to fit your needs.', 'Configure notifications, security, and themes.'],
] as const

export default function TabsDemoExample() {
  return (
    <Tabs defaultValue="overview" class="w-[400px]">
      <TabsList>
        {tabs.map(([value, label]) => <TabsTrigger value={value}>{label}</TabsTrigger>)}
      </TabsList>
      {tabs.map(([value, label, description, content]) => (
        <TabsContent value={value}>
          <Card>
            <CardHeader><CardTitle>{label}</CardTitle><CardDescription>{description}</CardDescription></CardHeader>
            <CardContent class="text-sm text-muted-foreground">{content}</CardContent>
          </Card>
        </TabsContent>
      ))}
    </Tabs>
  )
}

Installation

npx @fictjs/shadcn@latest add tabs

Install the runtime dependencies:

npm install @fictjs/radix-ui

Copy the Fict shadcn component into your project.

Source

components/ui/tabs.tsx

src/components/ui/tabs.tsx

import { Tabs as TabsPrimitive } from '@fictjs/radix-ui'

import { cn } from '@/lib/cn'

export const Tabs = TabsPrimitive.Root

type GenericProps = {
  class?: string
  children?: unknown
  [key: string]: unknown
}

export function TabsList(props: GenericProps & { variant?: 'default' | 'line' }) {
  const { class: className, variant = 'default', ...rest } = props
  return (
    <TabsPrimitive.List
      data-variant={variant}
      class={cn(
        'inline-flex h-9 items-center justify-center text-muted-foreground',
        variant === 'default' ? 'rounded-lg bg-muted p-1' : 'gap-4 border-b bg-transparent p-0',
        className,
      )}
      {...rest}
    />
  )
}

export function TabsTrigger(props: GenericProps) {
  const { class: className, ...rest } = props
  return (
    <TabsPrimitive.Trigger
      class={cn('inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm [[data-variant=line]_&]:rounded-none [[data-variant=line]_&]:border-b-2 [[data-variant=line]_&]:border-transparent [[data-variant=line]_&]:px-0 [[data-variant=line]_&]:shadow-none [[data-variant=line]_&][data-state=active]:border-foreground', className)}
      {...rest}
    />
  )
}

export function TabsContent(props: GenericProps) {
  const { class: className, ...rest } = props
  return <TabsPrimitive.Content class={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)} {...rest} />
}

Usage

Examples

Line

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

...

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

export default function TabsLineExample() {
  return (
    <Tabs defaultValue="overview">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

Vertical

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

...

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

export default function TabsVerticalExample() {
  return (
    <Tabs defaultValue="account" orientation="vertical">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="notifications">Notifications</TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

Disabled

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

...

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

export default function TabsDisabledExample() {
  return (
    <Tabs defaultValue="home">
      <TabsList>
        <TabsTrigger value="home">Home</TabsTrigger>
        <TabsTrigger value="settings" disabled>Disabled</TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

Icons

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

...

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

function AppWindowIcon() {
  return <svg aria-hidden="true" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18" /></svg>
}

function CodeIcon() {
  return <svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 9-3 3 3 3M16 9l3 3-3 3M14 5l-4 14" /></svg>
}

export default function TabsIconsExample() {
  return (
    <Tabs defaultValue="preview">
      <TabsList>
        <TabsTrigger value="preview"><AppWindowIcon />Preview</TabsTrigger>
        <TabsTrigger value="code"><CodeIcon />Code</TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

Rtl

نظرة عامة

عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.

لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
...

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

const translations = {
  ar: {
    dir: 'rtl',
    tabs: [
      ['overview', 'نظرة عامة', 'عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.', 'لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.'],
      ['analytics', 'التحليلات', 'تتبع مقاييس الأداء ومشاركة المستخدمين. راقب الاتجاهات وحدد فرص النمو.', 'زادت مشاهدات الصفحة بنسبة ٢٥٪ مقارنة بالشهر الماضي.'],
      ['reports', 'التقارير', 'إنشاء وتنزيل تقاريرك التفصيلية. تصدير البيانات بتنسيقات متعددة للتحليل.', 'لديك ٥ تقارير جاهزة ومتاحة للتصدير.'],
      ['settings', 'الإعدادات', 'إدارة تفضيلات حسابك وخياراته. تخصيص تجربتك لتناسب احتياجاتك.', 'تكوين الإشعارات والأمان والسمات.'],
    ],
  },
  he: {
    dir: 'rtl',
    tabs: [
      ['overview', 'סקירה כללית', 'הצג את המדדים העיקריים שלך ופעילות הפרויקט האחרונה.', 'יש לך 12 פרויקטים פעילים ו-3 משימות ממתינות.'],
      ['analytics', 'אנליטיקה', 'עקוב אחר ביצועים ומדדי מעורבות משתמשים.', 'צפיות בדף עלו ב-25% בהשוואה לחודש שעבר.'],
      ['reports', 'דוחות', 'צור והורד את הדוחות המפורטים שלך.', 'יש לך 5 דוחות מוכנים וזמינים לייצוא.'],
      ['settings', 'הגדרות', 'נהל את העדפות החשבון והאפשרויות שלך.', 'הגדר התראות, אבטחה וערכות נושא.'],
    ],
  },
  en: {
    dir: 'ltr',
    tabs: [
      ['overview', 'Overview', 'View your key metrics and recent project activity.', 'You have 12 active projects and 3 pending tasks.'],
      ['analytics', 'Analytics', 'Track performance and user engagement metrics.', 'Page views are up 25% compared to last month.'],
      ['reports', 'Reports', 'Generate and download your detailed reports.', 'You have 5 reports ready and available to export.'],
      ['settings', 'Settings', 'Manage your account preferences and options.', 'Configure notifications, security, and themes.'],
    ],
  },
} as const

export default function TabsRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  const locale = translations[language]
  return (
    <div>
      <select aria-label="Preview language" value={language} onChange={event => language = event.currentTarget.value as keyof typeof translations}>
        <option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option>
      </select>
      <Tabs defaultValue="overview" class="w-full max-w-sm" dir={locale.dir}>
        <TabsList>{locale.tabs.map(([value, label]) => <TabsTrigger value={value}>{label}</TabsTrigger>)}</TabsList>
        {locale.tabs.map(([value, label, description, content]) => (
          <TabsContent value={value}>
            <Card dir={locale.dir}>
              <CardHeader><CardTitle>{label}</CardTitle><CardDescription>{description}</CardDescription></CardHeader>
              <CardContent class="text-sm text-muted-foreground">{content}</CardContent>
            </Card>
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}

Table Textarea