HeroUI (aka NextUI After Corporate Decided to Rebrand)

Been using NextUI for 8 months before they pulled this rebrand nonsense. HeroUI is literally NextUI with fresh branding - same components, same bugs, same everything. The announcement came out of nowhere and everyone on our team was like "wait, what the fuck happened to NextUI?" But it still works, so here we are.

What Actually Works

The Tailwind CSS + React Aria combo actually works without making you hate your life. Most libraries give you either completely unstyled components (thanks for nothing) or overly designed shit that screams "I used a component library." HeroUI hits the sweet spot. The official docs aren't complete garbage either.

Tailwind means no CSS-in-JS runtime bullshit. Your bundle doesn't get ass-fucked by style injection like with Chakra or MUI's emotion nightmare. Everything builds to normal CSS classes instead of injecting styles on every render.

React Aria is where shit actually works for once. Keyboard navigation doesn't randomly break. Screen readers can figure out what the hell your buttons do. Focus management works when you've got modals inside modals (learned this during our accessibility audit nightmare). Most libraries just slap role="button" on a div and call it a day. The accessibility docs show they actually give a shit, and React Aria patterns explain why your custom components break screen readers. Behavior hooks are separate from styling, so you get real ARIA attributes without wrestling the design system.

Performance Reality Check

Latest is v2.8.4 as of September 2025. Around 50 components that cover the basics without being overwhelming. TypeScript support doesn't suck - IntelliSense works, props are typed correctly, and you won't spend hours fighting any types. Rare win in React-land.

I think it was v2.8.4, anyway. Could be v2.8.5 by now - they ship pretty regularly.

Tree-shaking works if you import individual components instead of dumping the whole library into your bundle like an amateur. Bundle stays sane as long as you're not importing every single component. The installation docs explain individual vs global imports without being condescending.

Here's the bullshit: Framer Motion is a peer dependency whether you like it or not. No animations? Too bad, you're still carrying 30kb+ of Motion code. Found this out when webpack-bundle-analyzer lit up our Motion chunks like a Christmas tree. Recent versions claim they "fixed" this by lazy-loading Motion, but it's still there, judging you from your node_modules folder.

Production gotcha that cost me a weekend: HeroUI's dark mode completely shit the bed when we upgraded to Next.js 14.2. Components rendered as white text on white background - literally invisible. Spent like 6 hours debugging before realizing the provider wrapper moved in the Next.js upgrade. The framework guide mentions this now, but wasn't documented when it happened. Lost a Saturday to that bullshit.

Our monitoring went down and didn't tell us. Fucking brilliant.

The Migration Headache

GitHub has 26k+ stars so it probably won't get abandoned next week. Regular releases, maintainer responds to issues instead of ghosting. Most of the NextUI community migrated over without too much bitching.

React Server Components don't break everything. Next.js App Router works without weird hydration errors. Standard modern React stuff you'd expect. The Next.js guide covers RSC integration properly, and this SO thread explains the "use client" directive placement. This Medium article shows actual implementation instead of theoretical bullshit.

Component Coverage (The Good and Missing Shit)

You get the basics: Input, Select, Button, Modal, Table, etc. Around 50 components which sounds like a lot until you realize you need that one specific thing that doesn't exist. Form controls don't completely suck - validation works without importing Formik or react-hook-form for basic shit. Date pickers don't make you question your career choices, which is genuinely shocking.

Navigation components cover the obvious stuff: Navbar, Breadcrumbs, Tabs. Nothing fancy, but they don't randomly break your layout like some libraries. Tables handle basic data without making you want to die - nowhere near as powerful as TanStack Table for complex shit, but fine for your standard CRUD operations.

Layout components are bare minimum: Divider, Spacer, some scroll utilities. You'll end up building custom layout components anyway because every app needs weird spacing that no library predicts. At least these don't interfere with your custom CSS.

Theming Without Going Insane

The Tailwind Variants integration actually works for once. CSS class conflicts get resolved automatically, saving you from the specificity hell that makes you consider becoming a farmer. Lost 4 hours last month fighting !important declarations in Chakra's CSS-in-JS nightmare, so this is refreshing. The customization docs explain this without corporate bullshit.

Here's how theming works in practice:

const { heroui } = require("@heroui/react");

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

Dark mode just works. Respects system preferences like it should. Component-level overrides don't fuck up your global theme. Setting this up manually usually burns a whole afternoon, so having it work out of the box is nice.

Accessibility That Actually Works

React Aria integration is where this library earns its keep. Most devs either ignore accessibility or implement it wrong because WCAG specs read like legal documents. HeroUI handles this shit so you don't have to become an accessibility expert.

• Keyboard navigation doesn't randomly break (Tab, Enter, Arrow keys work like they should)
• Screen readers announce actual information instead of "clickable" for everything
• Focus management works with nested modals (found this out during our SOC2 accessibility audit)
• ARIA attributes are correct without memorizing the entire spec

War story: Our accessibility audit flagged 18 violations on custom dropdowns - missing ARIA labels, broken keyboard support, focus traps that didn't work. Swapped them for HeroUI Select components and fixed every single violation in 2 hours. The accessibility guide explains what's happening so you're not flying blind.

The catch? You need to understand React Aria patterns instead of just slapping onClick on everything. If you're used to <div onClick={...}>, there's a learning curve. But it beats getting audited and finding out your site is basically unusable for people with disabilities.

Framework Support Reality

Works with Next.js (both App and Pages Router), Vite, Remix, Astro. Server Components don't break. TypeScript integration doesn't make you hate your life. The framework guides have actual setup instructions instead of handwaving.

Documentation quality is all over the place. Next.js setup is solid. Vite works without surprises. Remix and Astro feel like afterthoughts - expect to spend time figuring out config details they didn't document. Recent blog posts cover framework updates, and community templates exist for various setups.