1.0.0-beta.11

This release lets Agenda slide through days with a trackpad or touch swipe and adds time settings, declined and past event states, a gap between back-to-back events, opaque event fills, and fixes for events that cross midnight. DataGrid gains sticky headers without virtualization, Sheet moves to HeroUI OSS, and HoloCard adds options to reduce rendering costs in grids and tune its motion and glare.

AppLayout and Sidebar now switch layouts at Tailwind's md and lg breakpoints. The release also fixes Rich Text Editor extensions, button-group selection rings, and the Mouve switch thumb, and updates React to 19.3.1, React Aria to 3.53.1, React Aria Components to 1.22.1, Motion to 14.1.0, and Tiptap to 3.32.0.

⚠️ Breaking changes: Sheet has been removed from @heroui-pro/react; import it from @heroui/react. All Pro consumers now need @heroui/react and @heroui/styles 3.2.7 or newer. react-aria, react-aria-components, and react-stately peer minimums are now >=3.53.1, >=1.22.1, and >=3.51.0. Agenda.AllDaySection lays its events out in a new inner grid, and Agenda event fills are mixed onto --agenda-surface.

What's New

Agenda Swipe

Enable allowsSwipe to slide through days in Day and Week views with a horizontal trackpad or touch swipe, with momentum and snapping to the nearest day. Nearby navigation changes animate as well; dates beyond the buffered days jump directly into view. Swipe navigation is off by default.

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

const agenda = useAgenda({events, allowsSwipe: true});

<Agenda.TimeGrid>
  <Agenda.CurrentTimeIndicator />
  <Agenda.DayColumns>
    {agenda.renderedDays.map((day) => (
      <Agenda.DayColumn key={day.toString()} date={day}>
        {agenda.getEventsForDay(day).map((event) => (
          <Agenda.Event key={event.id} event={event} />
        ))}
      </Agenda.DayColumn>
    ))}
  </Agenda.DayColumns>
</Agenda.TimeGrid>;

• Days past the screen: a week on each side in Week view, three days in Day view, listed in renderedDays
• Free week start: a swipe can leave the week on any day; the nav buttons keep it there, and Today lines it up again
• New part: Agenda.DayColumns clips the day columns and moves them with the swipe
• Touch: a finger slides the days too, and a flick goes on to the next day at least
• Stays out of the way: vertical scrolling still moves the hours, and the days hold still while an event is dragged, resized, or created
• Today's line: the current time segment slides with today's column

Agenda Time Settings

const agenda = useAgenda({
  events,
  timeZone: "America/New_York",
  firstDayOfWeek: "mon",
  hourCycle: 24,
  snapMinutes: 15,
  defaultEventDuration: 30,
});

• timeZone: today, the current time indicator, past events, and event time labels follow this zone instead of the local one
• firstDayOfWeek: Week and Month views start on a given day instead of the locale's
• hourCycle: 12- or 24-hour hour labels and event times
• snapMinutes: creating, moving, and resizing snap to this many minutes (default 5)
• defaultEventDuration: length of an event created with a click (default 60)

Agenda Event States

• Declined: status: "declined" keeps the event on the calendar, outlined with a struck-through title
• Past: events that have ended get data-past and fade toward the Agenda's background unless selected
• Short: events too short for two lines get data-short and show their title and start time on one line; narrow overlapping events hide the time

DataGrid Sticky Headers

Set stickyHeader to keep column headers visible without enabling virtualization. Give scrollContainerClassName a height or maximum height to create a vertical scroll area. Headers stick inside that container, while rows retain their natural heights and selection, sorting, pinned columns, resizing, and footer pagination remain available.

HoloCard Performance and Tuning

Use activateOnHover for card grids to keep cards flat until a mouse pointer enters. The 3D context and glare layers are released once the return animation settles, reducing rendering costs and memory pressure during mobile pinch-zoom. This option defaults to false and disables touch tilt when enabled.

<HoloCard activateOnHover hoverScale={1.04} maxTilt={8} shineOpacity={0.55}>
  {/* Card layers */}
</HoloCard>

