saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Tabs

Tabs

A set of layered sections of content—known as tab panels—displayed one at a time.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/tabs.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
<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 settings...</TabsContent>
</Tabs>

Examples

Underline

Loading...
Underline variant tabs.

Pills

Loading...
Pills variant tabs.

With Tooltip

Loading...
Icon tabs with tooltips.

API Reference

PropTypeDefaultDescription
defaultValuestring—The default active tab.
valuestring—The controlled active tab.
onValueChange(value: string) => void—Event handler for tab changes.
PreviousTableNextText Effect

On This Page

  • Installation
  • Usage
  • Examples
  • Underline
  • Pills
  • With Tooltip
  • API Reference

Today's Scenes

4 of 6 Complete

Track scene completion status and shooting progress.

Scene 12A - Coffee ShopWrapped
Scene 12B - StreetShooting
Scene 13 - ApartmentPending

View a summary of your project performance and key metrics.

Showing all items including active and archived.

Welcome to your dashboard. Here you can view your recent activity.