Block 组件

前置要求

• 已完成 UI 组件快速入门，确保基础 UI 与主题均可正常使用。
• 项目需要支持 React 及 Tailwind CSS。

了解 Block 组件

Block 组件是在 UI 组件基础上的复合封装，通常包含多组件协作、动画或业务逻辑。例如 gh-stargazers-button 将按钮、图标与 GitHub 数据展示组合在一起。

安装示例：gh-stargazers-button

1. 查看文档了解功能与示例：gh-stargazers-button
2. 下载组件：

npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/gh-stargazers-button.json

yarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/gh-stargazers-button.json

pnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/gh-stargazers-button.json

bunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/gh-stargazers-button.json

3. 检查本地生成的文件（默认位于 components/gh-stargazers-button）。
4. 引入并使用：

import { GhStargazersButton } from "@/components/gh-stargazers-button"

export function GithubCTA() {
  return <GhStargazersButton owner="TEN-framework" repo="ten-framework" />
}

如 Block 依赖额外的环境变量或服务，请参照文档中的「前置条件」进行配置。

调整样式与行为

• Block 组件通常暴露 props 用于控制数据源、主题或布局，按文档说明传入即可。
• 如需进一步自定义，可复制组件源码到项目内进行修改，同时保留原文件结构以便后续升级。

常见问题

• 样式错乱：请确认已加载 SSP 主题或自行定义必要的 CSS 变量。
• 接口报错：检查是否满足文档提到的 API 凭证或速率限制要求。

下一步

• 浏览其它 Block 组件，根据业务需求选择合适的组合模块。
• 若需要自定义逻辑，可参考 Block 的源码，将其拆分为舒适的 UI 组件与 Hook。完成修改后欢迎向 Registry 贡献新 Block。