在扩展中使用 shadcn/ui 组件

​

什么场景适合用 shadcn/ui

• 你需要在 sidebar、popup 与 options 等界面之间复用可用的 UI 原子组件。
• 你在产品代码里已经使用 React + Tailwind。
• 你希望组件由源码自有，团队可以完全自定义。

​

shadcn/ui 的能力

​

模板示例

​

Sidebar + shadcn/ui 模板

npx extension@latest create my-extension --template=sidebar-shadcn

​

技术栈假设

• React + TypeScript
• Tailwind CSS
• PostCSS（@tailwindcss/postcss）
• 本地 components/ui/* 组件文件（shadcn 风格的结构）

​

在现有项目中手动配置

1. 设置 Tailwind 和 PostCSS（参见 Tailwind CSS）。
2. 在项目里初始化 shadcn 并生成组件。
3. 把生成的 UI 组件放在扩展源码里（例如 src/components/ui/）。
4. 在需要渲染 UI 的扩展入口中引入 Tailwind 样式表。

​

PostCSS 示例（Tailwind v4）

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

​

components.json 示例

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "tsx": true,
  "tailwind": {
    "css": "sidebar/styles.css",
    "cssVariables": true
  }
}

​

用法

import { Button } from "@/components/ui/button";
import "./styles.css";

export default function MyComponent() {
  return <Button className="text-lg font-semibold">Click Me</Button>;
}

​

Content script 注意事项

• 扩展页面（popup/options/sidebar/新标签页）是最容易上手 shadcn/ui 的地方。
• 对于 content script，在 content script 入口中引入你的样式入口文件。
• Extension.js 通过其 CSS 管线输出 content script 的样式，但它们仍可能与宿主页面的样式冲突。

​

最佳实践

• 把 shadcn/ui 视作源码自有的组件，而不是运行时引入的 UI 包。
• 让 Tailwind 的配置与 content 路径与扩展目录保持一致（pages、scripts、src）。
• 先从一个界面（比如 sidebar 或 popup）开始，再去面对 content script 渲染的复杂度。
• 把共享的 token 与工具函数放到专门的文件里（lib/utils、设计 token、主题变量）。

​

下一步

• 如果还没有，先设置 Tailwind CSS。
• 用 ESLint 和 Prettier 增加 lint 与格式化。