Tabs

This component requires the FyskProvider. See Quick Start →

Preview

Tabs

TypeScript

Make changes to your account here.

Installation

bash

1npx shadcn@latest add https://fysk.dev/r/tabs.json

Usage

tsx

1import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui"
2
3<Tabs defaultValue="account">
4<TabsList>
5  <TabsTrigger value="account">Account</TabsTrigger>
6  <TabsTrigger value="password" loading>Password</TabsTrigger>
7</TabsList>
8<TabsContent value="account">Content Acc</TabsContent>
9<TabsContent value="password">Content Pass</TabsContent>
10</Tabs>

Examples

Default

Standard clean tab grouping with background highlights.

Component

TypeScript

Make changes to your account here.

Variants

Showcase of multiple visual styles: glass (frosted), underline (minimal), and pill (button-like).

Component

TypeScript

Features

Aesthetic Variants: Includes default, glass (frosted), underline, and pill styles.
Per-Tab Loading: Support for individual loading states on triggers with integrated spinners and layout transitions.
Unified Sizing: Consistent heights across all segments from xs to xl.
Layout Control: Support for fullWidth lists to span the entire container width.
Motion Enhanced: Uses Framer Motion for smooth tab transitions and layout-aware indicators.

Props

Tabs

Prop	Type	Default	Description
`variant`	`"default" \| "glass" \| "underline" \| "pill"`	`"default"`	The visual style of the tab system.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	The vertical size of the whole tab system.
`fullWidth`	`boolean`	`false`	Whether the tabs list should take up all available horizontal space.

TabsTrigger

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Shows an animated spinner and disables the tab during activity.

Accepts all standard props from Radix UI Tabs.