MapLibre-based Map component, RTL support through logical CSS properties, Navbar RouterProvider routing, Rich Text Editor link popover polish, and HeroUI 3.2.2 peer dependency support.
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.MapLibre-powered map with theme-aware styles, React-rendered markers, popups, route and arc layers, point clustering, and HeroUI-styled controls (#513).
Key features:
Map.Marker, Map.Popup, Map.Route, Map.Arc, Map.ClusterLayer, Map.Controlsstyles, or a single mapStyleMap.MarkerContent with dots, labels, tooltips, popups, and drag supportDemos 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.
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)ghost variant and accepts an optional tooltip (#646)Segment.Separator from the default markup; separators are shown in a dedicated demo. Demo-only change, no API changeShipping alongside the package in this release:
*.template.heroui.app (#696)@heroui/react and @heroui/styles peer minimums bumped to >=3.2.2react-aria-components peer minimum bumped to >=1.19.0maplibre-gl (>=5.15.0) added as a peer dependency for Map@internationalized/number bumped to 3.6.7Install maplibre-gl when using Map:
npm install maplibre-gl@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@latestmaplibre-gl is required when importing Map:
npm install maplibre-glnpx heroui-proSelect Update HeroUI Pro React to x.x.x (latest) from the interactive menu.
Design Systems
Import your brand, customize a complete HeroUI design system, use it in AI Chat, and export it to code.
1.0.0-beta.6
Rich Text Editor and Timeline components, PromptInput layout API, Resizable pixel sizing, HeroUI 3.2.0 peer dependency support and focused polish across Agenda, Rating, and scroll surfaces.