TABS

Tabbed panel built on Radix UI. Underline-style active indicator in primary color. Uppercase monospace trigger labels.

DEPS:@radix-ui/react-tabs

PREVIEW

All systems nominal.

INSTALLATION

BASH

npx shadcn@latest add @scificn/tabs

USAGE

TSX

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

export function SystemTabs() {
  return (
    <Tabs defaultValue="nav">
      <TabsList>
        <TabsTrigger value="nav">NAVIGATION</TabsTrigger>
        <TabsTrigger value="weapons">WEAPONS</TabsTrigger>
        <TabsTrigger value="shields">SHIELDS</TabsTrigger>
      </TabsList>
      <TabsContent value="nav">
        <p>Navigation subsystem online.</p>
      </TabsContent>
      <TabsContent value="weapons">
        <p>Weapons array charged.</p>
      </TabsContent>
      <TabsContent value="shields">
        <p>Shield matrix nominal.</p>
      </TabsContent>
    </Tabs>
  )
}

ANATOMY

TabsRoot — manages active tab state. Use defaultValue or value + onValueChange.

TabsListHorizontal container with bottom border. Houses all TabsTrigger elements.

TabsTriggerClickable tab label. Active state: primary color underline + text glow.

TabsContentPanel shown when its value matches the active tab. Adds top margin.

TabsGroupAlias for TabsList — same component, different name.

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
defaultValue	string	—	Initial active tab value (uncontrolled).
value	string	—	Controlled active tab value.
onValueChange	(value: string) => void	—	Callback fired when active tab changes.

TabsTrigger requires a value prop matching the corresponding TabsContent value.