탭

탭은 탭 패널이라고 불리는 여러 겹의 콘텐츠 섹션을, 한 번에 하나씩 보여주는 컴포넌트예요. 공간을 절약하면서 많은 콘텐츠를 구조적으로 나눠 담을 수 있죠. Radix UI의 탭 프리미티브 위에 만들어져 있어서 키보드 탐색과 포커스 관리까지 잘 처리해 줘요.

출처: 문서

본문

설치하기

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 탭 컴포넌트를 바로 추가할 수 있어요.

CLI Manual

npx shadcn@latest add tabs

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-tabs

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

탭 관련 컴포넌트들을 import 하고, Tabs 안에 TabsList와 TabsTrigger, TabsContent를 조합해 주세요. value로 각 탭을 연결하면 클릭할 때 해당 콘텐츠가 보여요.

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

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

더 알아보기 (Learn more)

Radix UI Tabs — 탭 프리미티브와 API 레퍼런스