选项卡

通过新粗野主义风格的边框和阴影效果，在分层内容面板（设置页面、仪表盘和代码预览）之间进行切换。

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 组件构建，并按新粗野主义的配方设计：粗边框、硬阴影、加粗字体。

适合以下场景：

设置页——账户 / 密码 / 通知放在同一屏里，切换时状态保持不变。
仪表盘视图——在概览、分析和报表之间切换，无需改变路由。
代码与预览窗格——文档站的标配：预览 / 代码切换，以及按包管理器区分的安装命令。

安装


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" 属性以实现线条样式。

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"。只有当前激活的触发器在 Tab 顺序里——其余的交给方向键（roving tabindex）。默认情况下，触发器一获得焦点就会被激活；在 TabsList 上设置 activateOnFocus={false} 即可要求显式按下 Space/Enter。

键盘交互：

按键	操作
`Tab`	把焦点移到激活的触发器上，再移入激活的面板
`ArrowRight` / `ArrowLeft`	把焦点移到下一个或上一个触发器（横向排列时）
`ArrowDown` / `ArrowUp`	把焦点移到下一个或上一个触发器（纵向排列时）
`Home` / `End`	跳到第一个或最后一个触发器
`Space` / `Enter`	激活当前聚焦的触发器（仅在手动激活时才需要）

API 参考

请参阅 Base UI Tabs 文档。