ContextQMD
Back to Heroui

Introduction

apps/docs/content/docs/react/getting-started/index.mdx

3.0.43.7 KB
Original Source

HeroUI is a React component library built on Tailwind CSS v4 and React Aria Components. Every component comes with smooth animations, polished details, and built-in accessibility—ready to use, fully customizable.

<DocsImage src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/heroui-og_2x.jpg" darkSrc="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/heroui-og-black_2x.jpg" alt="HeroUI v3 Introduction" />

Why HeroUI?

Beautiful by default — Professional look out of the box, no extra styling needed.

Accessible — Built on React Aria Components with focus management, keyboard navigation, and screen reader support.

Flexible — Each component is made of customizable parts. Change what you need, leave the rest.

Developer-friendly — Fully typed APIs, predictable patterns, and excellent autocompletion.

Maintained — We handle updates, bug fixes, and new features. Just update the package.

Lightweight — Tree-shaken. Only what you use goes into your app.

Future-proof — Built for React 19 and Tailwind v4, designed for AI-assisted development.

A Living Library, Not Copy-Paste

Copy-paste code works until it breaks. You're left maintaining outdated dependencies that stop evolving.

HeroUI is different. It's a living library that grows with you:

  • Automatic updates and fixes
  • New features without extra work
  • Components stay current with React, Tailwind, and browsers
  • Deep customization, not shallow theme tweaks
  • AI-friendly APIs for code generation

HeroUI v3 is not a snapshot—it's a garden that keeps growing. 🌱

HeroUI Ecosystem

  • 🌐 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 apps with natural language
  • 🧠 UI for LLMs — New platform & MCPs coming soon

Why React Aria? We chose React Aria for accessibility at scale. We've used it since HeroUI v2, and v3 keeps familiar API conventions like isDisabled and onPress. Thanks to Devon Govett and the Adobe team.

FAQ

Is HeroUI free? Yes, completely free and open source under the Apache License 2.0.

Is it production-ready? Yes. HeroUI v3 is stable and ready for production use.

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! Access our design system at HeroUI Figma Kit V3.

Get Involved

Join the community, share feedback, or contribute:

HeroUI is released under the Apache License 2.0.