Tabs

Switch between content panels with default and line style variants. Built on Radix UI.

Default

Pill-style tabs with a background indicator.

Overview content here.

Line Variant

Underline-style tabs with a bottom border indicator.

Account settings.

Disabled Tab

Individual tabs can be disabled.

Active tab content.

Installation

npx visor add tabs

This copies two files into your project:

components/ui/tabs/tabs.tsx — the component
components/ui/tabs/tabs.module.css — the styles

Usage

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

<Tabs defaultValue="overview">
  <TabsList variant="default">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content.</TabsContent>
  <TabsContent value="settings">Settings content.</TabsContent>
</Tabs>

API Reference

TabsProps

No props data available for “tabs”.

Sub-components

Component	Element	Purpose
`Tabs`	`<div>` (Radix Root)	Root container. Requires `defaultValue` or controlled `value`.
`TabsList`	`<div>`	Horizontal container for tab triggers. Accepts `variant` prop.
`TabsTrigger`	`<button>`	Clickable tab button tied to content via matching `value` prop.
`TabsContent`	`<div>`	Content panel that displays when its matching trigger is active.

Accessibility

Built on @radix-ui/react-tabs with full WAI-ARIA tab semantics.
TabsList has role="tablist"; triggers have role="tab" with aria-selected.
Content panels have role="tabpanel" linked to their trigger via aria-labelledby.
ArrowLeft / ArrowRight navigate between triggers; Enter or Space activates.
Disabled triggers receive aria-disabled="true" and are skipped in keyboard navigation.

On this page