Tabs
Segmented and underline tabs with a gliding active indicator.
Tabs switch between views in the same place. Cuelark tabs have one indicator that glides and resizes to the active tab, in a segmented or underline style, and the active tab is styled before hydration too, so server-rendered pages never flash.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/tabs.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/tabs.
Builds on: motion
Usage
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="overview">…</TabsContent>
<TabsContent value="settings">…</TabsContent>
</Tabs>Examples
Underline with icons
An underline indicator that follows the label width.
Motion
One indicator moves like a caterpillar: it stretches to cover both tabs, then its trailing edge catches up (GSAP timeline).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Tabs
Extends Radix Tabs.Root (value, defaultValue, onValueChange, orientation, activationMode).
TabsList
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "segmented" | "underline" | "segmented" | Indicator style. |
TabsTrigger · TabsContent
Extend the matching Radix parts.
Accessibility
- Implements the WAI-ARIA tabs pattern: tablist, tab and tabpanel roles with selection state.
- Arrow keys move between tabs (vertical lists use Up and Down); Home and End jump to the ends.
- The indicator is decorative and its motion is disabled for reduced motion.
FAQ
Also searched as: react tabs · shadcn tabs · animated tabs · segmented control · underline tabs