Components

Tabs

Docs

API 사용가이드입니다. 변형·프리뷰는 Overview를 참고하세요.

API

탭은 Tabs · TabsList · TabsTrigger · TabsContent 합성 컴포넌트로 구성합니다. variant는 Tabs에 지정하면 자식에게 전달됩니다. Trigger마다 className으로 너비·아이콘 등을 자유롭게 제어할 수 있습니다.

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

<Tabs defaultValue="account" variant="outlined" className="w-full">
  <TabsList>
    <TabsTrigger value="account">계정</TabsTrigger>
    <TabsTrigger value="password">비밀번호</TabsTrigger>
  </TabsList>
  <TabsContent value="account">계정 정보를 수정합니다.</TabsContent>
  <TabsContent value="password">비밀번호를 변경합니다.</TabsContent>
</Tabs>

{/* 활성 색 + hover/pressed 커스텀 */}
<TabsTrigger
  value="billing"
  className="hover:bg-emerald-100 active:bg-emerald-200 active:text-emerald-800"
  selectedClassName="data-[state=active]:bg-emerald-50 data-[state=active]:text-emerald-700 data-[state=active]:border-emerald-500"
>
  결제
</TabsTrigger>

Props

Name	Type	Default	Description
`Tabs.variant`	`"outlined" \| "underlined" \| "solid" \| "chip"`	`"outlined"`	탭 그룹 시각 스타일. Context로 List·Trigger에 전달됩니다.
`Tabs.value`	`string`	—	제어 모드 활성 탭 value. onValueChange와 함께 사용합니다.
`Tabs.defaultValue`	`string`	—	비제어 초기 활성 탭.
`TabsTrigger.value`Required	`string`	—	탭 식별자. 같은 value의 TabsContent와 연결됩니다.
`TabsTrigger.selectedClassName`	`string`	—	선택 탭 스타일. data-[state=active]:… 유틸로 전달. 있으면 기본 primary 선택을 대체합니다.
`TabsTrigger.disabled`	`boolean`	—	탭을 비활성화하고 키보드 이동에서 건너뜁니다.
`TabsContent.value`Required	`string`	—	표시 조건이 되는 탭 식별자. Trigger.value와 일치시킵니다.
`className`	`string`	—	각 컴포넌트에 추가 클래스. Trigger에 flex-1(동일 너비), hover:bg-… · active:bg-…(hover/pressed 커스텀), List에 overflow-x-auto(가로 스크롤) 등을 조합합니다.

Events

Name	Signature	Description
`onValueChange`	`(value: string) => void`	활성 탭이 바뀔 때 호출됩니다. (Tabs에 지정)

Notes

소비 앱 필수: React 19, Tailwind CSS v4, ClaBi tokens.css(+ @theme 매핑), clsx, @radix-ui/react-tabs.
clsx 패키지가 필수입니다. className 병합에 import { clsx } from "clsx" 를 사용합니다.
내부적으로 @radix-ui/react-tabs를 사용합니다. 소비 앱에도 해당 패키지가 필요합니다.
상태 공유·화살표 키 이동·Home/End·disabled 건너뛰기·aria 연결은 Radix가 처리합니다.
TabsTrigger·TabsContent는 반드시 Tabs 안에 두고, 같은 value로 짝지어 사용하세요.