탭

네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용하여 설정 페이지, 대시보드, 코드 미리보기 등 계층적으로 구성된 콘텐츠 패널 간을 자유롭게 전환할 수 있습니다.

Overview

View your key metrics and recent project activity. Track progress across all your active projects.

You have 12 active projects and 3 pending tasks.

import {
  Card,
  CardContent,

탭은 트리거 행 뒤에 겹친 콘텐츠 패널을 정리합니다. 한 번에 한 패널만 보이며 탐색(라우팅)은 없습니다. Base UI Tabs 프리미티브를 기반으로 하며, 네오브루탈리즘 공식(두꺼운 테두리, 선명한 그림자, 굵은 서체)에 맞춰 스타일을 입혔습니다.

다음과 같은 경우에 사용합니다.

설정 페이지 — 한 화면에서 Account / Password / Notifications, 전환 시 상태 유지.
대시보드 뷰 — 라우트 변경 없이 Overview, Analytics, Reports를 바꿉니다.
코드+미리보기 창 — 문서 사이트의 정석: Preview / Code 토글과 패키지 매니저별 설치 명령.

설치


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/tabs.json
npx shadcn@latest add https://neobrutalism.com/r/base/tabs.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/tabs.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/tabs.json

다음 의존성을 설치합니다.


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

다음 코드를 복사하여 프로젝트에 붙여넣습니다.

components/ui/tabs.tsx

"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Tabs as TabsPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Tabs({
  className,
  orientation = "horizontal",
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      data-orientation={orientation}
      className={cn(
        "group/tabs flex gap-2 data-horizontal:flex-col",
        className
      )}
      {...props}
    />
  )
}

const tabsListVariants = cva(
  "group/tabs-list inline-flex w-fit items-center justify-center rounded p-1 text-muted-foreground group-data-horizontal/tabs:h-11 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
  {
    variants: {
      variant: {
        default: "border-2 bg-card shadow-sm",
        line: "gap-1 bg-transparent",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function TabsList({
  className,
  variant = "default",
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List> &
  VariantProps<typeof tabsListVariants>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      data-variant={variant}
      className={cn(tabsListVariants({ variant }), className)}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "relative inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border-2 border-transparent px-4 py-2 text-sm font-head font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:border-border group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent",
        "data-active:bg-primary data-active:text-primary-foreground group-data-[variant=line]/tabs-list:data-active:text-foreground",
        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-1 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-1 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
        className
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn("flex-1 text-sm outline-none", className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

임포트 경로를 프로젝트 구성에 맞게 조정합니다.

사용법

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>

구성

다음 구성을 사용하여 Tabs를 구축합니다.

Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

예제

라인

라인 스타일로 표시하려면 TabsList에 variant="line" prop을 지정합니다.

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

export function TabsLine() {

세로

세로 방향 탭에는 orientation="vertical"을 지정합니다.

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

export function TabsVertical() {

비활성화

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

export function TabsDisabled() {

아이콘

import { AppWindowIcon, CodeIcon } from "lucide-react"

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

RTL

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

نظرة عامة

عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.

لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.

"use client"

import * as React from "react"

탭은 WAI-ARIA Tabs 패턴을 따릅니다. 목록은 role="tablist", 각 트리거는 aria-selected와 aria-controls가 있는 role="tab" 버튼, 각 패널은 트리거로 레이블된 role="tabpanel"입니다. 활성 트리거만 탭 순서에 있고 나머지는 화살표 키(로빙 tabindex)입니다. 기본적으로 트리거에 포커스하면 활성화됩니다. TabsList에 activateOnFocus={false}를 두면 명시적 Space/Enter가 필요합니다.

키보드 상호작용:

키	동작
`Tab`	활성 트리거로, 이어서 활성 패널로 포커스 이동
`ArrowRight` / `ArrowLeft`	다음/이전 트리거로 포커스 이동(가로 방향)
`ArrowDown` / `ArrowUp`	다음/이전 트리거로 포커스 이동(세로 방향)
`Home` / `End`	첫/마지막 트리거로 이동
`Space` / `Enter`	포커스된 트리거 활성화(수동 활성화일 때만 필요)

API 참조

Base UI Tabs 문서를 참고하세요.