HeroUI (NextUI)

Overview

HeroUI (formerly NextUI) is a stunning, modern React component library engineered for speed, aesthetics, and developer delight. Built on top of Tailwind CSS and React Aria, HeroUI combines silky smooth micro-interactions, spring physics, and accessible keyboard mechanics into a comprehensive design system.

Key Features

• ✨ Silky Smooth Micro-Animations: Native spring-physics animations powered by Framer Motion for satisfying tactile feedback.
• ♿️ Accessible via React Aria: Robust underlying accessibility mechanics provided by Adobe's React Aria.
• 🎨 Tailwind CSS Variants: Fine-grained component slots customization powered by tailwind-variants.
• 🌓 Automatic Dark Mode: Seamless dark mode support with intelligent contrast balancing.

Installation & Quick Start

npm i @heroui/react framer-motion

Basic Component Example

import React from "react";
import { Button, Card, CardBody } from "@heroui/react";

export default function App() {
  return (
    <Card className="max-w-[340px]">
      <CardBody className="gap-3">
        <h4 className="font-bold text-large">HeroUI Card</h4>
        <p className="text-small text-default-500">Smooth spring animations out of the box.</p>
        <Button color="primary" variant="shadow">
          Explore Now
        </Button>
      </CardBody>
    </Card>
  );
}

When to Choose

• Ideal For: Modern React and Next.js applications, creative portfolios, and SaaS dashboards where fluid aesthetics and polished animations matter.
• Alternatives: For direct copy-paste source code ownership, prefer shadcn/ui.