DOCSEARCHbyAlgolia
Submit Docs

HeroUI Documentation

website·Indexed 35 days ago

https://heroui.com/

A UI library providing components for both React and Native platforms. Includes comprehensive guides on installation, styling, theming, and migration from v2 to v3, alongside detailed release notes for versions such as v1.0.10 (Native) and v3.2.6 (React).

Tokens
813.3K
Snippets
4K
Records
5K
Agent score
66%

What's inside HeroUI

  1. Overview of new components in v3.0.0-rc.1

    v3-0-0-rc-1

    The v3.0.0-rc.1 release introduces several new UI components:

    • Meter: Displays a value within a known range (e.g., disk usage, password strength).
    • ProgressBar: A linear progress indicator supporting determinate/indeterminate states and custom colors.
    • ProgressCircle: An SVG-based circular progress indicator with customizable track and fill circles.
    • Toolbar: A container to group buttons, toggles, and separators horizontally or vertically.

  2. Overview of HeroUI Native Portal

    The Portal component allows child nodes to be rendered at a different location within the application. This is particularly useful for components that need to float above other content, such as modals, overlays, and popovers. By default, PortalHost is included in the HeroUINativeProvider, so the portal system is automatically configured without manual setup.

  3. Overview of HeroUI v3

    HeroUI is an open-source React UI component library designed for building beautiful and accessible user interfaces. It is built on top of Tailwind CSS v4 and React Aria Components, providing built-in accessibility (WCAG compliant), smooth animations, and full customizability. It is specifically optimized for React 19 and AI-assisted development.

  4. Overview of HeroUI v3 Color System

    HeroUI v3 uses a semantic color system where colors are defined by their intent and role rather than raw values. This ensures consistency in contrast, hierarchy, and theme behavior across the interface. Most colors are derived from a small set of base values, allowing for easy modification and automatic adaptation between light and dark modes.

  5. Overview of the HeroUI Color System

    v3-0-0-beta-6
    HeroUI v3.0.0-beta.6 introduces a comprehensive Color System built on React Aria's color primitives. It supports HSL, HSB, and RGB color spaces, allows for channel-based editing (hue, saturation, lightness, brightness, red, green, blue, alpha), and is accessible by default with full keyboard and screen reader support.

  6. Overview of HeroUI v2 to v3 Incremental Coexistence Migration

    Incremental coexistence migration allows HeroUI v2 and v3 components to work side-by-side. This approach enables developers to migrate components one by one, ensuring the project remains functional throughout the process. Key principles include incremental testing, identifying the coexistence strategy (pnpm aliases or component packages), and managing CSS conflicts between versions.

  7. Overview of HeroUI Native MCP Server

    The HeroUI MCP server allows AI assistants to directly read HeroUI Native component documentation, facilitating AI-driven development. It supports the heroui-native package via stdio transport. The npm package name is @heroui/native-mcp and requires Node.js 22 or higher.

  8. Overview of HeroUI v2 to v3 Incremental Coexistence Migration

    Incremental coexistence migration allows HeroUI v2 and v3 components to work in parallel, enabling developers to migrate components one by one without breaking the project. Key principles include:

    • Migrating one component at a time and testing before proceeding.
    • Maintaining project functionality throughout the process.
    • Managing CSS conflicts between v2 and v3 styles.
    • Retaining v2 components that have no v3 equivalent (Code, Image, Navbar, Ripple, Snippet, Spacer, User) unless explicitly requested for replacement.

  9. Overview of HeroUI v3 Features

    v3-0-0

    HeroUI v3 is a complete rewrite for React (Web) and React Native. Key architectural changes include:

    • Web Support: 75+ components powered by React Aria Components for accessibility, themed via Tailwind CSS v4 and CSS variables.
    • React Native Support: 37 components using a compound component pattern, unified animation API, and Tailwind CSS v4 support via Uniwind.
    • Performance: Replaced Framer Motion with native CSS transitions and keyframes for GPU acceleration and smaller bundle sizes.
    • Headless Mode: By omitting the @heroui/styles package, developers can use the library as a headless UI kit, focusing only on logic and accessibility while providing their own styling.

  10. Overview of HeroUI Migration MCP Server

    The HeroUI Migration MCP server allows AI assistants to directly access documentation for migrating from HeroUI v2 to v3. It uses Streamable HTTP transport and is hosted at https://migration-mcp.heroui.com. Note that this server is specifically for migration; for general v3 component development, use the HeroUI React MCP server.

  11. Overview of HeroUI ColorPicker related components

    The ColorPicker ecosystem consists of several specialized components for different interaction patterns:

    • ColorArea: A 2D color picker for selecting colors from a gradient area.
    • ColorSlider: A slider used for adjusting individual color channel values.
    • ColorSwatch: A visual preview component that displays a color value.

  12. Overview of HeroUI v2 to v3 Incremental Migration

    Incremental migration allows developers to migrate components from HeroUI v2 to v3 one by one while keeping the project operational. This approach is useful for large projects but comes with specific trade-offs: increased bundle size during the transition, potential style and TypeScript type conflicts, and the requirement for React 19+.

    Note that some v2 components (Code, Image, Navbar, Ripple, Snippet, Spacer, User) do not have direct v3 equivalents and can be kept in the project during the migration process.