Tabs

Tabs with a gliding indicator in three styles, roving focus and proper tab/tabpanel semantics.

3 files · 223 locdeps: clsx, tailwind-merge

Traffic is up 18% week over week. Most visitors arrive from search.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/tabs.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs tabs

Usage

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

<Tabs defaultValue="a">
  <TabsList>
    <TabsTrigger value="a">Account</TabsTrigger>
    <TabsTrigger value="b">Billing</TabsTrigger>
  </TabsList>
  <TabsContent value="a">…</TabsContent>
  <TabsContent value="b">…</TabsContent>
</Tabs>

API

Prop	Type	Default	Description
variant	"pill" \| "underline" \| "ghost"	"pill"	Indicator style (on <Tabs>).
value / defaultValue	string	—	Active tab (controlled / uncontrolled).
onValueChange	(v: string) => void	—	Change handler.
forceMount	boolean	—	On <TabsContent>: keep inactive panels mounted.

← PreviousToast Next →Command