mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
106 lines
4.3 KiB
Plaintext
106 lines
4.3 KiB
Plaintext
---
|
|
title: Introduction
|
|
description: HeroUI is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of Tailwind CSS and React Aria.
|
|
---
|
|
|
|
# Introduction
|
|
|
|
Welcome to the HeroUI documentation!
|
|
|
|
<CarbonAd />
|
|
|
|
## What is HeroUI?
|
|
|
|
HeroUI is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of
|
|
[Tailwind CSS](https://v3.tailwindcss.com/) and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html).
|
|
|
|
HeroUI's primary goal is to streamline the development process, offering a beautiful and adaptable system design for an enhanced user experience.
|
|
|
|
---
|
|
|
|
## FAQ
|
|
|
|
### Is HeroUI a copy-paste library?
|
|
|
|
No, HeroUI is not a copy-paste library. All components are available through `npm` and can be installed individually or as a whole package.
|
|
|
|
### How is HeroUI different from TailwindCSS?
|
|
|
|
- **TailwindCSS**:
|
|
|
|
<div className="text-default-600 dark:text-default-500">
|
|
Tailwind CSS is a CSS Framework that provides atomic CSS classes to help you style components,
|
|
leaving you to handle lots of other things like accessibility, component composition, keyboard
|
|
navigation, style overrides, etc.
|
|
</div>
|
|
|
|
- **HeroUI**:
|
|
<div className="text-default-600 dark:text-default-500">
|
|
HeroUI is a UI library for React that combines the power of TailwindCSS with React Aria to
|
|
provide complete components (logic and styles) for building accessible and customizable user
|
|
interfaces. Since HeroUI uses TailwindCSS as its style engine, you can use all TailwindCSS
|
|
classes within your HeroUI components, ensuring optimal compiled CSS size.
|
|
</div>
|
|
|
|
### How is HeroUI different from TailwindCSS components libraries?
|
|
|
|
<div className="text-default-600 dark:text-default-500">
|
|
TailwindCSS components libraries such as [TailwindUI](https://tailwindui.com/),
|
|
[Flowbite](https://flowbite.com/), or [Preline](https://preline.co/), just to name a few, only offer a curated selection of TailwindCSS classes to style your components.
|
|
They don't provide any React specific components, logic, props, composition, or accessibility features.<br/>
|
|
<Spacer y={2}/>
|
|
In contrast to these libraries, HeroUI is a complete UI library that provides a set of accessible and
|
|
customizable components, hooks, and utilities.
|
|
</div>
|
|
|
|
### How HeroUI deals with TailwindCSS classes conflicts?
|
|
|
|
<div className="text-default-600 dark:text-default-500">
|
|
We created a TailwindCSS utility library called [tailwind-variants](https://www.tailwind-variants.org/) that automatically handles TailwindCSS class conflicts. This ensures your custom classes will
|
|
consistently override the default ones, eliminating any duplication.
|
|
</div>
|
|
|
|
### Does HeroUI use runtime CSS?
|
|
|
|
<div className="text-default-600 dark:text-default-500">
|
|
No. As HeroUI uses TailwindCSS as its style engine, it generates CSS at build time, eliminating
|
|
the need for runtime CSS. This means that HeroUI is fully compatible with the latest React and
|
|
Next.js versions.
|
|
</div>
|
|
|
|
### Does HeroUI support TypeScript?
|
|
|
|
<div className="text-default-600 dark:text-default-500">
|
|
Yes, HeroUI is written in TypeScript and has full support for it.
|
|
</div>
|
|
|
|
### Can I use HeroUI with other front-end frameworks or libraries, such as Vue or Angular?
|
|
|
|
<div className="text-default-600 dark:text-default-500">
|
|
No, HeroUI is specifically designed for React as it is built on top of React Aria. However, you
|
|
can still use the HeroUI components styling part with other frameworks or libraries.
|
|
</div>
|
|
|
|
### Why does HeroUI use Framer Motion?
|
|
|
|
<div className="text-default-600 dark:text-default-500">
|
|
We use [Framer Motion](https://www.framer.com/motion) to animate some components due to
|
|
the complexity of the animations and their physics-based nature. Framer Motion allows us to
|
|
handle these animations in a more straightforward and performant way. In addition, it is
|
|
well tested and production ready.
|
|
</div>
|
|
|
|
---
|
|
|
|
## 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!
|
|
|
|
<Community />
|
|
|
|
## Contributing
|
|
|
|
PRs on **HeroUI** are always welcome, please see our [contribution guidelines](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.
|
|
|
|
<Spacer y={4}/> |