Guides · How 8pt differs from shadcn/ui
Guides
How 8pt differs from shadcn/ui
By 8pt · Updated
shadcn/ui is an open-source way to distribute React component code: its CLI adds the source of base components such as buttons, dialogs and forms to your project, and you maintain it from there. 8pt doesn’t replace that layer; it provides finished page sections, page templates, themes and Skills that the model adapts into your project through prompts, the CLI and MCP. If your project already uses shadcn/ui, the model wires them to your existing components and tokens.
#The differences in one table
| 8pt | shadcn/ui | |
|---|---|---|
| What it is | Finished page sections, page templates, themes, icons and Skills that the model adapts into your project | Open-source component code and distribution; in its own words, not a component library but a way to build your own |
| Content | Sections such as heroes, pricing, FAQ, navigation and data display, plus page templates | Base components such as buttons, dialogs, forms and tables, plus Blocks and Charts |
| Stack | Native HTML, CSS and a little JS, any framework | React, with official install guides for Next.js, Vite, Laravel, React Router, Astro, TanStack Start and more |
| How to install | Copy the prompt, or 8pt add | npx shadcn@latest init to set up, then add components with the CLI |
| MCP | https://8pt.dev/api/mcp, with an API key | Official MCP server (shadcn@latest mcp init) to browse, search and install registry components |
| Pricing | Builder from $9/mo | Open source, code on GitHub |
shadcn/ui details come from its websiteDocs,Install andMCP page.
#How they work together
A common setup: shadcn/ui handles base pieces like buttons, inputs and dialogs; 8pt handles whole sections such as heroes, pricing, FAQ and dashboards, plus full-page structure. 8pt prompts tell the model to read your project’s design tokens first (for example --background and --primary) and map the component’s colors and fonts onto them, so both share one set of tokens.
npx @8pt-dev/cli init # Have the model check 8pt templates and components before building UI 8pt add <Components slug> # Install into components/8pt/<slug>/
#When shadcn/ui alone is enough
For admin panels, forms and tool interfaces where you mainly need accessible, composable base components, shadcn/ui already covers you well.
#When to add 8pt
For public websites, landing pages and pricing pages, or when you want the model to deliver against a complete page structure and design system, 8pt’s page templates, sections and Skills save a lot of back and forth.
#FAQ
Is 8pt an alternative to shadcn/ui?
No. shadcn/ui provides base component source; 8pt provides finished sections, page templates, themes and Skills. The two work together in the same project.
Can I use 8pt without React?
Yes. 8pt components are native HTML, CSS and a little JS; the model rewrites them for your framework or you can use them as-is in plain HTML pages.
How is the shadcn/ui MCP different from 8pt MCP?
The shadcn/ui MCP server browses and installs components from registries; 8pt MCP serves 8pt components, page templates, themes, icons and Skills, plus a design_ui tool that designs UI to the 8pt rules. You can connect both.