Make

beautiful

websites regardless of your design experience.

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

Get Started GitHub

Input

Camera

$525

Zoey Lang

@zoeylang

Full-stack developer, @hero_ui lover she/her 🎉

Following

97.1K

Followers

Available soon.

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.

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


tailwind.config.js
const { heroui } = require("@heroui/react");

module.exports = {
  // ...
  plugins: [
    heroui({
      themes: {
        light: {
          colors: {
            primary: "#0072f5",
          }
        },
        dark: {
          colors: {
            primary: "#0072f5",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    heroui({
      themes: {
        light: {
          colors: {
            primary: "#7828c8",
          }
        },
        dark: {
          colors: {
            primary: "#9353d3",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    heroui({
      themes: {
        light: {
          colors: {
            primary: "#FFFFFF",
          }
        },
        dark: {
          colors: {
            primary: "#000000",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    heroui({
      themes: {
        light: {
          colors: {
            primary: "#FFD34E",
            secondary: "#EE457E",
            background:"#F4E8D1"
          }
        },
        dark: {
          colors: {
            primary: "#FFD34E",
            secondary: "#EE457E",
            background: "#E1CA9E"
          }
        },
      },
    }),
  ],
};

Accessibility

out of the

box.

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

Keyboard navigation

Managed focus

Collision aware

Alignment control

Screen reader support

Typehead support

Learn more

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.

Daily Mix

12 Tracks

Frontend Radio

1:23

4:32


_app.tsx
import React from "react";
import {HeroUIProvider} from "@heroui/react";

const Application = ({Component, pageProps}) => {
  return (
    <HeroUIProvider>
      <main className={isDark ? "dark" : "light"}>
        <Component {...pageProps} />
      </main>
    </HeroUIProvider>
  );
};

export default Application;

Learn more

Customization made

easy.

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


custom-button.tsx
import React from 'react';
import {Button} from '@heroui/react';
import confetti from 'canvas-confetti';

const CustomButton = () => {
  const handleConfetti = () => {
    confetti({...});
  };

  return (
    <Button
      ref={buttonRef}
      disableRipple
      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-sm bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
      size="lg"
      onPress={handleConfetti}
    >
      Press me
    </Button>
  );
};

export default CustomButton;

Learn more

Last

but

not

least.

A fully-featured React UI library.

React server components

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

Accessible components

AntCore UI 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

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

TypeScript based

Build type safe applications, AntCore UI 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 AntCore UI components.

No runtime styles

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

Beautifully designed

AntCore UI 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.

Make

beautiful

websites regardless of your design experience.

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

Zoey Lang

@zoeylang

Apply your own

theming

decisions.

Nike Adapt BB 2.0

Accessibility

out of the

box.

Dark mode

is

effortless.

Customization made

easy.

Last

but

not

least.

Let's make the

Web

Prettier