文档

UI 组件

在项目中接入 SSP UI Registry 的 UI 组件

环境准备

常见框架集成参考：

  • Next.js：内置 Tailwind 支持，可直接使用。
  • Vite：可通过 PostCSS 或 Vite 插件 集成。

建议

若尚未接入主题，请先完成 Theme 快速入门，确保 Design Token 与 CSS 变量已经生效。

应用主题（推荐）

在引入组件前先接入主题，确保样式与 Design Token 一致。

方案一：沿用 shadcn/ui 主题

方案二：使用 SSP UI Registry 主题

npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/ssp-style.json
yarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/ssp-style.json
pnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/ssp-style.json
bunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/ssp-style.json

下载后按照文件内的 target 路径将样式放入项目，并在入口样式或 Tailwind 配置中引入。

方案三：自定义主题

可以直接使用组件但需确保 CSS 变量与字体、间距等基础样式已定义。若未引入任何主题，可能出现样式缺失或暗色模式不生效的问题。

注意

当自定义主题时，请参照 shadcn/ui 变量列表 定义所有必需的 CSS 变量，否则组件样式可能异常。

安装组件

以 button 为例：

  1. 访问 button 的文档页查看使用说明
  2. 下载组件文件：
npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/button.json
yarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/button.json
pnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/button.json
bunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/button.json
  1. 确认本地生成的 components/ui/button 文件存在。
  2. 在项目中引用：
import { Button } from "@/components/ui/button"

export default function Demo() {
  return <Button>Click me</Button>
}

下一步

  • 浏览其它 UI 组件文档，按需下载并接入。
  • 如需定制主题或扩展变体，可在本地修改 components/ui/<component> 文件。
  • 若引入复杂场景组件，可继续阅读 Blocks 快速入门。

Theme

使用 SSP UI Registry 主题提供统一的 Design Token 与样式

Hook

在项目中使用 SSP UI Registry 提供的自定义 Hook

目录

环境准备应用主题（推荐）方案一：沿用 shadcn/ui 主题方案二：使用 SSP UI Registry 主题方案三：自定义主题安装组件下一步