• tiltOnTouch: set to false to let a carousel or scrolling row handle touch gestures; defaults to true.
• maxTilt, hoverScale, and shineOpacity: control the tilt angle, hover zoom, and glare strength. maxTilt also scales content parallax.
• spring and settleSpring: tune pointer tracking and the return to rest with partial spring options. The HoloCardSpring type is exported.
• CSS overrides: --holo-card-shine-pattern controls the glare texture independently of the static pattern, and --holo-card-content-text-shadow controls the content's hover shadow.

Improvements

• Agenda - Timed events that end on a later day stop at midnight on their start day instead of collapsing to a sliver. Overlap layout no longer pairs them with the next day's events.
• Agenda - All-day events are packed earliest first, then longest first, in both the time grid and month view.
• Agenda - Agenda.AllDayLabel renders inside the collapse toggle beside the hour labels, so the toggle no longer covers it and clicking the label collapses the section.
• Agenda - Agenda.Event and Agenda.MonthEvent accept HTML div props and ref, for context menus, data-*, and aria-* attributes. User onClick and onPointerDown handlers run before the built-in ones.
• Agenda - A ref on Agenda.TimeGrid or Agenda.DayColumn no longer disables the initial scroll to the current time or drag to create, and an onKeyDown on Agenda no longer disables Delete.
• Agenda - Clicking the last hour of the day creates an event that ends past midnight instead of an invalid time.
• Agenda - The month weekday header marks today's weekday wherever today falls in the grid, not only in the first row.
• Agenda - Offscreen buffered days and all-day events are excluded from keyboard navigation and assistive technology. All-day labels stay visible when their bars extend beyond the visible days.
• Agenda - Timed events stop --agenda-event-gap (default 2px) short of their end, so back-to-back events no longer touch. The drag-to-create and drop previews match.
• Agenda - Event fills are opaque, mixed onto the new --agenda-surface (default var(--color-background)), so hour lines, weekend shading, and neighboring events no longer show through. Hover deepens an event's tint instead of fading it, unconfirmed and declined events sit on the surface, and a dragged event stays fully opaque.
• Agenda - Past events fade toward --agenda-surface by --agenda-past-fade (default 40%) instead of turning translucent.
• Agenda - Unconfirmed and declined events keep their titles aligned with filled events despite their thinner border.
• Agenda - Events shorter than snapMinutes, including zero-length ones, are laid out for the time they're drawn, so they sit beside an event that starts with them instead of on top of it.
• Agenda - Clock-dependent indicators and past-event styles initialize after hydration. Date navigation cancels pending swipe snaps, and changing the view or swipe mode resets the previous gesture before positioning the new layout.
• AppLayout and Sidebar - CSS and matchMedia now use exclusive width < 48rem and width < 64rem queries, matching Tailwind's default md and lg boundaries. These are 768px and 1024px with a 16px browser default font size.
• AppLayout - With asideMobile="sheet", the aside trigger stays visible below lg, and the aside sheet keeps square corners and a min(360px, 88vw) width.
• DateRangePicker - The field border respects the theme's border-width tokens, with a 1px fallback, including while the popover is open. Invalid-state feedback is preserved during hover and focus, including on themes without a normal field border.
• EmptyState - Spinners inside icon media retain their own size instead of inheriting the media's icon dimensions.
• CheckboxButtonGroup and RadioButtonGroup - Selection rings render inset, preventing a leftover 1px accent line in Chromium when selection changes during a child opacity transition.
• Glass theme - The primary Table blurs its rounded card instead of the header and rows, so the header and first row no longer paint square corners over it.
• HoloCard - Right-clicking HoloCard.Image opens the browser's image menu with Copy Image and Save Image As. Native image dragging is off by default so it cannot interrupt the tilt.
• HoloCard - Enabling activateOnHover while hovered keeps the card active. Disabling interaction during the return animation preserves perspective until the card settles.
• Mouve theme - A selected Switch's thumb sits 2px from the end of its track, matching its top and bottom, at every size and in RTL. With @heroui/styles 3.2.7 it was pushed past the track and clipped, and custom switch sizes left a 3px gap. The theme now nudges the thumb with translate instead of setting margin-inline-start, so drop any extra 1px your own switch overrides add for the border.
• RichTextEditor - The link and underline marks register once, so Tiptap no longer warns about duplicate extensions. RichTextEditor.LinkPopover.Trigger renders one button instead of a button nested in a second trigger.

