Tabs

A set of layered sections of content, each associated with a tab trigger. Supports a default underline style and a pill variant. Built on Radix UI Tabs.

Overview content goes here.

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@bloomkit/react";
 
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    <p>Overview content.</p>
  </TabsContent>
  <TabsContent value="analytics">
    <p>Analytics content.</p>
  </TabsContent>
  <TabsContent value="settings">
    <p>Settings content.</p>
  </TabsContent>
</Tabs>

Pill variant

<TabsList variant="pill">
  <TabsTrigger value="all">All</TabsTrigger>
  <TabsTrigger value="active">Active</TabsTrigger>
  <TabsTrigger value="archived">Archived</TabsTrigger>
</TabsList>

Sub-components

Component	Description
`Tabs`	Root container — sets the active tab context
`TabsList`	Container for tab triggers, accepts a `variant` prop
`TabsTrigger`	Individual tab button linked to a content panel
`TabsContent`	Content panel shown when its tab is active

Tabs props

Prop	Type	Default	Description
value	string	—	Controlled active tab value
defaultValue	string	—	The value of the tab that should be active on initial render
onValueChange	(value: string) => void	—	Called when the active tab changes
children	ReactNode	—	TabsList and TabsContent elements

TabsList props

Prop	Type	Default	Description
variant	"default" \| "pill"	"default"	Visual style of the tabs list
className	string	—	Additional Tailwind classes

TabsTrigger props

Prop	Type	Default	Description
value	string	—	Unique identifier matching a TabsContent value
children	ReactNode	—	Tab label content

TabsContent props

Prop	Type	Default	Description
value	string	—	Unique identifier matching a TabsTrigger value
children	ReactNode	—	Content rendered when this tab is active