Changelog

The Banner component now supports multiple positioning strategies, giving you more control over how banners are rendered in your layout.

Positioning Strategies

The Banners provider accepts a new strategy prop with four options:

• fixed (default): Fixed to the viewport, rendered via portal into document.body
• absolute: Positioned within a container, rendered via portal (container needs position: relative)
• static: Rendered inline, pushes content down
• sticky: Sticks within a scroll container

// Inline banner that pushes content down
<Banners strategy="static">
  <App />
</Banners>
 
// Sticky banner within a scroll container
<Banners strategy="sticky" side="top">
  <App />
</Banners>

fixed and absolute strategies portal banners out of the DOM tree. static and sticky render banners inline, either above or below children depending on side.

Other Improvements

• Improved type documentation for Banners and Banner props
• Aligned stacked banner demo action order (primary → secondary) for consistent dismiss targets

We've shipped several major improvements to DiceUI's component infrastructure and documentation.

Unified Radix UI Package

All components have been migrated from individual @radix-ui/react-* packages to the unified radix-ui package. This follows Radix UI's official consolidation effort and simplifies dependency management.

- import * as SelectPrimitive from "@radix-ui/react-select"
+ import { Select } from "radix-ui"

Optimized Utility Components

The ClientOnly and Portal components have been rewritten using useSyncExternalStore for better performance and proper SSR/hydration handling.

Benefits:

• No useState + useLayoutEffect pattern needed
• Proper SSR/Hydration with explicit server vs client snapshots
• No hydration mismatches