1.0.0-beta.7

July 2026

This release adds Map, a MapLibre-based map surface with markers, popups, routes, arcs, clusters, and themed controls. It also adopts logical CSS properties across Pro component styles for right-to-left layouts, lets Navbar pick up a global React Aria RouterProvider for client-side routing, and polishes the Rich Text Editor link popover.

⚠️ Breaking change:

@heroui/react and @heroui/styles peer dependency minimums are now >=3.2.2, and react-aria-components is now >=1.19.0.
maplibre-gl is a new peer dependency, required when using Map.

What's New

New Components

Map: MapLibre map surface with markers, popups, routes, arcs, clusters, and controls. (Docs)

Map

MapLibre-powered map with theme-aware styles, React-rendered markers, popups, route and arc layers, point clustering, and HeroUI-styled controls (#513).

Key features:

Compound API: Map.Marker, Map.Popup, Map.Route, Map.Arc, Map.ClusterLayer, Map.Controls
Theme-aware styles: light + dark style URLs via styles, or a single mapStyle
Custom markers: Map.MarkerContent with dots, labels, tooltips, popups, and drag support
Controls: zoom, compass, locate, fullscreen + custom control buttons and groups
Bring your own tiles: works with any MapLibre-compatible style provider

Demos cover live visitor dashboards, property listings, live tracking, store locators, fleet dispatch, coverage zones, heatmaps, flight paths, and incident monitoring.

Live visitors:

Flight paths:

Store locator:

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

const styles = {
  dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
  light: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
};

<Map center={[-122.3927, 37.7816]} styles={styles} zoom={13.25}>
  <Map.Route coordinates={route} />
  <Map.Marker latitude={37.79519} longitude={-122.39385}>
    <Map.MarkerContent>
      <Map.MarkerDot color="#22c55e" />
      <Map.MarkerLabel>Start</Map.MarkerLabel>
    </Map.MarkerContent>
    <Map.MarkerTooltip>Ferry Building</Map.MarkerTooltip>
  </Map.Marker>
  <Map.Popup latitude={37.79519} longitude={-122.39385}>
    Pickup ready
  </Map.Popup>
  <Map.Controls>
    <Map.ZoomControl />
    <Map.CompassControl />
  </Map.Controls>
</Map>;

Map does not ship a tile provider — pass any MapLibre-compatible style URL or object. The demos use CARTO basemaps.

Navbar.Item and Navbar.MenuItem links now defer to a global React Aria RouterProvider when no navigate prop is set, falling back to native browser navigation otherwise (#656). Apps that already configure RouterProvider for HeroUI OSS components get client-side Navbar navigation without extra wiring.

Improvements

RTL support - Pro component styles use logical CSS properties (margin-inline, inset-inline, and friends) so components mirror correctly in right-to-left layouts (#729), with dedicated fixes for the Sidebar current-item indicator (#709) and PromptInput (#710)
Rich Text Editor - Link popover trigger defaults to the ghost variant and accepts an optional tooltip (#646)
Segment - Demos drop Segment.Separator from the default markup; separators are shown in a dedicated demo. Demo-only change, no API change

HeroUI Pro Platform

Shipping alongside the package in this release:

Template gallery - Publish and remix generated apps as templates, with curated previews hosted on *.template.heroui.app (#696)
Theme Builder Native - In-browser native preview, QR scan to open on device, and native CSS import/export (#493)
License gating - AI Chat and Themes now require an active Pro license (#707)

Dependencies

@heroui/react and @heroui/styles peer minimums bumped to >=3.2.2
react-aria-components peer minimum bumped to >=1.19.0
maplibre-gl (>=5.15.0) added as a peer dependency for Map
@internationalized/number bumped to 3.6.7

Install maplibre-gl when using Map:

npm install maplibre-gl

Breaking Changes

Peer dependency minimums bumped

@heroui/react and @heroui/styles now require >=3.2.2, and react-aria-components requires >=1.19.0:

- "@heroui/react": ">=3.2.0"
- "@heroui/styles": ">=3.2.0"
- "react-aria-components": ">=1.18.0"
+ "@heroui/react": ">=3.2.2"
+ "@heroui/styles": ">=3.2.2"
+ "react-aria-components": ">=1.19.0"

Update the packages together:

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

Map peer dependency

maplibre-gl is required when importing Map:

npm install maplibre-gl

Upgrade

npx heroui-pro

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