탐색과 공개@neumorphism-ui/tabs

Tabs

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

@neumorphism-ui/tabs

Registry JSON

미리보기

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

설치

npx shadcn@latest add @neumorphism-ui/tabs

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

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

Example

<Tabs defaultValue="surface">
  <TabsList aria-label="디자인 토큰">
    <TabsTrigger value="surface">Surface</TabsTrigger>
    <TabsTrigger value="motion">Motion</TabsTrigger>
    <TabsTrigger value="access">Access</TabsTrigger>
  </TabsList>
  <TabsContent value="surface">Raised와 inset 표면 토큰입니다.</TabsContent>
  <TabsContent value="motion">짧고 일관된 전환 토큰입니다.</TabsContent>
  <TabsContent value="access">Focus와 대비 토큰입니다.</TabsContent>
</Tabs>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`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 값입니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성