heroui
🚀 Beautiful, fast and modern React UI library. (Previously NextUI)
The HeroUI MCP server (@heroui/react-mcp) brings React component intelligence to AI coding assistants, enabling them to understand and generate code using the HeroUI design system. Built for the formerly-known-as-NextUI library, this MCP server works alongside llms.txt documentation and agent skills to help AI assistants correctly use HeroUI's accessible, Tailwind CSS-powered components. It integrates with Cursor, Claude Code, Windsurf, and other MCP-compatible editors to provide context-aware component suggestions that respect your theme configuration and design tokens.
Key Features
Use Cases
- 01Generate accessible form components with proper WCAG-compliant keyboard and focus behavior
- 02Build dashboard layouts with consistent design tokens and spacing
- 03Create SaaS application UIs with tables, modals, and notification components
- 04Scaffold e-commerce storefronts with performant, SEO-friendly React components
- 05Develop marketing landing pages using polished UI components without CSS-in-JS runtime
- 06Prototype admin panels with data-dense layouts and accessible overlays
Related MCP Servers
View moremarkitdown
Python tool for converting files and office documents to Markdown.
firecrawl
The context API to search, scrape, and interact with the web at scale. 🔥
prompts.chat
f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.
langflow
Langflow is a powerful tool for building and deploying AI-powered agents and workflows.
heroui — FAQ
What is the HeroUI MCP server?+
The HeroUI MCP server (@heroui/react-mcp) is an AI coding assistant integration that teaches tools like Cursor, Claude Code, and Windsurf about the HeroUI React component library. It provides structured context about components, themes, and accessibility patterns so AI assistants can generate correct HeroUI code.
How do I install the HeroUI MCP server?+
Install the @heroui/react-mcp package via npm, then configure your MCP-compatible editor (Cursor, Claude Code, Windsurf) to load the server. You can also run npx heroui-cli agents-md to install agent skills for compatible AI coding assistants.
Which AI coding assistants work with the HeroUI MCP server?+
The HeroUI MCP server works with Cursor, Claude Code, Windsurf, GitHub Copilot, and any editor or tool that supports the Model Context Protocol or llms.txt documentation standards.
Do I need API keys to use the HeroUI MCP server?+
No special API keys are required for the HeroUI MCP server itself. You only need the AI coding assistant of your choice (which may have its own authentication requirements) and the HeroUI library installed in your project.
Is the HeroUI MCP server free to use?+
Yes, the HeroUI MCP server is MIT licensed and free to use. The underlying HeroUI component library is also open source and free for both personal and commercial projects.
What's the difference between HeroUI and NextUI?+
HeroUI is the new name for NextUI. The library has been rebranded but maintains the same battle-tested, production-ready React components trusted by thousands of applications.
How do I install heroui?+
Open the source repository on GitHub and follow its README. heroui is a mcp server — MCP Agents Market links you directly to the official repo.
Is heroui free?+
heroui is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.