Vertical Tabs

垂直标签页：上下方向键切换，带徽标与图标，符合 ARIA tabs 规范。

#tabs #vertical #settings

在沙盒中编辑

复制一段给 AI 编程工具的提示词，包含源码、依赖和用法

属性

VerticalTabsProps

同时支持以下类型的全部属性： Omit<React.ComponentProps<"div">, "children" | "defaultValue" | "onChange">

属性	类型	默认值	说明
tabs* 必填	`VerticalTab[]`	—	—
value	`string`	—	—
defaultValue	`string`	—	—
onValueChange	`(id: string) => void`	—	—

安装

$ npx shadcn@latest add https://chromotion.dev/r/vertical-tabs.json

同类组件

Sticky Subnav

吸顶二级导航，滚动联动高亮当前章节，点击平滑滚动。

Animated Tabs

选中指示块会平滑滑动的标签栏，支持方向键切换。

Menubar

桌面应用风格菜单栏，支持子菜单、复选/单选项、快捷键和完整键盘操作。