documentation

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

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.

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.

Dismissable Layer nested popovers background close bug

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

Toast Escape key removing non-focused toasts

Fixed Toast removing non-focused toasts when pressing Escape.

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.

Stale onEscapeKeyDown/onDismiss handlers on React 19.2

Fixed stale onEscapeKeyDown/onDismiss handlers on React 19.2.

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.

Toast memory leak on unmount

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

React 19 infinite re-render loop in composed refs

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

Direction.Provider component import and basic usage

The Direction.Provider component is imported from 'radix-ui'. It wraps your app to provide global reading direction. Basic usage: <Direction.Provider />

Direction.Provider dir prop

The dir prop accepts "ltr" or "rtl" values and is optional (not required). This prop sets the global reading direction of your application, which will be inherited by all primitives.

Direction.Provider enables RTL support

Direction.Provider enables all primitives to inherit global reading direction. When creating localized apps that require right-to-left (RTL) reading direction, wrap your application with the Direction.Provider component to ensure all primitives adjust their behavior based on the dir prop.

Direction.Provider RTL example

Example of using Direction.Provider with RTL: <Direction.Provider dir="rtl">{/* your app */}</Direction.Provider>

Accessible Icon inherits from Accessible Icon primitive utility

The Accessible Icon component in Radix Themes inherits all props and functionality from the Accessible Icon primitive utility.

Code component basic usage

The Code component marks text to signify a short fragment of computer code. It is based on the HTML code element and supports common margin props.

Code size prop values

The size prop controls text size and provides correct line height and corrective letter spacing. As text size increases, the relative line height and letter spacing decrease. Valid size values are 1, 2, 3, 4, 5, 6, 7, 8, and 9.

Code variant prop values

The variant prop controls the visual style of the Code component. Valid variant values are: solid, soft, outline, and ghost.

Code color prop

The color prop assigns a specific color to the Code component. Examples of valid color values include indigo, crimson, cyan, orange, and gray.

Code highContrast prop

The highContrast prop increases color contrast between the Code component and the background. It is a boolean prop that can be used with any color and variant combination.

Code weight prop values

The weight prop sets the text weight of the Code component. Valid weight values are regular and bold.

Code truncate prop

The truncate prop truncates text with an ellipsis when it overflows its container. This is useful for displaying long code fragments in constrained spaces.

Code component example with size prop

Example showing the Code component with different size values: ```jsx <Flex direction="column" gap="3" align="start"> <Code size="1">console.log()</Code> <Code size="2">console.log()</Code> <Code size="3">console.log()</Code> <Code size="4">console.log()</Code> <Code size="5">console.log()</Code> <Code size="6">console.log()</Code> <Code size="7">console.log()</Code> <Code size="8">console.log()</Code> <Code size="9">console.log()</Code> </Flex> ```

Code component example with variant prop

Example showing the Code component with different variant values: ```jsx <Flex direction="column" align="start" gap="2"> <Code variant="solid">console.log()</Code> <Code variant="soft">console.log()</Code> <Code variant="outline">console.log()</Code> <Code variant="ghost">console.log()</Code> </Flex> ```

Code component example with color prop

Example showing the Code component with different color values: ```jsx <Flex direction="column" align="start" gap="2"> <Code color="indigo">console.log()</Code> <Code color="crimson">console.log()</Code> <Code color="cyan">console.log()</Code> <Code color="orange">console.log()</Code> </Flex> ```

Code component example with weight prop

Example showing the Code component with different weight values: ```jsx <Flex direction="column" gap="2" align="start"> <Code weight="regular">console.log()</Code> <Code weight="bold">console.log()</Code> </Flex> ```

Code component example with truncate prop

Example showing the Code component with the truncate prop applied to long text: ```jsx <Flex maxWidth="200px"> <Code truncate>linear-gradient(red, orange, yellow, green, blue);</Code> </Flex> ```

Portal component source location

The Portal component in the themes documentation inherits all props and functionality from the Portal primitive utility located at /primitives/docs/utilities/portal.

Portal renders React subtree in different DOM location

The Portal component renders a React subtree in a different part of the DOM.

Radix Themes vs Radix Primitives

Radix Themes is a pre-styled component library designed to work out of the box with minimal configuration. Radix Primitives are unstyled components and are a separate offering.

Install Radix Themes npm package

Install the Radix Themes package using npm with the command: npm install @radix-ui/themes

Import Radix Themes CSS

Import the global CSS file at the root of your application with: import "@radix-ui/themes/styles.css";

Theme component wrapping requirement

Add the Theme component to your application, wrapping the root component inside of body. This is required to use Radix Themes components.

Theme configuration props

The Theme component accepts configuration props including accentColor, grayColor, radius, and scaling to customize appearance. Example: <Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">

ThemePanel for live theme preview

ThemePanel is a drop-in component that allows you to preview the theme in real time. Import it from @radix-ui/themes and place it inside your root Theme component.

Radix Themes 3.1.0 React 19 support

Radix Themes version 3.1.0, released June 20, 2024, added support for React 19.

Radix Themes 3.0.4 Progress max prop

Radix Themes version 3.0.4 added support for the `max` prop on the Progress component.

Radix Themes 3.0.0 breaking change: multi-part components use dot notation

Radix Themes 3.0.0 removed named exports for multi-part components. Use dot notation instead: DialogRoot → Dialog.Root, DialogTrigger → Dialog.Trigger, DialogContent → Dialog.Content. This applies to all multi-part components: AlertDialog, Callout, ContextMenu, Dialog, DropdownMenu, HoverCard, Popover, RadioGroup, Select, Table, Tabs, TextField.