Dependencies

• @heroui/react and @heroui/styles use 3.2.7, with peer minimums of >=3.2.7.
• react and react-dom bumped to 19.3.1; @types/react and @types/react-dom to 19.3.0.
• react-aria bumped to 3.53.1; peer minimum bumped to >=3.53.1.
• react-aria-components bumped to 1.22.1; peer minimum bumped to >=1.22.1.
• react-stately bumped to 3.51.0; peer minimum bumped to >=3.51.0.
• @internationalized/number bumped to 3.6.9.
• motion bumped to 14.1.0 in the workspace; its peer minimum remains >=12.12.0.
• Tiptap packages bumped to 3.32.0; their peer minimums remain unchanged.
• Tailwind CSS and its build tools bumped to 4.3.3; the tailwindcss peer minimum remains >=4.0.0.
• Workspace templates and sandbox pins use the same React and React Aria versions as the component package.

Breaking Changes

Sheet moved to HeroUI OSS

Sheet is now provided by @heroui/react 3.2.7. Pro no longer exports Sheet, its standalone parts, prop types, or sheetVariants, and removes the components/sheet, components/sheet/demos, and css/components/sheet.css entry points.

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

Install @heroui/react and @heroui/styles 3.2.7 or newer together. If you already import @heroui/styles, Sheet styles are included. For individual stylesheets:

-@import "@heroui-pro/react/css/components/sheet.css";
+@import "@heroui/styles/components/sheet.css";

The compound parts and isOpen / onOpenChange remain available, but the gesture API has changed:

• Numeric snapPoints are pixels, not viewport fractions. Use CSS lengths such as "75dvh" or "75%" (relative to the sheet). Full expansion is implicit.
• activeSnapPoint, onActiveSnapPointChange, fadeFromIndex, snapToSequentialPoint, onDrag, and onRelease are no longer supported. OSS owns native scroll snapping and backdrop fading.
• Pro-only options including isModal, shouldAutoFocus, isHandleOnly, repositionInputs, container, and the handle's preventCycle are unavailable. Use Sheet.Backdrop's UNSTABLE_portalContainer to choose a portal target. Non-modal panels need a different presentation.
• Replace custom styles targeting Pro's data-sheet-drawer-direction, drag classes, transforms, or --snap-point-height with the OSS Sheet styling contract. Placement is exposed through data-placement; the scrollport owns motion.

AppLayout, Sidebar, templates, and Agents mobile now use OSS Sheet. Agents mobile retains its configured height, expand/collapse control, and conversation state across presentation changes; swipes use OSS dismissal rather than Pro's controlled height detents.

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 react-stately@latest

Agenda all-day section markup

.agenda__all-day-section is now a flex row. Its events sit in .agenda__all-day-grid, inside the new .agenda__days and .agenda__days-track wrappers, and the toggle and label sit in .agenda__all-day-gutter. Move custom grid styles from .agenda__all-day-section to .agenda__all-day-grid. Agenda.WeekHeader also wraps its day headers in .agenda__days.

Agenda event fills

Event fills, unconfirmed and declined backgrounds, and the past-event fade are mixed onto --agenda-surface, which defaults to var(--color-background). If the Agenda sits on another background, such as a card, set it to that color:

.agenda {
  --agenda-surface: var(--color-surface);
}

Timed events now stop 2px short of their end, and past events fade toward the surface. To keep events touching or past events at full strength:

.agenda {
  --agenda-event-gap: 0px;
  --agenda-past-fade: 0%;
}

Hover no longer lowers an event's opacity; it lays a tint over its fill with background-image. Custom hover styles that relied on the opacity change should set their own.

Upgrade

npx heroui-pro

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