saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor
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 @saturation-ui/tabs

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. 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.