Tabs

같은 페이지와 맥락 안에서 관련된 보기 사이를 전환할 때 사용합니다.

미리보기

포트폴리오 보기

개요·활동·설정을 전환하며 개요에서 예시 포트폴리오 가치와 월간 변동을 먼저 표시합니다.

포트폴리오 가치₩18,420,000이번 달 +6.8%

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/tabs

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

TabsList에 이름을 제공하고 TabsTrigger와 TabsContent의 value를 맞추세요. 기본값을 정하고 다른 컨트롤과 활성 보기를 공유해야 한다면 상태를 제어합니다.

"use client";

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

export default function Example() {
  return (
    <Tabs defaultValue="profile">
      <TabsList aria-label="Account settings">
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
      </TabsList>
      <TabsContent value="profile">Edit your profile.</TabsContent>
      <TabsContent value="security">Manage your security settings.</TabsContent>
    </Tabs>
  );
}

API 레퍼런스

Base UI Tabs 기반으로 active trigger를 raised 표면으로, list를 inset track으로 표현합니다. controlled와 uncontrolled 값, 자동·수동 활성화, 가로·세로 방향을 지원합니다.

컴포넌트	속성	타입	기본값	설명
`Tabs`	`value / defaultValue`	`string`	`—`	controlled 또는 초기 uncontrolled 활성 tab 값입니다.
`Tabs`	`onValueChange`	`(value: string) => void`	`—`	활성 tab이 바뀔 때 호출됩니다.
`Tabs`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	list 방향과 Arrow 키 탐색 축을 설정합니다.
`TabsList`	`activateOnFocus`	`boolean`	`false`	Arrow 키로 focus를 옮길 때 panel도 함께 활성화할지 결정합니다.
`TabsTrigger`	`value`필수	`string`	`—`	연결할 TabsContent와 공유하는 고유 값입니다.
`TabsContent`	`value`필수	`string`	`—`	해당 panel을 여는 trigger 값입니다.

미리보기

포트폴리오 보기

설치

사용법

API 레퍼런스

접근성