# Introduction · HeroUI

> An open-source UI component library for building beautiful and accessible user interfaces.

- Page: https://jiguang132.com/systems/heroui/docs/getting-started
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

HeroUI is a React component library built on [Tailwind CSS v4](https://tailwindcss.com/) and [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html). Every component comes with smooth animations, polished details, and built-in accessibility—ready to use, fully customizable.


## Why HeroUI?

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

**Accessible** — Built on [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html) 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](https://react.dev/blog/2024/12/05/react-19) and [Tailwind v4](https://tailwindcss.com/blog/tailwindcss-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](https://link.heroui.com/native)** (mobile) — Beautiful components for React Native
- **🤖 [HeroUI Chat](https://heroui.chat?ref=heroui-v3)** (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](https://x.com/devongovett) 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](https://getbem.com/) 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](https://play.tailwindcss.com/vMYXzKPyUx).

**Is there a Figma file?**
Yes! Access our design system at [HeroUI Figma Kit V3](https://www.figma.com/community/file/1546526812159103429).

## Get Involved

Join the community, share feedback, or contribute:

- [GitHub Discussions](https://github.com/heroui-inc/heroui/discussions)
- [Discord](https://discord.gg/9b6yyZKmH4)
- [X/Twitter](https://x.com/hero_ui)
- [Contributing Guidelines](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md)

HeroUI is released under the [Apache License 2.0](https://github.com/heroui-inc/heroui/blob/main/LICENSE).

---

Index of all JGuang resources: https://jiguang132.com/llms.txt