Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/tabs

Lineage

Spoke

Anatomy

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

export default () => (
	<Tabs>
		<TabsList>
			<TabsTrigger />
		</TabsList>
		<TabsContent />
	</Tabs>
)

Spoke utility classes

Class	Fallback chain	Description
`--tabs-list`	`var(--muted)`	Colour for list tabs variant
`--tabs-list-foreground`	`var(--muted-foreground)`	Text/icon colour for list tabs variant
`--tabs-list-radius`	`var(--radius-lg)`	Border radius for list
`--tabs-trigger-active`	`var(--background)`	Colour for trigger active tabs variant
`--tabs-trigger-active-foreground`	`var(--foreground)`	Text/icon colour for trigger active tabs variant
`--tabs-trigger-active-border`	`var(--input)`	Border colour for trigger active tabs variant
`--tabs-trigger-radius`	`var(--radius-md)`	Border radius for trigger
`--shadow-tabs-trigger`	`var(--shadow-sm)`	Box shadow for tabs trigger