Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Tabs

Tabs

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

Preview

Installation

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

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

Examples

Solid Pills

Discover fresh ideas, trending topics, and hidden gems curated just for you. Start exploring and let your curiosity lead the way!

With Tooltip

Discover fresh ideas, trending topics, and hidden gems curated just for you. Start exploring and let your curiosity lead the way!

API Reference

Tabs

The root component that manages tab state. Accepts all props from Radix UI Tabs.Root.

TabsList

Container for tab triggers with muted background styling.

TabsTrigger

Individual tab button with active state styling and focus management.

TabsContent

Content panel for each tab, displayed when the corresponding trigger is active.

On This Page

  • Preview
  • Installation
  • Usage
  • Examples
  • API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.