How to Use HeroUI (Formerly NextUI) in React

If you are a React developer, you know how much time it takes to build a professional-looking dashboard or a clean landing page from scratch.

I recently started using HeroUI (which many of you might know by its former name, NextUI) for several of my client projects based in the US.

In this tutorial, I will show you how to set up HeroUI in your React applications and use its powerful features to create stunning interfaces.

Table of Contents

What is HeroUI?

HeroUI is a modern, fast, and beautiful UI library for React that is built on top of Tailwind CSS and React Aria.

It provides a set of high-quality components that are fully accessible and easy to customize to match your brand’s identity.

I have found that it significantly speeds up my development workflow because the components are pre-styled but remain highly flexible.

How to Install HeroUI in Your React Project

Before we dive into building components, we need to set up the environment. For this example, I am assuming you have a React project set up with Tailwind CSS.

You can install HeroUI using npm or yarn by running the following command in your terminal:

npm install @heroui/react framer-motion

Once installed, you need to update your tailwind.config.js file to include the HeroUI plugin. This is a crucial step I often see developers miss.

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [heroui()]
}

Now, you must wrap your application with the HeroUIProvider in your main entry file (like main.jsx or App.jsx).

import React from 'react';
import { HeroUIProvider } from "@heroui/react";

function App() {
  return (
    <HeroUIProvider>
      <main className="light text-foreground bg-background">
        {/* Your content goes here */}
      </main>
    </HeroUIProvider>
  );
}

export default App;

Method 1: Create a Professional Navigation Bar

In many of my US-based projects, a clean and responsive navigation bar is the first requirement for any web application.

HeroUI makes this incredibly simple. Let’s create a navigation bar for a “Texas Real Estate” portal.

import React from "react";
import { Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button } from "@heroui/react";

export default function TexasNav() {
  return (
    <Navbar isBordered variant="sticky">
      <NavbarBrand>
        <p className="font-bold text-inherit">TEXAS REALTY</p>
      </NavbarBrand>
      <NavbarContent className="hidden sm:flex gap-4" justify="center">
        <NavbarItem>
          <Link color="foreground" href="#">
            Austin Listings
          </Link>
        </NavbarItem>
        <NavbarItem isActive>
          <Link href="#" aria-current="page">
            Dallas Homes
          </Link>
        </NavbarItem>
        <NavbarItem>
          <Link color="foreground" href="#">
            Houston Rentals
          </Link>
        </NavbarItem>
      </NavbarContent>
      <NavbarContent justify="end">
        <NavbarItem className="hidden lg:flex">
          <Link href="#">Login</Link>
        </NavbarItem>
        <NavbarItem>
          <Button as={Link} color="primary" href="#" variant="flat">
            Sign Up
          </Button>
        </NavbarItem>
      </NavbarContent>
    </Navbar>
  );
}

I executed the above example code and added the screenshot below.

This code gives you a fully responsive, sticky navigation bar with active states and high-quality styling immediately.

Method 2: Build a Financial Data Table

For many business applications in the US, displaying data in a clean, readable format is essential. I often use the HeroUI Table component for this.

Let’s build a simple table to display stock market data for popular US tech companies.

import React from "react";
import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, User, Chip } from "@heroui/react";

const statusColorMap = {
  up: "success",
  down: "danger",
  neutral: "warning",
};

const stocks = [
  { id: 1, name: "Apple Inc.", ticker: "AAPL", price: "$185.92", trend: "up" },
  { id: 2, name: "Microsoft Corp.", ticker: "MSFT", price: "$402.56", trend: "up" },
  { id: 3, name: "Tesla Inc.", ticker: "TSLA", price: "$193.57", trend: "down" },
  { id: 4, name: "NVIDIA Corp.", ticker: "NVDA", price: "$721.33", trend: "up" },
];

export default function StockTable() {
  return (
    <Table aria-label="US Tech Stocks Table" className="p-8">
      <TableHeader>
        <TableColumn>COMPANY</TableColumn>
        <TableColumn>TICKER</TableColumn>
        <TableColumn>PRICE</TableColumn>
        <TableColumn>TREND</TableColumn>
      </TableHeader>
      <TableBody>
        {stocks.map((stock) => (
          <TableRow key={stock.id}>
            <TableCell>{stock.name}</TableCell>
            <TableCell>{stock.ticker}</TableCell>
            <TableCell>{stock.price}</TableCell>
            <TableCell>
              <Chip color={statusColorMap[stock.trend]} size="sm" variant="flat">
                {stock.trend.toUpperCase()}
              </Chip>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

I executed the above example code and added the screenshot below.

How to Use HeroUI (Formerly NextUI) in React

I find that using the Chip component inside table cells makes the data much easier to scan for the user.

Method 3: Use Interactive Modals for User Input

Modals are a staple in modern web apps, especially for login forms or data entry. In my experience, HeroUI’s modal system is one of the easiest to implement.

Let’s create a “Schedule a Demo” modal for a SaaS platform targeting New York-based businesses.

import React from "react";
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, Input } from "@heroui/react";

export default function DemoModal() {
  const {isOpen, onOpen, onOpenChange} = useDisclosure();

  return (
    <div className="flex flex-col gap-2 p-10">
      <Button onPress={onOpen} color="secondary">Request NYC Demo</Button>
      <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="top-center">
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">Schedule Your Strategy Call</ModalHeader>
              <ModalBody>
                <Input
                  autoFocus
                  label="Business Email"
                  placeholder="Enter your work email"
                  variant="bordered"
                />
                <Input
                  label="Company Name"
                  placeholder="Enter your US-based company"
                  variant="bordered"
                />
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="flat" onPress={onClose}>
                  Cancel
                </Button>
                <Button color="primary" onPress={onClose}>
                  Confirm Booking
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );
}

The useDisclosure hook makes managing the open and closed state of the modal effortless, which I really appreciate during long coding sessions.

Method 4: Customize Themes and Colors

One of the best things about HeroUI is how easily you can customize the theme. You can define your own colors in the tailwind.config.js file.

I often have to match very specific brand colors for my US clients, and HeroUI allows me to do this at the plugin level.

// Example of custom theme configuration in tailwind.config.js
plugins: [
  heroui({
    themes: {
      "ny-theme": {
        extend: "light",
        colors: {
          primary: {
            DEFAULT: "#003594", // New York blue
            foreground: "#ffffff",
          },
          secondary: {
            DEFAULT: "#FBE122", // Gold highlight
            foreground: "#000000",
          },
          focus: "#003594",
        },
      },
    },
  }),
],

After adding this, I simply add the class ny-theme to my provider or a specific container to apply the brand colors.

Key Features of HeroUI You Should Use

Based on my years of experience with different libraries, here are a few HeroUI features that stand out:

Keyboard Support: Every component has built-in keyboard navigation, which is essential for accessibility standards (ADA compliance) in the US.
Performance: It uses Framer Motion for animations, which are smooth and don’t lag on mobile devices.
Tailwind Integration: Since it is built on Tailwind, you don’t have to learn a new styling syntax.

Using these features has helped me build apps that feel more “native” and responsive to user interactions.

In this guide, I have shown you how to get started with HeroUI and how to use it to create common UI patterns like navigation bars, tables, and modals.

I’ve found that switching to HeroUI has cut my UI development time by nearly 40% compared to writing custom CSS for every component.

I hope this tutorial helps you build better React applications faster. If you have any questions about specific HeroUI components, feel free to reach out.

You can also read:

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/