mcpField
S
shadcn-baseui

shadcn-baseui

github.com/thunderboltdev开发0248 次安装39 周前更新
代码仓库

关于 shadcn-baseui

shadcn-baseui 是为 shadcn/ui 与 Base UI 项目提供的开发指南，帮助按 Base UI 的 API 编写组件代码。它重点说明 `render` 插槽模式及 Accordion、Button、Select 等组件与 Radix UI 用法的差异。

主要功能

  1. 01检查项目是否使用 Base UI
  2. 02使用 `render` 替代 `asChild`
  3. 03说明 Accordion 属性差异
  4. 04说明 Button 的 `nativeButton` 用法
  5. 05说明 Select 的对齐属性

适用场景

  1. 01为 Base UI 项目编写组件
  2. 02将 Radix UI 风格代码改为 Base UI 用法
  3. 03配置 Accordion 单项或多项模式
  4. 04用 Button 包装链接元素

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thunderboltdev/shadcn-baseui --skill shadcn-baseui

安装后在 Claude Code 中输入/shadcn-baseui确认已加载。

附带文件LICENSEREADME.md

详细介绍

shadcn/ui + Base UI 指南

使用 Base UI 时如何使用 shadcn/ui 组件的指南。避免大模型错误地建议 Radix UI 模式（如 asChild 等）。

⚠️ 重要： 在建议任何代码之前，请检查 components.json，确认这是一个 Base UI 项目。style 字段应以 "base-" 开头（例如 "base-vega"、"base-nova"、"base-maia"、"base-lyra"、"base-mira"）。如果它以其他内容开头，则此指南不适用。

确保已安装 @base-ui/react 包。如果尚未安装，请使用适当的包管理器安装。

Slot 模式

Radix UI 与 Base UI 的主要区别在于 Slot 模式。Radix UI 使用 asChild，而 Base UI 使用 render 属性。始终优先使用 render 属性，而不是 asChild。

规则： 所有触发器／包装组件都必须使用 render 属性，而不是 asChild。

适用于：DialogTrigger、AlertDialogTrigger、PopoverTrigger、DropdownMenuTrigger、TooltipTrigger、SelectTrigger、TabsTrigger、AccordionTrigger、Button（包装链接时）等。

// ❌ INCORRECT
<DialogTrigger asChild>
  <Button variant="outline">Click me</Button>
</DialogTrigger>

// ✅ CORRECT
<DialogTrigger render={<Button variant="outline" />}>
  Click me
</DialogTrigger>

// ✅ ALSO CORRECT
<DialogTrigger render={<Button variant="outline">Click me</Button>} />

属性

除了 Slot 模式之外，只有以下组件的属性有所不同。使用这些组件时，请遵循对应的组件指南。

Accordion

Accordion 组件没有 type 属性，请改用布尔属性 multiple。defaultValue 属性始终基于数组。

  1. 单选模式
// ❌ INCORRECT
<Accordion type="single" defaultValue="item-1">
  <AccordionItem value="item-1">
    // ...
  </AccordionItem>
</Accordion>

// ✅ CORRECT
<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    // ...
  </AccordionItem>
</Accordion>
  1. 多选模式
// ❌ INCORRECT
<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">...</AccordionItem>
  <AccordionItem value="item-2">...</AccordionItem>
</Accordion>

// ✅ CORRECT
<Accordion multiple defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">...</AccordionItem>
  <AccordionItem value="item-2">...</AccordionItem>
</Accordion>
Button（特殊情况）

将 Button 渲染为非按钮元素（例如 Link）时，必须添加 nativeButton={false}。

// ❌ INCORRECT - Radix pattern
import Link from "next/link";

<Button asChild variant="ghost">
  <Link href="/dashboard">Dashboard</Link>
</Button>

// ✅ CORRECT - Base UI pattern
import Link from "next/link";

<Button render={<Link href="/dashboard" />} variant="ghost" nativeButton={false}>
  Dashboard
</Button>
Select

position 属性已被布尔属性 alignItemWithTrigger 替代，该属性默认为 true。

// ❌ INCORRECT
<SelectContent position="popper">
  // ...
</SelectContent>

// ✅ CORRECT
<SelectContent alignItemWithTrigger={false}>
  // ...
</SelectContent>

评论

支持 Markdown