$ show heroui-inc/heroui
HeroUI (formerly NextUI) is a production-grade React UI component library built on React Aria Components (RAC) and Tailwind CSS v4. It provides a comprehensive set of accessible, compound components (e.g., Button, Select, Calendar, Modal, Table) with a type-safe variant system powered by tailwind-variants. The library emphasizes accessibility (WAI-ARIA), SSR compatibility, and deep customizability via render props, BEM slot classes, and data-slot attributes. The monorepo includes a Next.js documentation site with bilingual (en/cn) interactive demos, a theme builder for live design token customization, Storybook for visual development, and AI-native features such as an MCP server, llms.txt endpoints, and an embedded Docs Agent for AI-assisted documentation queries. The codebase demonstrates strong engineering practices: compound component pattern, context-based slot propagation, reusable hooks (useOverlayState, useMeasuredHeight), and a dual testing strategy (SSR smoke tests + browser interaction tests). While the library is well-maintained and actively developed, its tight coupling to react-aria-components and the large demo surface (duplicated across languages) present moderate maintenance risks.
The LLM identified 4 files worth highlighting for reuse:
Provides `composeTwRenderProps` which merges user-provided class names with variant-generated Tailwind classes. This utility is essential for the library's styling system and can be extracted into any React project using Tailwind CSS to safely combine conditional classes without conflicts.
A reusable hook that manages open/close/toggle state for overlays (modals, popovers, drawers) with support for controlled and uncontrolled modes. It encapsulates common overlay logic (event handlers, focus management) and can be extracted for any React overlay component.
A hook that measures an element's height using MutationObserver and ResizeObserver, returning the measured height and a callback ref. It is used for animations (e.g., accordion expand/collapse) and can be extracted for any React project needing dynamic height measurement without external libraries.
Provides `ssrSmoke` utility for SSR hydration mismatch testing. It renders components in a simulated server environment and checks for client-side hydration errors. This pattern is reusable for any React library that needs to verify SSR compatibility.