WK
014eeba28d
* fix(styles): center table sortable column indicator icon (#6705) * docs(web): polish component docs (#6690) * docs(web): polish english component docs * docs(web): polish custom style demos * docs(web): polish chinese component docs * docs(web): update release demos * docs(web): polish tabs component docs * docs(web): polish chinese component docs * docs(web): polish chinese component docs * docs(web): prevent href scroll jumps in card and link demos * docs(web): sync status icons * fix(docs): preserve locale in showcase and component doc links * docs(web): align showcase terminology of chinese version * fix(styles): prevent InputOTP slots from overflowing narrow containers (#6706) * fix(docs): use theme tokens in styling examples * fix(spinner): move accessible name from hidden svg to root status role (#6721) The inner svg carried aria-hidden, aria-label, and role="presentation" together: the label was dead code on a hidden element (and aria-prohibited-attr per axe), and the spinner as a whole was absent from the accessibility tree. Name the root span as a status live region instead, keeping both attributes overridable via props. Co-authored-by: Claude Fable 5 <noreply@anthropic.com> * fix(styles): restore focus outline gap for accent buttons (#6724) * fix(styles): adopt logical CSS properties for RTL support (#6699) * fix(styles): adopt logical CSS properties for RTL support * fix(docs): adopt logical CSS properties for RTL support * fix(react): adopt logical CSS properties for RTL support * fix(storybook): adopt logical CSS properties for RTL support * fix(docs): handle rtl for icons * fix(storybook): handle rtl for icons * fix(styles): handle rtl for icons * fix(pagination): add dir="auto" * fix(scroll-shadow): handle RTL * fix(tabs): handle RTL * fix(styles): handle RTL * fix(styles): handle search icon in RTL * chore(styles): avoid mirroring search icon * fix(styles): handle year picker trigger indicator in RTL * refactor(scroll-shadow): avoid getComputedStyle on every scroll * feat(combo-box): support multiple selection (#6714) * feat(combo-box): support multiple selection * feat(combo-box): export ComboBoxValueRenderProps and thread selection mode generic * chore(docs): update combo-box anatomy * chore(docs): mark new in combo-box docs * chore(react): move calendar and range calendar to completed * chore(deps): update node to >= 22.x * Merge branch 'v3' into v3.2.3 * chore(deps): bump tailwind-variants to v3.3.0 (#6733) * fix(scroll-shadow): tolerate fractional scroll position in end detection (#6710) * fix: react scan (#6727) * fix: tabs list collection compatibility * fix(react): ts expect error * fix(tag-group): rac collection builder compatibility * fix(select): rac collection builder compatibility * fix(text): rac collection builder compatibility * fix(combo-box): rac collection builder compatibility * fix(autocomplete): rac collection builder compatibility * fix(autocomplete): tab sequence * feat(storybook): support react-scan in preview canvas * chore(root): remove base-url from ts config * fix(root): typecheck * fix(storybook): react scan in production * fix(autocomplete): indicator focus state * fix(storybook): react scan in preview canvas * chore: clean up lockfile * docs(release): v3.2.3 release note (#6739) * fix(icons): remove aria-label from aria-hidden decorative icons (#6741) Every icon in the shared set carries `aria-hidden="true"` and `role="presentation"` together with an `aria-label="... icon"`. Because `aria-hidden="true"` removes the element from the accessibility tree, that `aria-label` can never be announced. It is dead weight that trips accessibility linters and audits. Drop the `aria-label` from all 15 decorative icons and keep them hidden. Consumers that need a name still get one from the wrapping control (e.g. `<Button isIconOnly aria-label="...">`), and `{...props}` is still spread last so an explicit label can be supplied per usage. Refs #6718 * chore(docs): update release note * fix(react): move react-aria packages to peerDependencies (#6744) * chore(docs): update release note --------- Co-authored-by: Stybo <84643947+Stybo@users.noreply.github.com> Co-authored-by: Tianen Pang <32772271+tianenpang@users.noreply.github.com> Co-authored-by: daveycodez <daveycodez@gmail.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Ted Kim <k_2684@naver.com> Co-authored-by: Saidheerajgollu <158853598+Saidheerajgollu@users.noreply.github.com>
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.