Introduction
An open-source UI component library for building beautiful and accessible user interfaces.
HeroUI is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of Tailwind CSS v4 and React Aria Components.
Every component is designed with care: smooth animations, polished details, and accessibility built in. It works out of the box, yet gives you the freedom to make it your own.
We believe design should not be copied and pasted. It should evolve. HeroUI gives you components that grow with you, always improving, always up to date.
Why HeroUI?
Beautiful by Default
Looks professional the moment you use it. No extra styling required.
Accessible
Accessibility is not optional. With React Aria Components, we handle focus management, keyboard navigation, and screen readers support.
Flexible Architecture
Each component is made of parts you can control. Change what you need. Leave the rest.
Developer Experience
Typed APIs. Predictable patterns. Autocompletion that just works.
Ship Faster
We maintain the library so you can focus on your product. Just update the package to get bug fixes, new features, and more. No manual code changes needed.
Optimized & Lightweight
Tree-shaken. Only what you use goes into your app.
AI-Ready
HeroUI v3 is designed for a future where AI writes code. Components are simple for humans and AI agents to assemble into great products.
Future-Proof
Built for React 19 and Tailwind v4. Always improving with the web.
Mission
We want to make world-class interfaces available to everyone. HeroUI turns complexity into simplicity. It helps you build apps that are beautiful, accessible, and effortless to use.
When you use HeroUI, you are not just moving faster. You are giving your users something that feels and performs better.
Vision
The future of UI should not be tied to one framework. HeroUI v3 begins with React, but the goal is bigger: React Native, AI-driven design tools, and more.
We are building an ecosystem where interfaces are alive. Maintained, improved, and ready for whatever comes next.
Why not copy-paste?
Copy-paste looks like control, but it is an illusion. You paste code, it works for a while, then it breaks. You are left maintaining a pile of dependencies.
Most copy-paste UIs end up looking the same. They age. They stop evolving.
HeroUI is different. It is a living library:
- Updates and fixes flow to you automatically
- New features arrive without extra work
- Components stay current with React, Tailwind, and browsers
- You get deep customization, not shallow theme tweaks
- AI can generate clean, efficient code with HeroUI
HeroUI v3 is not a snapshot. It is a garden that keeps growing. 🌱
HeroUI Ecosystem
Explore the full HeroUI platform:
- 🌐 HeroUI v3 (web) - You're here! React components with Tailwind CSS v4
- 📱 HeroUI Native (mobile) - Beautiful components for React Native
- 🤖 HeroUI Chat (text-to-app) - Create beautiful apps with natural language
- 🧠 UI for LLMs - New platform & MCPs coming soon
Why React Aria over Radix?
We chose React Aria because it solves accessibility at scale with a strong community behind it.
We've used it since HeroUI v2 (via hooks) and v3 keeps API conventions like isDisabled and onPress.
Huge thanks to Devon Govett and the Adobe team for their work here.
FAQ
Is HeroUI free?
Yes, completely free and open source under the MIT license.
Is it production-ready?
Currently in alpha. We're actively working towards a stable release with community feedback.
Can I customize the components?
Yes! Use Tailwind utilities, CSS variables, BEM modifiers, or compose component parts differently. Every slot is customizable.
Does it work with TypeScript?
Fully typed with excellent IDE support and autocompletion.
What about accessibility?
Built on React Aria Components for WCAG compliance. Keyboard navigation, focus management, and screen reader support included.
Can I use the styles without React?
Yes, the CSS can be applied to plain HTML. See our Tailwind Play example.
Is there a Figma file?
Yes! You can access our Figma design system at HeroUI Figma Kit V3.
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
PRs on HeroUI are always welcome, please see our contribution guidelines to learn how you can contribute to this project.
License
HeroUI is released under the MIT License.