# mcpcn

- type: style-library
- industry: design
- roles: ui-designer
- source: https://github.com/shadcn-labs/mcpcn
- license: see source (listed via UI Hub) (link-and-summary-only)
- needs_credentials: false
- writes_external: false
- updated_at: 2026-10-15T10:15:30Z

shadcn-labs 出的开源组件

---

Republished from https://github.com/shadcn-labs/mcpcn/blob/main/README.md under MIT. The original is authoritative.

<p align="center">
  <img src="./.github/assets/gh.png" alt="mcpcn banner" />
</p>

<h1 align="center">mcpcn</h1>

<p align="center">
  Free & open-source, ready-to-use, customizable React components for MCP Apps.<br/>
  Zero config. One command setup. Built with <a href="https://base-ui.com/">Base UI</a> and works seamlessly with <a href="https://ui.shadcn.com/">shadcn/ui</a>.
</p>

<p align="center">
  <a href="https://github.com/shadcn-labs/mcpcn"><img src="https://www.shieldcn.dev/github/stars/shadcn-labs/mcpcn.svg?variant=secondary&size=xs&theme=zinc" alt="GitHub Stars" /></a>
  <a href="https://github.com/shadcn-labs/mcpcn/actions"><img src="https://www.shieldcn.dev/github/ci/shadcn-labs/mcpcn.svg?variant=secondary&size=xs&theme=zinc" alt="CI" /></a>
  <a href="https://discord.gg/N6G36KhYK4"><img src="https://www.shieldcn.dev/discord/online-members/N6G36KhYK4.svg?variant=secondary&size=xs&theme=zinc" alt="Discord Members" /></a>
  <a href="https://x.com/shadcnlabs"><img src="https://www.shieldcn.dev/x/follow/shadcnlabs.svg?variant=branded&size=xs&theme=zinc" alt="X Follow" /></a>
</p>

<p align="center">
  <a href="https://mcpcn.dev/docs">Get Started</a> ·
  <a href="https://mcpcn.dev/docs/installation">Installation</a> ·
  <a href="https://mcpcn.dev/docs/blocks">Components</a>
</p>

## Features

- 🎨 **Theme-aware** — Adapts to existing light and dark themes with semantic color tokens
- 🎯 **Zero config** — Works out of the box with sensible defaults
- 📦 **shadcn/ui compatible** — Uses the same registry format and CLI
- ♿ **Base UI powered** — Accessible primitives without Radix UI
- 💬 **Apps SDK UI aligned** — Optional scoped tokens and control geometry based on OpenAI's official UI system
- 🧩 **Composable** — Import child components directly and arrange them with ordinary JSX
- 🤖 **Built for MCP Apps** — Forms, payments, messages, social content, maps, events, and more
- 🔌 **OpenUI ready** — Component documentation includes OpenUI integration guidance

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Install dependencies (`pnpm install`)
4. Run the checks (`pnpm fix && pnpm typecheck`)
5. Commit your changes (`git commit -m 'Add some amazing feature'`)
6. Push to the branch (`git push origin feature/amazing-feature`)
7. Open a Pull Request

## License

[MIT](LICENSE)

## Star History

<a href="https://www.star-history.com/?repos=shadcn-labs%2Fmcpcn&type=date&legend=top-left">
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=shadcn-labs/mcpcn&type=date&theme=dark&legend=top-left&sealed_token=OWqnbEg5fyl_ad4v9ojvufYbTu5epWkgAlH_d76eq2B5nzAp53QUoYy0-Fo9M-q7ltROzfI_uLMpc3rgMHbPQ4Yu6dSpOJ3cp1ZSu8V-U_WYnUfU9n8VESj2HZ4KQOPbo1zEn6NbltASUQObWxFAaCNFuIHYKIvZI_35-BzF-3rz8Of52i5Jt2SJw-1x" />
   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=shadcn-labs/mcpcn&type=date&legend=top-left&sealed_token=OWqnbEg5fyl_ad4v9ojvufYbTu5epWkgAlH_d76eq2B5nzAp53QUoYy0-Fo9M-q7ltROzfI_uLMpc3rgMHbPQ4Yu6dSpOJ3cp1ZSu8V-U_WYnUfU9n8VESj2HZ4KQOPbo1zEn6NbltASUQObWxFAaCNFuIHYKIvZI_35-BzF-3rz8Of52i5Jt2SJw-1x" />
   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=shadcn-labs/mcpcn&type=date&legend=top-left&sealed_token=OWqnbEg5fyl_ad4v9ojvufYbTu5epWkgAlH_d76eq2B5nzAp53QUoYy0-Fo9M-q7ltROzfI_uLMpc3rgMHbPQ4Yu6dSpOJ3cp1ZSu8V-U_WYnUfU9n8VESj2HZ4KQOPbo1zEn6NbltASUQObWxFAaCNFuIHYKIvZI_35-BzF-3rz8Of52i5Jt2SJw-1x" />
 </picture>
</a>