Tabs

A Radix-based tab system with underline active indicator and glass-morphism styling.

Preview

This is the overview tab. It displays a summary of the main content.

Installation

npx shadcn@latest add @shadszn/tabs

Usage

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

export default function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <p>Overview content goes here.</p>
      </TabsContent>
      <TabsContent value="analytics">
        <p>Analytics content goes here.</p>
      </TabsContent>
      <TabsContent value="settings">
        <p>Settings content goes here.</p>
      </TabsContent>
    </Tabs>
  )
}

Subcomponents

Prop	Type	Default	Description
Tabs	Root	---	Root component. Pass defaultValue or control with value + onValueChange.
TabsList	List	---	Container for tab triggers with bottom border.
TabsTrigger*	Trigger	---	Individual tab button. Active state shows lavender underline.
TabsContent*	Content	---	Content panel shown when its tab is active.