repository·main·Indexed 27 days ago
https://github.com/radix-ui/themesAn open-source component library optimized for fast development, easy maintenance, and accessibility. It provides a set of pre-styled, accessible components for building high-quality user interfaces, featuring layout components like Grid, Flex, and Box, as well as specialized components such as Dialog, TextField, and SegmentedControl.
trim prop was removed from the Blockquote component in version 2.0.0.In version 2.0.0, CSS selector specificity was capped to improve compatibility with Tailwind CSS:
0,1,0.0,1,1.[Upgrade guide] If you were relying on specific Radix Themes selector specificity quirks for your own styles, verify that your overrides still function correctly.
When using Radix Themes, you must import the CSS styles for the components to render correctly. Depending on your version, the import path has changed:
@radix-ui/themes/styles.css.@radix-ui/themes/index.css.Note that older versions used @radix-ui/react-themes as the source, but this has been consolidated into the @radix-ui/themes package.
In version 3.0.0, the width and height props no longer map to the space scale. They now accept arbitrary CSS values (including responsive object syntax).
Upgrade Guide:
Replace space scale values with corresponding pixel values or CSS variables. For example, width="9" should be changed to width="64px" or width="var(--space-9)".
Starting from version 3.2.0, you can import components from standalone entrypoints to potentially optimize your bundle. For single components, import them directly. For compound components, it is recommended to use namespaced imports.
import { AlertDialog } from '@radix-ui/themes/components/alert-dialog';
import { Box } from '@radix-ui/themes/components/box';
// We recommend using namespaced imports for compound components
import * as CheckboxGroup from '@radix-ui/themes/components/checkbox-group';The multiline prop was removed from the Tooltip component in version 2.0.0.
[Upgrade guide] To achieve the same effect, pass style={{ maxWidth: 250 }} to your Tooltip elements.
When setting the appearance prop on the Theme component to dark or light, Radix Themes injects a script to set the theme class and color-scheme on the html element.
To prevent hydration mismatch warnings in frameworks like Next.js, you must add suppressHydrationWarning to your <html> element. This change was introduced in version 0.0.38.
Additionally, in version 0.0.44, the Theme component was updated to respect the theme class format on the html element when updating appearance.
In version 2.0.0, the size scales for Checkbox, RadioGroup, and Switch were reworked.
[Upgrade guide] If you were using explicit size props, update them as follows:
Checkbox and RadioGroup:size="1" $\rightarrow$ size="2"size="2" $\rightarrow$ size="3"Switch:size="3" to match the previous size="2" look.Radix Themes v3.0.0 exports individual CSS files to allow for fine-grained control over CSS precedence and bundle size:
tokens.csscomponents.cssutilities.csslayout.css (styles for Box, Flex, Grid, Container, Section)You can also customize color imports by using tokens/base.css and importing specific colors from tokens/colors/*.css (e.g., tokens/colors/blue.css).
In version 3.0.0, the TextField.Input part was removed to simplify prop forwarding.
Upgrade Guide:
TextField.Input without TextField.Root: Rename it to TextField.Root.TextField.Input inside TextField.Root: Remove the Input part and move its props directly onto TextField.Root.TextField.Slot to the right of an input: Add the side="right" prop. (Note: If two slots are used within one TextField, they are automatically positioned on different sides).In version 3.0.0, Radix Themes dropped named exports for multi-part components. You must now use dot notation to access component parts. This change also ensures reliable behavior in React Server Components.
Example:
Instead of importing a specific part as a named export, use the parent component with dot notation, such as Dialog.Root.