HeroUI

Beautiful, fast and modern React UI library for building accessible and customizable web applications.

Themeable

Provides a plugin to customize default themes, you can change all semantic tokens or create an entire new theme.

Fast

Built on top of Tailwind CSS, which means no runtime styles, and no unnecessary classes in your bundle.

Light & Dark UI

Automatic dark mode recognition, HeroUI automatically changes the theme when detects HTML theme prop changes.

Unique DX

HeroUI is fully-typed to minimize the learning curve, and provide the best possible developer experience.

Apply your own theming decisions

HeroUI provides a custom TailwindCSS plugin that allows you to customize the default themes or create your own.

Accessibility out of the box

HeroUI components are built on top of React Aria ensuring exceptional accessibility support as a top priority.

• Keyboard navigation

• Collision aware

• Screen reader support

• Managed focus

• Alignment control

• Typehead support

Dark mode is effortless

HeroUI comes with a fully well-scaled default dark theme that you can apply to your application with just adding the dark attribute to your html.

Customization made easy

HeroUI is based on Tailwind Variants, it simplifies component slots customization while avoiding Tailwind class conflicts.

Ship faster with beautiful components

Premade templates of over 210+ beautiful and responsive components, professionally created by the team behind HeroUI.

Last but not least

A fully-featured React UI library.

React server components

All HeroUI components already include the "use client" directive, which means you can import and use them directly in your RSC.

Accessible components

HeroUI components follow the WAI-ARIA guidelines, provide keyboard support and sensible focus management.

Focus interactions

Focus ring will appear only when user navigates with keyboard or screen reader.

Multiple packages

HeroUI is divided into multiple packages, so you can install only the components you need.

TypeScript based

Build type safe applications, HeroUI has a fully-typed API to minimize the learning curve, and help you build applications.

Override components tags

A polymorphic `as` prop is included in all HeroUI components.

No runtime styles

HeroUI is based on Tailwind CSS, it means that there are no runtime styles, and no unnecessary classes in your bundle.

Beautifully designed

HeroUI components are unique and are not tied to any visual trend or design rule, which makes us unique and of course your projects as well.