EN 登录 开始使用
指南 · 8pt 与 shadcn/ui 的区别

指南

8pt 与 shadcn/ui 的区别

作者 8pt · 更新于

shadcn/ui 是开源的 React 组件代码分发方式：用它的 CLI 把按钮、对话框、表单等基础组件的源码加进项目，由你自己维护。8pt 不替代这一层，它提供的是成品级的页面区块、整页模板、主题和 Skill，通过提示词、CLI 和 MCP 让模型改写进你的项目；项目里已经有 shadcn/ui 的，模型会接到你现有的组件和变量上。

#一张表看区别

8ptshadcn/ui
定位成品级的页面区块、整页模板、主题、图标和 Skill，交给模型改写进你的项目开源的组件代码与分发方式，官方自述「不是组件库，而是构建你自己组件库的方式」
内容首屏、定价、FAQ、导航、数据展示等区块与整页模板按钮、对话框、表单、表格等基础组件，另有 Blocks 和 Charts
技术栈原生 HTML、CSS、少量 JS，不限框架React，官方提供 Next.js、Vite、Laravel、React Router、Astro、TanStack Start 等安装指南
怎么装复制提示词，或 8pt add （CLI），或 MCPnpx shadcn@latest init 初始化，再用 CLI 添加组件
MCPhttps://8pt.dev/api/mcp，带 API Key官方 MCP 服务器（shadcn@latest mcp init），可浏览、搜索、安装注册表里的组件
价格Builder ¥45/月起开源，源码在 GitHub

shadcn/ui 的信息来自其官网文档、安装和MCP页面。

#它们怎么一起用

常见的搭法是：shadcn/ui 负责按钮、输入框、对话框这些基础件；8pt 负责首屏、定价、FAQ、仪表盘这些成块的界面和整页结构。8pt 组件的提示词会让模型先读项目里的设计变量（例如 --background、--primary），再把组件的颜色和字体映射过去，所以两者会用同一套变量。

终端
npx @8pt-dev/cli init   # 让模型做界面时先查 8pt 的模板和组件
8pt add <组件 slug>     # 装进 components/8pt/<slug>/

#什么时候只用 shadcn/ui 就够了

做后台、表单和工具类界面，主要需要可访问、可组合的基础组件时，shadcn/ui 已经覆盖得很好。

#什么时候加上 8pt

要做对外的官网、落地页、定价页，或者希望模型直接按一套完整的页面结构和设计规范交付时，8pt 的整页模板、区块和 Skill 能省下大量来回修改。

#常见问题

8pt 是 shadcn/ui 的替代品吗？

不是。shadcn/ui 提供基础组件的源码，8pt 提供成品区块、整页模板、主题和 Skill，两者可以在同一个项目里配合使用。

项目没用 React 能用 8pt 吗？

能。8pt 组件是原生 HTML、CSS 和少量 JS，模型会按你的项目改写成对应框架，或者直接用在纯 HTML 页面里。

shadcn/ui 的 MCP 和 8pt 的 MCP 有什么不同？

shadcn/ui 的 MCP 服务器浏览和安装注册表里的组件；8pt MCP 提供 8pt 的组件、整页模板、主题、图标和 Skill，并带一个按 8pt 规范设计界面的 design_ui 工具。两者可以同时接入。

相关阅读