Content
<p align="center">
<img src="public/og.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
- 🧩 **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" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=shadcn-labs/mcpcn&type=date&legend=top-left" />
<img alt="Star History Chart" src="https://api.star-history.com/chart?repos=shadcn-labs/mcpcn&type=date&legend=top-left" />
</picture>
</a>
MCP Store