Junior Garcia
ebb2517bf6
* docs: add 12 copy-edited blog posts for SEO and AI discoverability De-templated repetitive boilerplate across all posts, rewrote tutorial openings with pain-point hooks, and made "Why HeroUI" closing sections contextually unique per article. Removed 4 duplicate/unpolished posts (two dashboard duplicates, e-commerce, landing page, SaaS app tutorials) to keep the initial launch set focused and high-quality. Made-with: Cursor * feat(docs): add SEO, blog, JSON-LD, and AI discoverability improvements Adds blog pages, JSON-LD structured data, enhanced metadata, sitemap normalization, component/example counts, why-heroui page, AI prompts, and SEO-optimized README. Made-with: Cursor * feat(docs): blog content rebalancing, SEO improvements, and blog UI polish - Rebalance all 7 comparison/listicle blog posts: remove self-undermining trade-offs, star count comparisons, and competitor endorsements; replace with HeroUI-forward conclusions and brief "when X might work" sections - Optimize blog post descriptions using Ahrefs keyword data - Add BreadcrumbList JSON-LD to blog post pages - Add OG images to Chakra and Mantine comparison posts - Extract PostCard into shared component with image support and onError fallback - Redesign blog post header: Linear-inspired layout with title, hero image, author name + date below image, avatar on hover - Add DocsImage support to blog posts with light/dark mode switching - Add darkImage frontmatter field to blog data layer - Fix mobile overflow on blog post pages - Add hero images to "Why Choose HeroUI" and "12 Best" posts - Enhance "Why Choose HeroUI" post: add YC backing, community metrics, "Ready in Two Steps" section, AGENTS.md docs, theme builder link - Remove "Updated April 2026" from all posts - Sort related posts by newest first - Truncate card titles to 2 lines - Fix Draft badge visibility on light backgrounds Co-authored-by: Cursor <cursoragent@cursor.com> * fix(docs): wrap BlogContent in Suspense boundary for useSearchParams Next.js requires useSearchParams (used by nuqs) to be wrapped in a Suspense boundary during static generation. Co-authored-by: Cursor <cursoragent@cursor.com> * docs(blog): publish 12 best react UI component libraries post Remove draft state so the post is publicly visible. Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
4.8 KiB
Why HeroUI?
HeroUI (previously NextUI) is a production-ready React component library that combines the accessibility rigor of React Aria with the utility-first styling of Tailwind CSS v4. It ships a clean compound component API (Card.Header, Card.Content, Select.Item, …), requires no <Provider> wrapper, and works out of the box with React 19 and Next.js.
- Accessible by default — Built on React Aria for WCAG-compliant keyboard, focus, and screen-reader behavior
- Tailwind CSS v4 — Modern engine, no CSS-in-JS runtime, smaller output, faster builds
- Compound components — Composable API (
Card.Header,Card.Content) instead of deeply nested props - Zero boilerplate — No Provider wrapper needed (unlike Chakra, MUI)
- AI-native — MCP server,
llms.txt, and agent skills so AI assistants understand your components - Battle-tested — Previously known as NextUI, trusted by thousands of production apps
Packages
| Package | Description |
|---|---|
@heroui/react |
Full component bundle |
@heroui/styles |
Styles / theme only |
| Individual packages | e.g. @heroui/button, @heroui/modal — tree-shakeable per-component imports |
Getting Started
Visit heroui.com/docs/react/getting-started/quick-start to get started with HeroUI.
npm install @heroui/react
Who Is This For?
HeroUI is a good fit if you are building:
- SaaS applications — forms, tables, overlays, and notifications out of the box
- Dashboards & admin panels — data-dense layouts with consistent design tokens
- E-commerce storefronts — performant, accessible, SEO-friendly components
- Marketing sites & landing pages — polished UI without a heavyweight runtime
- Any React / Next.js project that values design quality and accessibility
AI-Powered Development
HeroUI is built for the AI-assisted development workflow.
| Tool | What it does |
|---|---|
MCP Server (@heroui/react-mcp) |
Components that understand your theme — install the server in Cursor, Claude Code, Windsurf, or any MCP-compatible editor |
| llms.txt | Available at heroui.com/llms.txt — structured context for LLMs about every component |
| Agent Skills | Run npx heroui-cli agents-md to install skills for Cursor, Claude Code, and more |
Works with Cursor, Claude Code, Windsurf, GitHub Copilot, and any tool that supports MCP or llms.txt.
Compared To
| Library | How HeroUI differs |
|---|---|
| shadcn/ui | HeroUI is batteries-included with a consistent design system; shadcn is copy-paste-customize |
| MUI | HeroUI is lighter, Tailwind-native, no CSS-in-JS runtime overhead |
| Chakra UI | HeroUI uses React Aria (stronger a11y primitives) and Tailwind v4 (better perf) |
| Mantine | HeroUI has AI tooling (MCP, llms.txt), Tailwind-first styling |
Documentation
- Latest (v3): heroui.com
- v2: v2.heroui.com
Storybook
Visit storybook-v3.heroui.com to view the storybook for all components.
Roadmap
Visit herouiv3.featurebase.app/roadmap to view the roadmap for HeroUI v3.
Figma
Visit the HeroUI Figma Kit (v3) to view the design kit.
Community
We're excited to see the community adopt HeroUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
Contributing
Contributions are always welcome!
See CONTRIBUTING.md for ways to get started.
Please adhere to this project's CODE_OF_CONDUCT.