Radix Themes 3.0.0 RadioGroup internal structure rework

Radix Themes 3.0.0 reworked RadioGroup internal HTML structure and styles. It is now designed to display an optional text label when passing children to the Item part, and the Root part now provides flex column styles and spacing. For lower-level control, use the Radio component instead.

Radix Themes 3.0.0 breaking change: Tabs CSS variable renames

Radix Themes 3.0.0 renamed Tabs letter/word spacing CSS variables to support both Tabs and TabNav components: --tabs-trigger-active-letter-spacing → --tab-active-letter-spacing, --tabs-trigger-active-word-spacing → --tab-active-word-spacing, --tabs-trigger-inactive-letter-spacing → --tab-inactive-letter-spacing, --tabs-trigger-inactive-word-spacing → --tab-inactive-word-spacing.

Radix Themes 3.0.0 Theme no longer sets body background automatically

Radix Themes 3.0.0 no longer sets body background color automatically; the background color is now provided by the root Theme by default. The CSS variable --color-page-background is no longer available and can be safely replaced with --color-background available on the .radix-themes element.

Radix Themes 3.0.0 Tooltip default maxWidth

Radix Themes 3.0.0 set Tooltip Content to have maxWidth="360px" by default.

Radix Themes 3.0.0 new component: Progress

Radix Themes 3.0.0 added a new Progress component: a progress bar that indicates completion of a task.

Radix Themes 3.0.0 new component: Radio

Radix Themes 3.0.0 added a new Radio component: a standalone element for building custom layouts with radio inputs.

Radix Themes 3.0.0 new components: RadioCards

Radix Themes 3.0.0 added a new RadioCards component: interactive card components to pick one value from a list. Parts: Root, Item.

Radix Themes 3.0.0 new component: Reset

Radix Themes 3.0.0 added a new Reset component that resets the styles for any native HTML element.

Radix Themes 3.0.0 new component: SegmentedControl

Radix Themes 3.0.0 added a new SegmentedControl component for selecting a single option out of many and for controlling tab-like interfaces.

Radix Themes 3.0.0 new component: Skeleton

Radix Themes 3.0.0 added a new Skeleton component that wraps any UI element and turns it into a loading skeleton. It can also render conditionally using a `loading` prop.

Radix Themes 3.0.0 new component: Spinner

Radix Themes 3.0.0 added a new Spinner component: a loading spinner that wraps any UI element and displays itself using a conditional `loading` prop.

Radix Themes 3.0.0 new component: TabNav

Radix Themes 3.0.0 added a new TabNav component: equivalent to Tabs but used for page navigation. It renders regular links and supports roving focus. Parts: Root, Link.

Radix Themes 3.0.0 text wrapping and truncation props

Radix Themes 3.0.0 added new `wrap` and `truncate` props to Blockquote, Code, Em, Heading, Quote, Link, Strong, and Text components that control whether text wraps and whether it is truncated with ellipsis.

Radix Themes 3.0.0 Table layout prop and cell sizing

Radix Themes 3.0.0 added a new `layout` prop to the Table component to control the `table-layout` CSS property. The `width` prop type signature on TableCell was reworked, and `minWidth` and `maxWidth` props were added to TableCell.

Radix Themes 2.0.0 breaking change: Blockquote trim prop removed

Radix Themes 2.0.0 removed the `trim` prop from the Blockquote component.

Radix Themes 2.0.0 breaking change: Tooltip multiline prop removed

Radix Themes 2.0.0 removed the `multiline` prop from the Tooltip component. If you were using it, pass `style={{ maxWidth: 250 }}` to the Tooltip elements instead.

Radix Themes 2.0.0 breaking change: RadioGroup layout alignment

Radix Themes 2.0.0 improved RadioGroup layout so that wrapping a radio button in a Text component automatically aligns the radio button with the first line of the text. Make sure your layouts with radio buttons look as expected; if not, wrap radio buttons in <Text as="label" size="...">.

Radix Themes 2.0.0 breaking change: RadioGroup sizes

Radix Themes 2.0.0 reworked RadioGroup sizes: added a smaller size="1", changed the default size to size="2", and added a more refined size="3". If you were using size="1" or size="2" radio buttons via explicit size prop, rename them to size="2" and size="3" respectively.

Radix Themes 2.0.0 breaking change: Switch layout alignment

Radix Themes 2.0.0 improved Switch layout so that wrapping a switch in a Text component automatically aligns the switch with the first line of the text. Make sure your layouts with switches look as expected; if not, wrap switches in <Text as="label" size="...">.

Radix Themes 2.0.0 breaking change: Switch sizes

Radix Themes 2.0.0 reworked Switch sizes, making size="2" and size="3" smaller. Use size="3" instead of size="2" to match the previous look.

Radix Themes 2.0.0 breaking change: Text as label option

Radix Themes 2.0.0 added `as="label"` option to the Text component's `as` prop.

Radix Themes 2.0.0 CSS selector specificity cap

Radix Themes 2.0.0 capped CSS selector specificity at 0,1,0 for styling HTML elements and at 0,1,1 for styling pseudo-elements, improving compatibility with Tailwind. If you were relying on any specificity quirks of Radix Themes, make sure your style overrides still work as expected.

Radix Themes 2.0.0 color rework

Radix Themes 2.0.0 reworked dark mode colors and refined light mode colors via Radix Colors 3.0.0. If you were using color tokens for custom styles or overriding certain colors, make sure your designs look as expected.

Give your agent this brain