Tabs

Accessible tabs with a spring-animated pill or underline indicator, roving arrow-key focus, direction-aware panel transitions and lazily mounted panels that keep their state.

Update your profile. Changes are visible to your team.

NameUsername

Open

variant

orientation

activationMode

Installation

npx shadcn@latest add @glint-ui/tabs

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/tabs.json

Usage

import { Tabs } from "@/components/ui/tabs";

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

Props

Prop	Type	Default	Description
variant	"pill" \| "underline"	"pill"	Indicator style.
orientation	"horizontal" \| "vertical"	"horizontal"	Tab list direction and arrow keys.
activationMode	"automatic" \| "manual"	"automatic"	Select on arrow focus, or on Enter/Space.
defaultValue	string	—	Initially selected tab (uncontrolled).
value	ReactNode	—	Selected tab (controlled, with onValueChange).
children	ReactNode	—	TabsList with TabsTrigger items, then TabsContent panels.
className	string	—	Extra classes for the root element.