documentation

123 notes in this subject, read out of this brain and free to use. This is page 1 of 3.

Radix documentation provides multiple examples per component

The Radix documentation provides numerous examples for each component, making it easy to get started with the library. In-development components are marked as 'coming soon' in the documentation.

Radix Primitives documentation: consistent concepts across primitives

Radix Primitives documentation is straightforward and well-written with realistic examples. The concepts are relatively consistent across primitives, so developers do not need to reference the documentation frequently once they understand the patterns.

Radix documentation includes real-world examples

Each Radix component in the documentation includes a real-world example that helps illustrate how the component works.

Radix documentation quality feedback

Radix Primitives documentation is noted for being clean and robust with good examples of how to use component APIs. Teams appreciate it for answering day-to-day questions and compare it favourably to other libraries.

Radix documentation includes component anatomy and code examples

Radix Primitives documentation includes key highlights such as key features at the top, latest version information, code examples, installation paths, and component anatomy.

Radix documentation includes anatomy sections

Radix documentation includes anatomy sections that help developers understand how to use each component. The documentation also includes GitHub source links for deeper exploration and well-documented keyboard interactions.

Radix documentation shows complex real-world examples

Radix documentation examples go beyond happy paths to show real and complex use cases, helping developers understand actual implementation scenarios.

Documentation gap: polymorphism with Stitches not documented but shown in design system repo

Some functionality and best practices are not mentioned in the main Radix documentation but are demonstrated in the Radix design system repository, such as polymorphism in combination with Stitches. Adding such practical use examples to the documentation would be beneficial.

Radix documentation provides practical real-life use case examples

Radix documentation is well-written with examples that illustrate real-life use cases. After learning the fundamental patterns like open and onOpenChange, developers find they rely on the documentation less frequently, only referencing it to copy starting code.

SSR compatibility with Radix Primitives

Radix Primitives can be rendered on the server using server-side rendering (SSR) or static rendering approaches. They work with frameworks like Next.js, Remix, and Gatsby.

Install Radix Primitives via npm

Install Radix Primitives from the command line using npm install radix-ui@latest

Import Popover from subpath for better tree-shaking

Primitives are available from their own entrypoints. Import from the subpath using import * as Popover from 'radix-ui/popover' to help bundlers tree-shake more effectively.

Individual primitive installation option

Each Radix Primitives primitive can be installed individually using @radix-ui scoped packages, such as npm install @radix-ui/react-dialog. When installing separately, all Radix packages should be updated together to prevent duplication of shared dependencies and keep bundle size down.

Radix Primitives core definition and focus areas

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. It can be used either as the base layer of a design system, or adopted incrementally.

Example individual Radix package imports

Example imports from individual Radix packages: import * as Dialog from "@radix-ui/react-dialog"; import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; import * as Tooltip from "@radix-ui/react-tooltip";

Example radix-ui package import

Example import from the radix-ui package: import { Dialog, DropdownMenu, Tooltip } from "radix-ui";

Fully-typed API and consistent component API

Radix Primitives provides a fully-typed API. All components share a similar API, creating a consistent and predictable developer experience.

Installation via radix-ui package

The simplest way to install Radix Primitives is via the radix-ui package with npm install radix-ui. This is tree-shakeable and prevents version conflicts, duplication, and makes it easy to manage updates.

Dismissable Layer nested popovers background close bug

Fixed a bug in Dismissable Layer causing background nested popovers to close all layers on outside click.

Per-primitive subpath entry points added

Added per-primitive subpath entry points so each primitive can be imported directly, for example: import { Accordion } from "radix-ui/accordion" or import * as Accordion from "radix-ui/accordion". This mirrors the namespaced exports available from the root radix-ui entry point.

Portal SSR hydration error fix

Fix hydration error in SSR on the initial render with Portal.

Tree-shaking improvements for Radix components

Improved tree-shaking so bundlers can drop unused components. Component parts are now marked /* @__PURE__ */ and use named render functions instead of Component.displayName assignments, which previously prevented dead-code elimination with some bundlers.

Popper infinite render loops

Fixed a Popper bug causing infinite render loops.

Use client directives for RSC

Added missing use client directives to modules causing errors in RSC.

Toast accessibility improvements

Fixed several Toast accessibility issues, including removing aria-hidden from focusable elements, removing role=status from the list item element, and removing a redundant default aria-atomic.

Tooltip rendering performance improvement

Improved rendering performance for the Tooltip provider.

radix-ui unified package January 2025

