选择你的 shadcn 基础、你的风格、你的图标

Source: Dev.to

概览

shadcncraft 现已支持 Base UI、全部七种 shadcn 样式、多种图标库，以及全新的自定义预览工具，可在安装前预览组合效果。你的项目配置现在成为唯一可信来源，组件会根据你选择的默认值进行安装。

支持的基础库

• Radix UI
• Base UI

两者均得到完整支持。

支持的样式

全部七个 shadcn 预设均可使用：

如果你的项目已经使用了其中一种样式，shadcncraft 会自动遵循。使用 shadcn 创建的自定义样式也可以使用。

支持的图标库

• Lucide
• Tabler Icons
• Hugeicons
• Phosphor Icons
• Remix Icon

实时自定义工具

每个组件和区块页面现在都包含一个实时自定义工具，帮助你：

• 在 Radix 与 Base UI 之间切换
• 更改 style 预设
• 替换 图标库
• 调整 字体 与 圆角
• 应用 shadcn 或 tweakcn 主题

你可以在安装前预览最终效果。该自定义工具的工作方式与 shadcn create 相同，适用于每个组件和区块。

注意： 某些旧区块可能尚未支持所有选项。我们会逐步更新，并在每个组件和区块页面上明确标示支持情况。

启用样式感知安装

要让安装遵循你选择的样式，只需在 components.json 中修改一行：

{
  "registries": {
    "@shadcncraft": {
-     "url": "https://shadcncraft.com/r/{name}",
+     "url": "https://shadcncraft.com/r/{style}/{name}",
      "headers": {
        // ... your existing headers ...
      }
    }
  }
}

仅此即可。

结论

全新的自定义工具让 shadcncraft 更贴近 shadcn create 的工作流：相同的样式、相同的结构、相同的预期。你的设计系统现在在 Figma 与代码中都能保持一致。

更多更新即将推出。