1.0.0-beta.8

This release updates the HeroUI Pro React and HeroUI Pro Native Figma files, adds an animated Sidebar.Pages switcher, and makes the package barrel SSR-safe by moving components that pull heavy, opt-in peer dependencies to their own subpath imports. It also adds a chart tooltip to KPI.Chart, extends right-to-left support to the Carousel and more Pro components, corrects DataGrid expansion prop types, upgrades maplibre-gl to v6, and bumps the @heroui/react peer to 3.2.3 and tailwind-variants to 3.3.0.

⚠️ Breaking change:

• Subpath imports — charts, KPI, Carousel, Map, Markdown, RichTextEditor, CodeBlock, and other peer-heavy components are no longer exported from the root @heroui-pro/react barrel. Import each from its subpath instead (for example @heroui-pro/react/kpi).
• maplibre-gl is now a >=6.0.0 peer dependency (required when using Map).
• @react-aria/utils moved to a peer dependency (>=3.34.1) — install it alongside @heroui-pro/react if it is not already present.

What's New

No new top-level package components ship in this release, but the Sidebar gains an animated page switcher and KPI charts gain hover tooltips.

Sidebar Pages

Sidebar.Pages swaps between multiple navigation panels with an animated horizontal slide — for example a main menu and a nested settings page (#847). Each Sidebar.Page is identified by a value; the active page slides into view while the others slide off to the side. Switch pages from any descendant with the new useSidebarPages hook, or control the active page with value / onValueChange.

import {Sidebar, useSidebarPages} from "@heroui-pro/react";

function MainMenu() {
  const {setActiveValue} = useSidebarPages();

  return (
    <Sidebar.MenuItem onAction={() => setActiveValue("settings")}>
      <Sidebar.MenuLabel>Settings</Sidebar.MenuLabel>
    </Sidebar.MenuItem>
  );
}

<Sidebar.Content>
  <Sidebar.Pages defaultValue="main">
    <Sidebar.Page value="main">
      <MainMenu />
    </Sidebar.Page>
    <Sidebar.Page value="settings">{/* settings menu */}</Sidebar.Page>
  </Sidebar.Pages>
</Sidebar.Content>;

Slide animations respect Sidebar.Provider's reduceMotion prop and the user's prefers-reduced-motion setting. Inactive pages are marked inert and aria-hidden, so keyboard and screen readers skip them.

KPI Chart Tooltip

KPI.Chart now accepts a tooltip prop, letting you render a fully styled ChartTooltip on hover inside the sparkline without leaving the KPI surface (#801).

import {ChartTooltip} from "@heroui-pro/react";
import {AreaChart} from "@heroui-pro/react/area-chart";
import {KPI} from "@heroui-pro/react/kpi";

<KPI.Chart
  color="var(--color-success)"
  data={revenue}
  height={70}
  tooltip={
    <AreaChart.Tooltip
      content={({active, payload}) => {
        const point = payload?.[0];

        if (!active || !point) return null;

        return (
          <ChartTooltip>
            <ChartTooltip.Header>{point.payload?.month}</ChartTooltip.Header>
            <ChartTooltip.Item>
              <ChartTooltip.Indicator color={point.stroke} />
              <ChartTooltip.Label>Revenue</ChartTooltip.Label>
              <ChartTooltip.Value>
                ${Number(point.value).toLocaleString()}
              </ChartTooltip.Value>
            </ChartTooltip.Item>
          </ChartTooltip>
        );
      }}
    />
  }
/>;

Improvements

• ChatAttachment - Reworked display for attachments of different types: media (image/video) previews render inline, while other files show a compact file card with a type-aware icon, truncated name, and equal-height layout (#838)
• Carousel RTL - Embla now syncs its scroll direction with the inherited dir, so carousels mirror correctly in right-to-left layouts (#781)
• RTL support - More Pro components and demos adopt logical CSS properties, continuing the right-to-left work started in beta.7
• DataGrid - Corrected types for expandedKeys, defaultExpandedKeys, and onExpandedChange, and the grid keeps a row-header column when a column is hidden (#783)
• Map - setData is now guarded against style-teardown races, avoiding errors when a source updates while the map style is being replaced

HeroUI Pro Platform

Shipping alongside the package in this release:

• Design Systems - Import your website or start from scratch, customize a complete HeroUI design system with live previews, keep brand guidance and assets together, use it in AI Chat, and export Web CSS, Native CSS, DESIGN.md, and PRODUCT.md (Read the release notes)
• AI Chat - Upgraded to AI SDK v7 with resumable streams, chat generation now runs on the trigger.dev agent, new models in the selector, SVG brand-logo generation, browser-based preview QA, and a remixable template gallery
• Docs - A Copy prompt button across component, installation, and overview pages makes it easy to hand a page's context to your AI assistant

Dependencies

• maplibre-gl upgraded to v6; peer minimum bumped to >=6.0.0 (#832)
• @react-aria/utils moved from a direct dependency to a peer dependency (>=3.34.1) (#833)
• @heroui/react and @heroui/styles bumped to 3.2.3 (#839); peer minimum stays >=3.2.2
• tailwind-variants bumped to 3.3.0; peer minimum bumped to >=3.3.0

Breaking Changes

SSR-safe subpath imports

Several components statically import heavy, opt-in peer dependencies (recharts, maplibre-gl, tiptap, embla, shiki, and more). Re-exporting them from the root barrel meant those peers were evaluated on every import, which crashes SSR module evaluation for consumers that do not install them (#785).

These components are no longer exported from @heroui-pro/react. Import each from its own subpath:

Update the imports for any of these components:

- import {AreaChart, KPI} from "@heroui-pro/react";
+ import {AreaChart} from "@heroui-pro/react/area-chart";
+ import {KPI} from "@heroui-pro/react/kpi";

Every other component continues to import from the root @heroui-pro/react, and each subpath only pulls in its own peer dependency, so apps that never import these components no longer evaluate the heavy peers at all.

MapLibre GL v6

maplibre-gl is upgraded to v6 and its peer minimum is now >=6.0.0. Update it when using Map:

npm install maplibre-gl@latest

@react-aria/utils is now a peer dependency

@react-aria/utils is no longer bundled as a direct dependency of @heroui-pro/react; it is a peer dependency at >=3.34.1. Most apps already have it via react-aria-components, but install it explicitly if you hit an unresolved import:

npm install @react-aria/utils@latest

Figma Updates

HeroUI Pro React Figma

The HeroUI Pro React Figma files are updated to v1.0.5 (Jul 31, 2026). Download the latest files from your dashboard or see the Figma setup guide.

• Changed typography styles to sync with Typography component values, and added Heading 5 and Heading 6
• Added states support to Input, InputGroup, and DateFieldInput components
• New Sidebar, Navbar, AppLayout, EmojiPicker, RichTextEditor, Agenda, Map, Timeline, and AI components

HeroUI Pro Native Figma

The HeroUI Pro Native Figma files are updated to v1.0.3 (Jul 31, 2026). Download the latest files from your dashboard or see the Native Figma setup guide.

• Changed typography styles to sync with Typography component values, and added Heading 5 and Heading 6
• Added states support to Input, InputGroup, and DateFieldInput components
• New 30 Pro components to sync with the code library

Upgrade

npx heroui-pro

Select Update HeroUI Pro React to x.x.x (latest) from the interactive menu.