Added a radix-ui package that exposes the latest version of all Radix Primitives from a single place. This tree-shakable entrypoint makes it easier to bring in whatever components you need and keep them up-to-date without worrying about conflicting or duplicate dependencies.

Checkbox, Switch, RadioGroup programmatic value update click event bug

Fixed a bug where updating a Checkbox, Switch, or RadioGroup value programmatically (for example, a select all control) while inside a form would dispatch a click event from the hidden bubble input that propagated to ancestor onClick handlers.

Dropdown Menu trigger aria-expanded pairing

Correctly pair DropdownMenu.Trigger open state with aria-expanded when closed.

Menu items intercepting Space/Enter keys from descendants

Fixed menu items, tab triggers, toolbar links, and select items intercepting Space/Enter keys that originate from focusable descendants.

Focus-guard performance optimization

Improved focus-guard performance when opening overlays by caching the shared guard pair and only writing to the DOM when their edge position changes.

Dropdown Menu matching trigger size

Position Dropdown Menu content correctly when matching trigger size.

react-remove-scroll dependency pin

Update and pin react-remove-scroll dependency version to avoid double scrollbar bugs in edge cases.

Maximum update depth exceeded with large popper instances

Fixed a "Maximum update depth exceeded" bug for pages with a large number of popper instances, as well as a similar bug in Presence under React 19.

Menu.SubContent align prop

Added an align prop to Menu.SubContent.

Popper data-side and data-align attributes on anchor

Exposed data-side and data-align attributes on the Popper anchor element.

Dropdown Menu/Context Menu/Menubar SubContent align prop

Added an align prop to the SubContent part of Dropdown Menu, Context Menu, and Menubar to control the direction the submenu appears from its anchor item.

Tooltip skipDelayDuration={0} behavior

Fixed a bug so that skipDelayDuration={0} works as expected in Tooltip. Previously, the open delay could still be skipped when moving between triggers.

Tooltip event target non-Node runtime error

Fixed a runtime error in Tooltip when an event target is a non-Node entity.

Tooltip large content hoverability

Improve large content hoverability in Tooltip.

Slot error messages for invalid children

Improved error messages for invalid slot children.

Toast.Provider announcerContainer prop

Added an announcerContainer prop to Toast.Provider so you can specify a container for toast announcements.

Slot React 19 infinite re-render loop

Fixed an infinite re-render loop in React 19 caused by Slot creating a new ref callback on every render.

Slot nested Slottable items via render prop

Added support for nested Slottable items via a render prop. This allows a slotted element to be wrapped while still merging Slot props and refs onto it.

React 19 infinite re-render loop in composed refs

Fixed infinite re-render loop in React 19 caused by unstable composed ref callback references.

useSyncExternalStore for React 18+

Now uses React's built-in useSyncExternalStore (React 18+) instead of the CJS-only shim, which previously crashed ESM-only browser bundles when importing some components.

Toast memory leak on unmount

Cleared the close timer when unmounting Toast components to prevent memory leaks and errors in test environments.

Roving Focus Group auto-focus on mount in Focus Scope

Fixed items in a Roving Focus Group not being auto-focused on mount within a Focus Scope component.

Stale onEscapeKeyDown/onDismiss handlers on React 19.2

Fixed stale onEscapeKeyDown/onDismiss handlers on React 19.2.

Slot lazy React components in React 19

Fixed how Slot components interact with lazy React components in React 19. In the case of a lazy component instance, the resulting promise is now consumed to render the desired component.

Event handler without argument throwing error

Fixed a bug where calling an event handler without an argument would throw, preventing successive event handlers from being called. This affected all components that accept event handlers with internal implementations.

displayName for internal context objects debugging

Added displayName to internal context objects for improved debugging.

Slot React Server Component usage

Ensure Slot can be used in a React Server Component.

Tooltip closed on pointerdown

Ensure Tooltip is closed when pointerdown is fired on the trigger.

Tooltip matching trigger size

Position Tooltip content correctly when matching trigger size.

TooltipProviderProps type export

Export TooltipProviderProps type from Tooltip.

React 19 compatibility all primitives June 2024

All primitives released minor versions with full React 19 compatibility.

RSC compatibility all primitives June 2024

All primitives released minor versions with full React Server Component (RSC) compatibility.

Tooltip.Content double mounting to DOM

Fixed a bug where Tooltip.Content children were mounted to the DOM twice.

Toast Escape key removing non-focused toasts

Fixed Toast removing non-focused toasts when pressing Escape.

Give your agent this brain