Tabs

Tabs Component

Tabbed interface with keyboard navigation and ARIA support. Great for organizing content.

Import

import { Tabs } from '@covers/ui';

Usage

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from '@covers/ui';

<Tabs defaultValue="overview" className="w-full">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    <p>Overview content here.</p>
  </TabsContent>
  <TabsContent value="analytics">
    <p>Analytics content here.</p>
  </TabsContent>
  <TabsContent value="settings">
    <p>Settings content here.</p>
  </TabsContent>
</Tabs>

// Controlled tabs
const [tab, setTab] = useState('overview');
<Tabs value={tab} onValueChange={setTab}>
  ...
</Tabs>

Props

Name	Type	Description
defaultValue	string	Initial active tab
value	string	Controlled active tab
onValueChange	(value: string) => void	Callback when tab changes

Default Styling

bg-slate-800 rounded-lg

Part of CoverKit

This component is part of CoverKit (@covers/ui), a dark-first React component library.

View on GitHub →View on npm →