1.0.0-beta.4

This release adds Agenda — a composable calendar with day, week, and month views, drag-to-create/move/resize, and mobile responsive layout — and a new Mouve premium theme. Also fixes a DataGrid crash when toggling column visibility.

What's New

Mouve Theme

A refined mauve/warm-purple theme. Saturated-accent surfaces (filled buttons, selected calendar cells, switch/slider/progress fills, segment ghost indicator, stepper completed steps) pick up a layered raised shadow with inset specular highlight and accent border; neutral pill buttons get an inset pressed shadow on press for a tactile feel.

@import "tailwindcss";
@import "@heroui/styles";
@import "@heroui-pro/react/css";
@import "@heroui-pro/react/themes/mouve";

Activate with data-theme="mouve-light" or data-theme="mouve-dark". Three reusable shadow tokens — --mouve-raised-shadow, --mouve-pressed-shadow, and --mouve-accent-fill-shadow — let you extend the look to custom components.

Agenda

Composable calendar inspired by Notion Calendar. Day, week, and month views, all-day section, current time indicator, and full drag CRUD.

Key features:

• Three views: day, week, month — switch via Agenda.ViewSelector or the view prop
• Drag CRUD: drag-to-create on empty slots, drag-to-move (cross-day), drag-to-resize, delete via Backspace/Delete
• All-day section: collapsible row above the time grid, multi-day spanning events, per-day event counts when collapsed
• Month view: spanning event bars, per-cell maxEvents overflow ("N more"), date click → day view
• Current time indicator: locale-aware time label, faded line across columns with active highlight on today
• Mobile responsive: weekDays prop centers a smaller window around today (e.g. 3-day view on phones); pass undefined drag callbacks to disable drag
• Event states: status: "unconfirmed" (dashed border), isReadOnly: true (no move/resize), [data-selected], [data-weekend], [data-today]
• i18n: built on @internationalized/date and React Aria primitives

import {Agenda, useAgenda} from "@heroui-pro/react";

const agenda = useAgenda({events, defaultView: "week"});

<Agenda {...agenda}>
  <Agenda.Header>
    <Agenda.Heading />
    <Agenda.ViewSelector />
    <Agenda.Navigation>
      <Agenda.NavButton slot="previous" />
      <Agenda.TodayButton />
      <Agenda.NavButton slot="next" />
    </Agenda.Navigation>
  </Agenda.Header>
  <Agenda.Body>{/* week or month layout */}</Agenda.Body>
</Agenda>;

See the Agenda docs for the full anatomy and API reference.

Bug Fixes

DataGrid: Column toggle crash

Toggling column visibility threw Cell count must match column count because dependencies on Table.Body had no effect on row caching — Table.Body's direct children are static JSX. Dependencies are now on Table.Collection, which properly invalidates the WeakMap row cache when columns change.

Sidebar: Right-side offcanvas overflow

Right-side offcanvas content overflowed the sidebar bounds. CSS now clips overflow and corrects element ordering for right placement.

Dependencies

• @internationalized/date — Added as a dependency (used by Agenda for date math and locale-aware formatting)

Upgrade

npx heroui-pro

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