1.0.0-beta.10

This release adds a CRM starter on the Mouve theme, a full-width footer slot to DataGrid, a dedicated HoloCard.Image layer for full-bleed art, and gap handling for KPI and AreaChart data. It also restores Glass theme backdrop blur on ActionBar and Rich Text Editor floating surfaces, aligns the package with HeroUI 3.2.6, React Aria 3.52.1, and React Aria Components 1.21.1, and removes the standalone @react-aria/interactions dependency.

⚠️ Breaking change: @heroui/react and @heroui/styles peer dependency minimums are now >=3.2.6. react-aria and react-aria-components now require >=3.52.1 and >=1.21.1, respectively.

What's New

CRM Template

The new CRM template (@heroui-pro/template-crm) is a multi-page sales workspace on the Mouve theme, with Eclipse as the light accent and Snow as the dark accent. Live preview.

The primary IA is Up Next, Notifications, Records (Accounts, Opportunities, Contacts), Resources (Tasks, Meetings, Notes), and Lists. Opportunities is a Kanban board that moves deals through Lead, Qualification, Demo, Trial, Proposal, Won, and Lost, with stage totals and create actions on the board.

AI is a single resizable AppLayout.aside: suggested skills, threads, retrieved-record context, and the same messaging patterns as the Chat template. Ask actions open and focus that aside. Account, opportunity, contact, owner, note, sequence, and profile details open in right-side Sheets; New Company and New Opportunity stay as create Modals. Opening a Sheet closes the AI aside, and vice versa.

DataGrid Footer

DataGrid accepts footer and footerClassName props for pagination, totals, and summaries. The footer renders through the underlying Table.Footer below Table.ScrollContainer, so it spans the grid's full width and stays fixed while wide table content scrolls horizontally.

import {Pagination} from "@heroui/react";
import {DataGrid} from "@heroui-pro/react";

<DataGrid
  aria-label="Invoices"
  columns={columns}
  data={paginatedInvoices}
  footer={
    <Pagination size="sm">
      <Pagination.Summary>
        {start} to {end} of {invoices.length} invoices
      </Pagination.Summary>
      <Pagination.Content>{/* ... */}</Pagination.Content>
    </Pagination>
  }
  getRowId={(invoice) => invoice.id}
/>;

The team members, virtualized, and pinned-columns demos now place their pagination and summaries in the footer slot instead of rendering separate containers below the grid.

HoloCard.Image

HoloCard.Image renders full-bleed art at the bottom of the card's layer stack. The static texture, holographic glare, and content overlays remain above the image, and the image ignores pointer input so native dragging cannot interrupt the card tilt.

import {HoloCard} from "@heroui-pro/react";

<HoloCard style={{"--holo-card-height": "294px", "--holo-card-width": "210px"}}>
  <HoloCard.Rotator>
    <HoloCard.Frame>
      <HoloCard.Surface>
        <HoloCard.Image alt="Neon-lit game controller" src="/card-art.jpg" />
        <HoloCard.Pattern />
        <HoloCard.Shine />
      </HoloCard.Surface>
    </HoloCard.Frame>
  </HoloCard.Rotator>
</HoloCard>;

The HoloCard docs include image-gallery and landscape credit-card examples.

KPI Chart Gaps

KPI.Chart and AreaChart data now accept null values for periods without an observation. Gaps break the line by default; pass connectNulls to bridge them. KPI.Chart also forwards areaProps to the underlying Recharts Area, including dot, activeDot, and baseValue.

import {KPI} from "@heroui-pro/react/kpi";

<KPI.Chart
  connectNulls
  areaProps={{activeDot: {r: 4}}}
  data={[{value: 24}, {value: null}, {value: 18}]}
/>;

Improvements

• ActionBar - Open and close transitions animate opacity and position without CSS blur filters, allowing the Glass theme's backdrop filter to sample content behind the bar.
• Glass theme - Rich Text Editor bubble, floating, and suggestion menus now apply backdrop blur. The editor shell stays unblurred so it does not create a backdrop root around those menus.
• HoverCard - The React Pro and Agent UI implementations import useFocusable from react-aria, removing the need for a separate @react-aria/interactions dependency.

Dependencies

• @heroui/react and @heroui/styles bumped to 3.2.6; peer minimums bumped to >=3.2.6.
• react-aria bumped to 3.52.1; peer minimum bumped to >=3.52.1.
• react-aria-components bumped to 1.21.1; peer minimum bumped to >=1.21.1.
• @react-aria/interactions removed from package manifests, templates, sandbox dependencies, and SANDBOX_REQUIRED_MODULES.
• Workspace templates and sandbox pins now use the same React Aria versions as the component package.

Breaking Changes

Peer dependency minimums bumped

Update HeroUI and React Aria packages together:

npm install @heroui/react@latest @heroui/styles@latest react-aria@latest react-aria-components@latest

If your app declared @react-aria/interactions only for HeroUI Pro, you can remove it after upgrading.

Upgrade

npx heroui-pro

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