Tabs

A set of layered sections of content, known as tab panels.

tsx

1
2
3
4
5
6
7
8<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account panel</TabsContent>
  <TabsContent value="password">Password panel</TabsContent>
</Tabs>

Tabs — sélecteur d'un panel parmi plusieurs, tous préchargés dans le DOM. TabsList porte les triggers, TabsContent les panels. Un seul TabsContent est visible à la fois (les autres portent hidden).

Bon pour : préférences groupées, dashboards multi-vue, docs (Preview / Code). Mauvais pour : navigation entre pages (utiliser NavigationMenu).

Installation

Terminal

$ bext ui add tabs

Usage

tsx

1
2
3
4
5
6
7
8
9
10import { Tabs, TabsList, TabsTrigger, TabsContent } from "@bext-stack/ui/primitives"

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings...</TabsContent>
  <TabsContent value="password">Password change...</TabsContent>
</Tabs>

Anatomy

<Tabs defaultValue="a">
  ├── <TabsList>
  │   ├── <TabsTrigger value="a">A</TabsTrigger>
  │   └── <TabsTrigger value="b">B</TabsTrigger>
  ├── <TabsContent value="a">Panel A</TabsContent>
  └── <TabsContent value="b">Panel B</TabsContent>
</Tabs>

API Reference

Tabs

Prop	Type	Default	Description
defaultValue	string	—	Valeur du tab actif au montage.
className	string	—	undefined

TabsList

Prop	Type	Default	Description
children	ReactNode	—	undefined

TabsTrigger

Prop	Type	Default	Description
value	string	—	Doit matcher un TabsContent frère.
children	ReactNode	—	undefined

TabsContent

Prop	Type	Default	Description
value	string	—	undefined
children	ReactNode	—	undefined

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="tabs"	Tabs root	—	undefined
data-state	TabsTrigger, TabsContent	"active" \| "inactive"	undefined
data-value	TabsTrigger, TabsContent	string	undefined

Keyboard

Key	Action
`Arrow Left / Right`	Naviguer entre triggers.
`Home / End`	Premier / dernier trigger.
`Enter / Space`	Activer le trigger focus.

Accessibility

TabsList porte role="tablist", TabsTrigger role="tab" aria-selected aria-controls, TabsContent role="tabpanel" aria-labelledby.

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// Tabs switch between mutually-exclusive panels. A single `active`
// signal drives the trigger styles + which panel shows via <Show>;
// clicking a tab updates only the bound nodes, no re-render.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Tabs</h1>
      <p style="color:#64748b;margin-top:0">A set of layered sections, one visible at a time (signal-driven).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// Tabs switch between mutually-exclusive panels. The active state +
// click handlers live in a "use client" island so they hydrate.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Tabs</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A set of layered sections, one visible at a time.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Table Textarea →

On This Page