- Added CSS files to package
sideEffects
field to prevent CSS removal in some bundlers (#659)
- Add standalone entrypoints for all components. For example:
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';
- Fix visibility flash with closing dialogs (#649)
- Fix regression that caused Segmented Control indicators to lose box shadows (#650)
- Add
aria-hidden="true"
to duplicate nodes inSegmentedControl.Item
to prevent double-reading by screen readers (#651) - Updated all Radix Primitives to the latest versions
- Updated all Radix Primitives
- Support indeterminate indicator for the uncontrolled
Checkbox
component
- Add
areas
prop to theGrid
component andgridArea
prop to all layout components (Box
,Container
,Flex
,Grid
,Section
) - Add
overflow-wrap: anywhere
style to theDataList
component so that long values—such as IDs—can break over to next line - Support indeterminate indicator for the indeterminate
Checkbox
component
- Upgrade Radix Primitives to the newest versions
- Support React 19
- Upgrade Radix Primitives to the newest versions
- Add
align
,height
,minHeight
, andmaxHeight
props toAlertDialog.Content
andDialog.Content
- Fix an issue when the Radix Themes package couldn’t be bundled with webpack because of a circular dependency within
- Support the
max
prop on theProgress
component
- Fix an issue when the theme
grayColor
setting would have no effect in combination with explicitappearance="light"
orappearance="dark"
values - Fix a regression when
Link
would use an automatic high-contrast color when an explicitcolor
value was used. - Fix a regression when
Link
would not use the correct text selection and focus color when nested in gray text. - Tweak
Link
tap highlight style - Tweak
CheckboxGroup.Item
andRadioGroup.Item
so that a layout with overflowing text truncation would be possible to achieve - Remove an unnecessary
data-accent-color
attribute from components where it had no practical effect to be there. - Rework the internals of the
color
prop definition. - Rework the autofilled and disabled colors for
TextField
andTextArea
- Add an internal
--spinner-animation-duration
CSS variable for theSpinner
component
- Remove unnecessary browser prefixes from the CSS, reducing the bundle size by 17 KB
- Fix a regression when
Link
would not use an automatic high-contrast color when nested within colored text. - Fix a regression when
Link
wouldn't display hover styles when rendered as abutton
- Fix a regression when
TextArea
would not preserve sequences of white space in Firefox
- Fix a syntax error in the reset stylesheet
- Fix Checkbox
size="1"
indicator checkmark alignment in Safari - Fix Checkbox and Radio disabled cursor styles not working in Safari
- General
- Package structure
- Improve ESM compatibility
- Improve tree-shaking of individual component parts
- [Breaking] Drop named exports for multi-part components
- [Upgrade guide] Use dot notation for all multi-part components instead, ie.
Dialog.Root
- Note: Our new approach allows dot notation to work reliably in server components too
- [Upgrade guide] Use dot notation for all multi-part components instead, ie.
- [Breaking] Remove component prop definitions and internal helpers from the root
@radix-ui/themes
import entry point and export them from@radix-ui/themes/props
and@radix-ui/themes/helpers
to make it possible to build your own component library on top of Radix Themes using the same techniques.- Note: you might need to use
"moduleResolution": "NodeNext"
with your compiler to access these paths - Note: changes to prop defs and helpers won’t be covered by semver
- Note: you might need to use
- Add a wildcard entry point to the package to allow direct access to the package internals as an escape hatch if you have a complex tooling setup that can’t support modern module resolution rules
- Add extra CSS file exports for advanced use-cases:
- Export individual
tokens.css
,components.css
, andutilities.css
files in case you need fine-grained control of the CSS precedence. For example, this allows to import Radix Themesutilities.css
after your own CSS, and everything else before that. - Additionally to the above, you can customise which colors to import. Instead of importing
tokens.css
, you can also importtokens/base.css
andtokens/colors/*.css
, where*
corresponds to the names of the accent and gray colors you need in your project. - Export
layout.css
that only includes styles for the layout components (Box, Flex, Grid, Container, Section). Individual exportslayout/tokens.css
,layout/components.css
, andlayout/utilities.css
are also available to support the above use-case.
- Export individual
- Props
- Add the following props to all layout components:
minWidth
,maxWidth
minHeight
,maxHeight
flexBasis
,flexShrink
,flexGrow
gridColumn
,gridColumnStart
,gridColumnEnd
gridRow
,gridRowStart
,gridRowEnd
overflow
,overflowX
,overflowY
- Rework all layout props to allow arbitrary CSS values, including when used with the responsive object syntax. Props that support arbitrary values include:
width
,minWidth
,maxWidth
height
,minHeight
,maxHeight
m
,mx
,my
,mt
,mr
,mb
,ml
p
,px
,py
,pt
,pr
,pb
,pl
inset
,top
,right
,bottom
,left
gap
,gapX
,gapY
flexBasis
,flexShrink
,flexGrow
gridColumn
,gridColumnStart
,gridColumnEnd
gridRow
,gridRowStart
,gridRowEnd
- [Breaking] The
width
andheight
props don't map to space scale anymore. This is because in the vast majority of cases, width and height were not set to space scale, and with that, space scale as an IDE autocomplete suggestion felt odd/misleading.- [Upgrade guide] Find and replace your
width
andheight
prop usage with the corresponding space scale steps, e.g.width="9"
would need to be changed towidth="64px"
orwidth="var(--space-9)"
, and so on for other steps.
- [Upgrade guide] Find and replace your
- [Breaking] Rename
shrink
andgrow
props:- [Upgrade guide] Use
flexShrink
andflexGrow
instead
- [Upgrade guide] Use
- Update the type signature of the layout props so that code editor suggestions use just space scale values when possible. CSS keywords and other values such as
"auto"
or"100vw"
are still available as manual string values. - Document all layout props with JSDoc
- Fix an issue with responsive props when using a breakpoints object without the
initial
key would not apply the default prop value - Remove the native
color
,defaultValue
, anddefaultChecked
attributes from components that inherit them from the native HTML elements to avoid confusion with their custom implementations - [Breaking] Rework the availability of
asChild
prop on all components and parts
- Add the following props to all layout components:
- Colors
- Make sure
highContrast
text colors work consistently when nested within other components that accept an accent color - Tweak the background color of all
variant="soft"
menu items - [Breaking] Rename
--color-surface-accent
to--accent-surface
- [Upgrade guide] If you were using this token for your custom components, make sure to replace the corresponding references
- [Breaking] Rename
--accent-9-contrast
,--red-9-contrast
,--pink-9-contrast
,--blue-9-contrast
, etc. to--accent-contrast
,--red-contrast
,--pink-contrast
,--blue-contrast
and so on.- [Upgrade guide] If you were using these tokens for your custom components, make sure to replace the corresponding references
- Remove
--gray-2-translucent
and the corresponding tinted gray colors - Tweak
--color-surface
and--color-panel-translucent
values - [Breaking] Replace
--color-focus-root
,--color-selection-root
,--color-autofill-root
with a focus color scale, e.g.--focus-1
–--focus-12
, and--focus-a1
–--focus-a12
.- [Upgrade guide] If you were overriding the above tokens or using them in your custom components, you’ll need to references the new color scale.
--color-autofill-root
is replaced by--focus-a3
--color-focus-root
is replaced by--focus-8
--color-selection-root
is replaced by--focus-a5
- [Upgrade guide] If you were overriding the above tokens or using them in your custom components, you’ll need to references the new color scale.
- Make sure
- Other
- Speed up most of the animations
- Ensure all elements that have padding or border styles use
box-sizing: border-box
- Ensure that disabled cursor styles are applied correctly
- Add a blur backdrop filter effect to the translucent panels
- Package structure
- 11 new components
DataList
- Component for displaying text data as key-value pairs. Parts:
Root
Item
Label
Value
- Component for displaying text data as key-value pairs. Parts:
CheckboxGroup
- Group of checkboxes with an optional text label and roving focus. Parts:
Root
Item
- Group of checkboxes with an optional text label and roving focus. Parts:
CheckboxCards
- Interactive card components to pick one or more value from the list. Parts:
Root
Item
- Interactive card components to pick one or more value from the list. Parts:
Progress
- Progress bar component that indicates completion of a task.
Radio
- Standalone element for building your own layouts with radio inputs.
RadioCards
- Interactive card components to pick one of the values from the list. Parts:
Root
Item
- Interactive card components to pick one of the values from the list. Parts:
Reset
- Component that resets the styles for any native HTML element.
SegmentedControl
- Component for selecting a single option out of many and for controlling tab-like interfaces
Skeleton
- Component that may wrap any UI element and turn it into a loading skeleton. Can also render self or a React Fragment conditionally using a
loading
prop.
- Component that may wrap any UI element and turn it into a loading skeleton. Can also render self or a React Fragment conditionally using a
Spinner
- Loading spinner component. Like Skeleton, it also may wrap any UI element and display itself using a conditional
loading
prop.
- Loading spinner component. Like Skeleton, it also may wrap any UI element and display itself using a conditional
TabNav
- Equivalent for
Tabs
, but used for page navigation. Renders regular links and supports roving focus. Parts:Root
Link
- Equivalent for
AlertDialog
,Dialog
- Add
position: relative
to support absolutely positioned children. - Add
width
,minWidth
,maxWidth
props to the Content part. - Set
maxWidth="600px"
by default on the Content part.- [Upgrade guide] This is slightly larger than the previous
580px
value. If you use dialogs that need a different width, overridemaxWidth
with your own value.
- [Upgrade guide] This is slightly larger than the previous
- Rework the scroll container so that it displays scrollbars on the viewport rather than confined to the dialog Content part. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
- Add
Badge
- Remove
user-select: none
- [Breaking] Add
size="3"
, makesize="2"
much smaller, tweaksize="1"
dimensions- [Upgrade guide] Replace your
size="2"
usage withsize="3"
- [Upgrade guide] Replace your
- Remove
Blockquote
,Code
,Em
,Heading
,Quote
,Link
,Strong
,Text
- Add new
wrap
andtruncate
props that control whether the text wraps and whether it is truncated with ellipsis
- Add new
Card
- Rework the internal HTML structure and styles. This component now renders a single HTML node. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
- [Upgrade guide] If you need to override the Card’s background color on variants other than
ghost
, use--card-background-color
variable instead of assigningbackground-color
directly, or set your background color on an<Inset p="current">
element nested as the first child of the Card. - [Upgrade guide] Check your Card instances that uses
asChild
or isasChild
’ed onto by a parent component. (The common case with link or button card without any extra styles will work as expected).
- [Upgrade guide] If you need to override the Card’s background color on variants other than
- Rework the internal HTML structure and styles. This component now renders a single HTML node. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
Code
variant="ghost"
color now works similarly to Text, inheriting the color unless set explicitly using thecolor
prop
Container
- Add
align
prop to control whether the container content is aligned to the left, center, or right - [Breaking] Change the
display="block"
value todisplay="initial"
(the former value was broken)
- Add
ContextMenu
,DropdownMenu
- Add
color
prop toCheckboxItem
andRadioItem
parts
- Add
Checkbox
,RadioGroup
,Switch
- Rework the internal HTML structure and styles. These components now render fewer HTML nodes and forward all props to the topmost node. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
DropdownMenu
- Use a brighter text color for the highlighted item when the Content part uses
variant="soft"
- Add an optional
TriggerIcon
part that renders an arrow down indicator
- Use a brighter text color for the highlighted item when the Content part uses
Box
,Flex
,Grid
- Add support for
as
prop to render asspan
ordiv
- For Box,
display: block
style is now enforced regardless of the tag
- Add support for
Button
,IconButton
- Add new
loading
prop
- Add new
Flex
- Add
gapX
andgapY
props
- Add
Popover
,HoverCard
- Add
position: relative
to support absolutely positioned children. - Add
width
,minWidth
,maxWidth
,height
,minHeight
,maxHeight
props to the Content part. - Set
maxWidth="480px"
by default on the Content part.- [Upgrade guide] If you use popovers and hover cards that need a wider width, override
maxWidth
with your own value.
- [Upgrade guide] If you use popovers and hover cards that need a wider width, override
- Add
RadioGroup
- [Breaking] Rework the internal HTML structure and styles. This component is now designed to display an optional text label when passing
children
to theItem
part, and theRoot
part now provides flex column styles and spacing.
- [Breaking] Rework the internal HTML structure and styles. This component is now designed to display an optional text label when passing
Section
- [Breaking] Change the
display="block"
value todisplay="initial"
(the former value was broken) - [Breaking] Use a new value for
size="3"
, use the previous value forsize="4"
- [Upgrade guide] Update all your Sections that used
size="3"
tosize="4"
- [Upgrade guide] Update all your Sections that used
- [Breaking] Change the
Select
- Make sure that Trigger font weight is not inherited, e.g. from a wrapping
<label>
element
- Make sure that Trigger font weight is not inherited, e.g. from a wrapping
Separator
- Allow responsive values for the
orientation
prop
- Allow responsive values for the
ScrollArea
- Fix an issue when Scroll Area would be unable to stretch to 100% height when informed by the parent’s auto height
Slider
- Change the size of the bounding box to match the size of the Slider track
- Replace
flex-shrink: 0
withflex-grow: 1
andwidth: stretch
/height: stretch
to allow the slider element to flex and shrink in layouts more intuitively. - Fix an overzealous focus outline in Safari
Table
- Add new
layout
prop to control thetable-layout
style property - Align
width
prop type signature and implementation on theTableCell
part with the reworkedwidth
prop on the layout components - Add
minWidth
andmaxWidth
props to theTableCell
part
- Add new
Tabs
:- Add
color
andhighContrast
props toTabsList
- Add margin props
TabsList
andTabsContent
- Renamed the letter/word spacing CSS variables in
.radix-themes
so that it supports bothTabs
andTabNav
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
- Add
TextArea
- Add
radius
prop - Add
resize
prop - Fix an issue when Grammarly extension would break the component styles
- Make sure that the font weight is not inherited, e.g. from a wrapping
<label>
element - Rework the internal HTML structure and styles. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
- Add
TextField
- [Breaking] Remove the
Input
part to simplify how props are forwarded and rework internal HTML structure and styles.- [Upgrade guide]:
- All
TextField.Input
parts used withoutTextField.Root
should be renamed toTextField.Root
- All
TextField.Input
parts used withinTextField.Root
should be removed and their props should be put directly on theTextField.Root
part - All
TextField.Slot
parts placed to the right ofTextField.Input
will needside="right"
prop. However, no adjustment is needed when two slots were used within oneTextField
, e.g. one slot on the left and another one on the right. In that case, the slots will be automatically placed on different sides. - Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
- All
- [Upgrade guide]:
- Fix an issue with some input
type
s not supportinggetSelectionRange
- Fix an issue when Grammarly extension would break the component styles
- Make sure that the font weight is not inherited, e.g. from a wrapping
<label>
element
- [Breaking] Remove the
ThemePanel
- Change the hotkey to toggle the Theme Panel to "T" keypress and dark mode to "D" keypress (without modifiers).
Theme
- Set
min-height: 100vh
on the rootTheme
component - Fix an issue when in certain situations,
hasBackground
prop value would have no effect - Refine the logic for when
Theme
has a background color by default.Theme
without an explicithasBackground
prop will display a background color:- When it is the root
Theme
component - When it has an explicit appearance value, e.g.
<Theme apperance="light">
or<Theme apperance="dark">
- When it is the root
- Body background color is no longer set automatically. The background color is now provided by the root
Theme
by default.- [Breaking] The CSS variable
--color-page-background
is no longer available. In most cases, it can be safely replaced with--color-background
available on the.radix-themes
element. suppressHydrationWarning
onhtml
is no longer needed (unless required by other libraries, likenext-themes
)
- [Breaking] The CSS variable
- Document all Theme props with JSDoc
- Set
Tooltip
- Add
width
,minWidth
,maxWidth
props. - Set
maxWidth="360px"
by default on the tooltip content- [Upgrade guide] If you use tooltips that need to be wider, override
maxWidth
with your own value.
- [Upgrade guide] If you use tooltips that need to be wider, override
- Change the default delay duration to 200ms
- Add
Select
- Fix a type issue when
placeholder
prop would appear not found after the recent React DOM types update
- Fix a type issue when
- Fix an issue when Chrome would sometimes crash while using CSS inspector on a Radix Themes stylesheet
Card
- Fix an issue when
variant="surface"
border color may disappear in browsers that don't supportcolor-mix
- Tweak
variant="surface"
border color
- Fix an issue when
Code
- When
variant="ghost"
is used within aLink
, make sure thatunderline="hover"
on theLink
is respected.
- When
TextField
- Improve vertical text alignment with common fonts
- Don’t apply the autofill accent color when the input is disabled
- Make sure the autofill accent color always pairs with the focus outline color
- General
- Combine selectors in the CSS build, improving the developer experience when inspecting elements in the browser.
- Remove comments from the CSS build.
- Cap CSS selector specificity at
0,1,0
for styling HTML elements and at0,1,1
for styling pseudo-elements, improving compatibility with Tailwind.- [Upgrade guide] If you were relying on any specificity quirks of Radix Themes, make sure that your style overrides still work as expected.
- Rework dark mode colors, refine light mode colors (via Radix Colors 3.0.0).
- Fix oversaturated transparent grays.
- [Upgrade guide] If you were using the color tokens for your custom styles, make sure that your designs look as expected.
- [Upgrade guide] If you were overriding certain colors, make sure that your overrides are harmonized with the new color scales.
- Rework transparent black and white color scales.
- [Upgrade guide] If you were using transparent black and white color scales for your custom styles (
--black-a1
,--white-a1
, etc.), make sure to check the new values and update the steps used so that your designs look as expected:- Change
--black-a1
torgba(0, 0, 0, 0.01)
- Change
--black-a2
torgba(0, 0, 0, 0.024)
- Change
--black-a3
to--black-a1
- Change
--black-a4
to--black-a2
- Change
--black-a5
to--black-a2
- Change
--black-a6
to--black-a3
- Change
--black-a7
to--black-a3
or--black-a4
- Change
--black-a8
to--black-a5
- Change
--black-a9
to--black-a6
or--black-a7
- Change
--black-a10
to--black-a7
- Change
--black-a11
to--black-a8
- Change
--black-a12
to--black-a11
- Change
--white-a1
totransparent
- Change
--white-a2
torgba(255, 255, 255, 0.01)
- Change
--white-a3
to--white-a1
or--white-a2
- Change
--white-a4
to--white-a2
- Change
--white-a5
to--white-a3
- Change
--white-a6
to--white-a3
or--white-a4
- Change
--white-a7
to--white-a4
- Change
--white-a8
to--white-a5
- Change
--white-a9
to--white-a6
- Change
--white-a10
to--white-a7
- Change
--white-a11
to--white-a9
- Change
--white-a12
to--white-a11
or--white-a12
- Change
- [Upgrade guide] If you were using transparent black and white color scales for your custom styles (
- Refine the shadow scale.
- Maintain theme accent color for focus rings on most
color="gray"
components similarly to the text selection color. - Change some internal component-specific CSS variables to follow a naming pattern.
- Make sure that forced light/dark appearance on the
Theme
component also sets the corresponding browser colors, like the correct input autofill background color. - Rename all
@keyframes
animations withrt-
prefix and into kebab case. - Use
outline
rather thanbox-shadow
for most focus styles, which avoids a slight anti-aliasing issue in Chrome on focused elements.
AlertDialog
,Dialog
- Add padding around dialog content to prevent it from touching the viewport edges
- Make sure that the dialog content doesn’t overflow viewport on iOS
Avatar
- Don’t enforce fallback icon size
- [Upgrade guide] If you were using
svg
assets as a fallback, make sure to set an appropriate size manually.
- [Upgrade guide] If you were using
- Don’t enforce fallback icon size
- Add CSS variables to control the cursor style on interactive elements:
--cursor-button: default;
--cursor-checkbox: default;
--cursor-disabled: not-allowed;
--cursor-link: pointer;
--cursor-menu-item: default;
--cursor-radio: default;
--cursor-slider-thumb: default;
--cursor-slider-thumb-active: default;
--cursor-switch: default;
- Replace
.rt-reset-button
and.rt-reset-a
classes with a single.rt-reset
class- The new
.rt-reset
class can be use to reseta
,button
,h1
,h2
,h3
,h4
,h5
,h6
,ol
,ul
,p
, andpre
tags when building custom components. - [Upgrade guide] If you were using these classes for your custom components, update the class name used.
- The new
Blockquote
- [Breaking] Remove
trim
prop
- [Breaking] Remove
Button
,IconButton
- Refine and normalise the look and feel of the disabled states.
- Apply disabled styles to other elements when using
disabled
together withasChild
- Improve
variant="classic"
look and feel across different accent colors in light and dark mode.
Callout
- Tweak how the layout works to allow nesting multiple
Callout.Text
elements withinCallout.Root
- [Upgrade guide] If you were relying on how
Callout.Root
happened to provide flex properties, change your layout to use aFlex
component explicitly.
- [Upgrade guide] If you were relying on how
- Fix an issue when the callout would inherit text color unless an explicit
color
prop was passed.- [Upgrade guide] If you preferred the previous look, pass
highContrast
prop to your callouts to make the text darker.
- [Upgrade guide] If you preferred the previous look, pass
- Use a gray background for a gray
variant="surface"
- Use a darker outline color
variant="outline"
- Tweak how the layout works to allow nesting multiple
Checkbox
- [Breaking] Improve layout so that wrapping a checkbox in
Text
component automatically aligns the checkbox with the first line of the text.- [Upgrade guide] Make sure that your layouts with checkboxes look as expected. If not, wrap your checkboxes in
<Text as="label" size="...">
, using your preferred text size.
- [Upgrade guide] Make sure that your layouts with checkboxes look as expected. If not, wrap your checkboxes in
- [Breaking] Rework sizes – add a smaller
size="1"
, change the default size tosize="2"
, add a more refinedsize="3"
- [Upgrade guide] If you were using
size="1"
orsize="2"
checkboxes via an explicitsize
prop, rename them tosize="2"
andsize="3"
respectively.
- [Upgrade guide] If you were using
- Refine the look and feel of
variant="classic"
. - Refine and normalise the look and feel of the disabled states.
- [Breaking] Improve layout so that wrapping a checkbox in
Card
- Update the
variant="classic"
shadow so that it doesn’t extend outside of the element. - Refine hover and pressed styles for
variant="classic"
- Add missing pressed styles.
- Refine how the inner shadows are applied so that they blend with the background outside of the component.
- Update the
Code
- Add interactive styles when
Code
is withinLink
- Fix an issue when
variant="ghost"
font size would be inconsistent depending on whether the size was based on a parentText
element or came from the code’s ownsize
prop - Scale the outline thickness relative to the font size for
variant="outline"
andvariant="surface"
- Improve
::selection
background color forvariant="solid"
- Add CSS variables to
.radix-themes
for customising the padding ofCode
variants in case the default values don’t work well with the vertical metrics of custom code font.--code-padding-top
--code-padding-bottom
- Add interactive styles when
DropdownMenu
,ContextMenu
- Reduce border radius when theme setting is
radius="full"
- Refine horizontal paddings
- Refine label look and feel
- Reduce border radius when theme setting is
Grid
- Fix a bug when nesting
Grid
components could cause the descendantGrid
’s to inherit some parent styles unintentionally.
- Fix a bug when nesting
Inset
- Add
clip
prop to control whether content is clipped to the padding or to the border of the parent element. - Automatically adjust table cell padding for when
Table
is insideInset
- Add
Kbd
- Tweak vertical alignment
Link
- Desaturate the underline color.
- Make links automatically high-contrast within colored
Heading
elements (similarly to the automatic high-contrast withinText
). - Scale the underline thickness relative to the font size for
variant="outline"
andvariant="surface"
RadioGroup
- [Breaking] Improve layout so that wrapping a radio button in
Text
component automatically aligns the radio button with the first line of the text.- [Upgrade guide] Make sure that your layouts with radio buttons look as expected. If not, wrap your radio buttons in
<Text as="label" size="...">
, using your preferred text size.
- [Upgrade guide] Make sure that your layouts with radio buttons look as expected. If not, wrap your radio buttons in
- [Breaking] Rework sizes – add a smaller
size="1"
, change the default size tosize="2"
, add a more refinedsize="3"
- [Upgrade guide] If you were using
size="1"
orsize="2"
radio buttons via an explicitsize
prop, rename them tosize="2"
andsize="3"
respectively.
- [Upgrade guide] If you were using
- Refine the look and feel of
variant="classic"
. - Refine and normalise the look and feel of the disabled states.
- [Breaking] Improve layout so that wrapping a radio button in
Select
- Fix invisible scrollbar in long item lists
- Improve
variant="classic"
look and feel across light and dark mode. - Align
SelectContent
to the left of the trigger when usingposition="popper"
- Refine horizontal paddings
- Refine label look and feel
- Rework
size="3"
- Update the disabled trigger text color so it’s easier to read, similarly to Text Field
- Make sure to pass children to trigger so that if needed, it's possible to control what the trigger renders
ScrollArea
- Upgrade the primitive version, fixing an upstream type issue
- Rename scrollbar margin variables to include the scrollbar orientation and declare them on
.radix-themes
to facilitate easier scrollbar position adjustments- [Upgrade guide] If you were using the variables
--scrollarea-scrollbar-margin-top
,--scrollarea-scrollbar-margin-left
, etc. make sure that they follow the new names and are set at the appropriate level. There's no need to target.rt-ScrollAreaScrollbar
element to set the variables anymore, as they can be set just on the component that needs the override. New variables:--scrollarea-scrollbar-horizontal-margin-top
--scrollarea-scrollbar-horizontal-margin-bottom
--scrollarea-scrollbar-horizontal-margin-left
--scrollarea-scrollbar-horizontal-margin-right
--scrollarea-scrollbar-vertical-margin-top
--scrollarea-scrollbar-vertical-margin-bottom
--scrollarea-scrollbar-vertical-margin-left
--scrollarea-scrollbar-vertical-margin-right
- [Upgrade guide] If you were using the variables
Slider
- Refine the shadows and colors used in the components.
- Refine and normalise the look and feel of the disabled states.
- Fix an issue where high contrast sliders would have an incorrect disabled style.
Switch
- [Breaking] Improve layout so that wrapping a switch in
Switch
component automatically aligns the switch with the first line of the text.- [Upgrade guide] Make sure that your layouts with switches look as expected. If not, wrap your switches in
<Text as="label" size="...">
, using your preferred text size.
- [Upgrade guide] Make sure that your layouts with switches look as expected. If not, wrap your switches in
- [Breaking] Rework sizes, making
size="2"
andsize="3"
smaller.- [Upgrade guide] Use
size="3"
instead ofsize="2"
to match the previous look.
- [Upgrade guide] Use
- Refine the shadows and colors used in the components.
- Refine and normalise the look and feel of the disabled states.
- [Breaking] Improve layout so that wrapping a switch in
Table
- Refine how the outer border is applied so that it blends with the background outside of the component.
Tabs
- Add CSS variables to
.radix-themes
for customising the letter spacing and word spacing of active and inactive tabs so that you can minimise the apparent shift in weight in case the default values don’t work for your custom font.--tabs-trigger-active-letter-spacing
--tabs-trigger-active-word-spacing
--tabs-trigger-inactive-letter-spacing
--tabs-trigger-inactive-word-spacing
- Add CSS variables to
Text
- Add
as="label"
option to theas
prop - Improve how prop types are resolved when
as
prop isn’t specified
- Add
TextArea
- Rework the internal implementation, now using multiple HTML nodes for styling purposes.
- Adjust the layout styles so that
TextArea
behaves like a truedisplay: block
element, filling the available space horizontally. - The
style
andclassName
are now forwarded to the wrappingdiv
element. Theref
and other props are still forwarded to thetextarea
itself. - [Upgrade guide] If you were overriding
TextArea
styles viastyle
,className
, or custom CSS that targets the related HTML nodes, make sure that your custom styles work as expected. - [Upgrade guide] If you were relying on the intrinsic width of
TextArea
set by the browser, make sure that your layout looks as expected.
- Adjust the layout styles so that
- Refine padding values for a more balanced look.
- Use matching scroll margins for a nicer typing experience when the
TextArea
overflows.
- Use matching scroll margins for a nicer typing experience when the
- Refine how the inner shadows are applied so that they blend with the background outside of the component.
- Refine and normalise the look and feel of disabled and read-only states.
- Fix a Safari bug when the text value would appear tinted in the disabled input.
- Improve autofill styles.
- Rework the internal implementation, now using multiple HTML nodes for styling purposes.
TextField
- Reset
z-index
of the container to avoid potential stacking issues. - Refine padding values for a more balanced look.
- Use
text-indent
instead ofpadding-left
so that long values aren't truncated on the left when the cursor is at the end of the input.
- Use
- Refine how the inner shadows are applied so that they blend with the background outside of the component.
- Refine and normalise the look and feel of disabled and read-only states.
- Fix a Safari bug when the text value would appear tinted in the disabled input.
- Remove ellipsis truncation, as this prevented long values from being shown when scrolling on the input horizontally in Chrome.
- Improve autofill styles.
- Reset
ThemePanel
- Disable transitions when changing the appearance.
- Improve contrast in the border radius preview.
Tooltip
- Reduce border radius when theme setting is
radius="full"
- [Breaking] Remove
multiline
prop- [Upgrade guide] If you were using
multiline
prop, passstyle={{ maxWidth: 250 }}
to the relevant Tooltip elements.
- [Upgrade guide] If you were using
- Reduce border radius when theme setting is
- General
- Make sure to also export
ThemeProps
andThemePanelProps
- Make sure to also export
- General
- Export prop types from all components
- General
- Three new color scales:
ruby
,iris
, andjade
- Set explicit versions of the Radix Primitives dependencies to allow stable builds
- Use an explicit
React.FC
type forContextMenuSub
,DialogRoot
,HoverCardRoot
, andPopoverRoot
, resolving a type error with certain setups
- Three new color scales:
Public release 🎉
- General
- Fix SVG icon attribute warning
Button
- Tweak
classic
variant chrome
- Tweak
Checkbox
- Update the check icon
Dialog
- Darken the overlay in dark mode
DropdownMenu
,ContextMenu
- Update icons
- Tweak trigger open states
- Replace dot icon with check icon for the radio items as the more common design
Select
- Update the check icon
- Tweak
classic
variant chrome - Polish trigger arrow icon size and positioning
Table
- Add overflow scrollbars
ThemePanel
- Fix
onAppearanceChange
type
- Fix
- General
- Upgrade to Radix Colors
2.0.1
, which updates alla1
and somea2
steps in dark mode.
- Upgrade to Radix Colors
ThemePanel
- Add
onApperanceChange
prop to delegate updating the theme classes to another solution (ie. next-themes)
- Add
- General
- Upgrade to Radix Colors
2.0.0-alpha.3
. Much better contrast across the board in dark mode, darker high contrast grays in light mode, completely reworked bright colors like lime, yellow, amber, mint, and sky.
- Upgrade to Radix Colors
DropdownMenu
,Select
- Fix vertical alignment of text within menu items
Switch
- Fix Autoprefixer
transition-property
warning
- Fix Autoprefixer
- General
- Respect the theme class format on the
html
element when updating the appearance
- Respect the theme class format on the
Blockquote
- Tweak spacing
Button
- Fix disabled ghost button padding
ThemePanel
- Improve tooltips content
- General:
- Fix nested themes regression (recovering
:is(.dark, .dark-theme)
selector)
- Fix nested themes regression (recovering
- General:
- [Breaking] Fixed typo:
buttonPropsDefs
->buttonPropDefs
- Remove unneeded
:is(.dark, .dark-theme)
selector for dark mode colors, since we don't recommend wrapping thehtml
element anymore - Tweak translucent panel color in light mode
- Add a special
--gray-2-translucent
step for translucent panel color in dark mode
- [Breaking] Fixed typo:
Avatar
:- Fix text fallback size regression
- [Breaking] Don't default to
gray
color
Badge
:- [Breaking] Don't default to
gray
color - Recover missing
solid
high-contrast for all colors
- [Breaking] Don't default to
Blockquote
:- Tweak the design
Button
,IconButton
:- Refine when pressed state is applied so that buttons that open a modal panel don’t flash
:active
- Fix disabled
variant="classic"
when pressed
- Refine when pressed state is applied so that buttons that open a modal panel don’t flash
Callout
:- Always set
text-align: left
- [Breaking] Don't default to
gray
color
- Always set
Code
:- Fix
variant="ghost"
ignoring thecolor
prop
- Fix
Container
:- [Breaking] Rename
size="3"
tosize="4"
and change its width to1136px
. - Make
size="4"
the default (almost matching the previous default width) - Add a new
size="3"
at880px
- [Breaking] Rename
Em
:- Update default font family.
Inset
:- [Breaking] Make
"all"
the defaultside
value
- [Breaking] Make
Kbd
:- Don’t inherit font weight.
- Tweak vertical alignment.
Quote
:- Add styles and corresponding CSS variables (similar to
Em
).
- Add styles and corresponding CSS variables (similar to
ScrollArea
:- Add internal CSS variables to control the scroll bar spacing
--scrollarea-scrollbar-margin-top
,--scrollarea-scrollbar-margin-bottom
,--scrollarea-scrollbar-margin-left
,--scrollarea-scrollbar-margin-right
- Add internal CSS variables to control the scroll bar spacing
Select
:- Tweak
classic
variant shadow in dark mode to better match other form components
- Tweak
Tabs
:- Improve text alignment consistency between active and inactive tab trigger states
Table
:- Rework
TableRoot
part so that cell borders don’t overlap the outer table border. This change theTableRoot
’s topmost element into adiv
. - Fix
vertical-align
andtext-align
regression
- Rework
TextField
,TextArea
:- Tweak
soft
variant when read-only
- Tweak
ThemePanel
- Tweak the design
- Don’t animate the panel on initial render if
defaultOpen
istrue
- General:
- Gatekeep hover styles behind
@media (hover: hover)
- No class is unprefixed anymore (apart from
.radix-themes
and.light
,.light-theme
,.dark
,.dark-theme
) - Everything is prefixed with
.rt-
- Every responsive class is always prefixed with
.rt-r-
- Gatekeep hover styles behind
Button
,IconButton
:- Fix
ghost
variant responsive bug
- Fix
Switch
:- Fix the animation when switching between checked and unchecked state
Theme
:- Fix issue when
hasBackground={false}
wasn't respected - Root vs. Nested
Theme
delineation now usesdata-is-root-theme="true|false"
instead of.root
- Fix issue when
ContextMenu
,DropdownMenu
:- Fix
asChild
composition withSubTrigger
,CheckboxItem
,RadioItem
- Fix
ScrollArea
:- Ensure compatibility with
max-height
(makeRoot
flex column)
- Ensure compatibility with
ThemePanel
:- [Breaking] Rename
initiallyHidden
(defaultfalse
) todefaultOpen
(defaulttrue
) - Remove
inherit
option fromappearance
control (reacts to class changes now)
- [Breaking] Rename
- General:
- [Breaking] Import styles from
@radix-ui/themes/styles.css
instead of@radix-ui/react-themes/index.css
- [Breaking] Import styles from
ContextMenu
:- Add
contextMenuCheckboxItemPropDefs
- Add
DropdownMenu
:- Add
dropdownMenuCheckboxItemPropDefs
- Add
Select
:- [Breaking] Remove
solid
andoutline
trigger variants - Tweak all other variant design to be more akin to other form components
- Add
size
3
- [Breaking] Remove
TextField
,TextArea
:- Tweak
soft
to use--accent-12
- Tweak
Theme
:- [Breaking] Rename
background
prop tohasBackground
(anddata-background
attribute todata-has-background
)
- [Breaking] Rename
- General
- [Breaking] Import styles from
@radix-ui/themes/index.css
instead of@radix-ui/react-themes/dist/index.css
- Update shadows in dark mode
- Fix
--default-letter-spacing
variable being not applied to the typographic components - Rename
Segoe UI
andOpen Sans
with custom metrics toSegoe UI (Custom)
andOpen Sans (Custom)
in the@font-face
- Remove Google Fonts
- [Breaking] Import styles from
Badge
:- Tweak
outline
andsurface
borders
- Tweak
Button
- Bump up icon opacity to
0.9
- Fix
classic
blend mode and improve high-contrast hover
- Bump up icon opacity to
Code
:- Update the font stack
- Tweak
outline
border
Em
:- Update the font stack
- Fix
--em-font-size-adjust
not working
Kbd
:- [Breaking] Remove
width
prop - Rework sizing, add
size
prop - Tweak the chrome
- [Breaking] Remove
Strong
:- Fix
--strong-font-size-adjust
not working
- Fix
Slider
,Switch
- Update high contrast variant design
Theme
:- [Breaking] Remove
textColor
prop - [Breaking] Remove
backgroundColor
prop - [Breaking] Rename
applyBackground
prop tobackground
(anddata-background-applied
attribute todata-background
) - [Breaking] Rename
accentScale
prop toaccentColor
(anddata-accent-scale
attribute todata-accent-color
) - [Breaking] Rename
grayScale
prop tograyColor
(anddata-gray-scale
attribute todata-gray-color
) - [Breaking] Should always be within
body
now (rather than wrappinghtml
orbody
) - [Breaking] When
appearance
isdark
orlight
, we inject a script (similar tonext-themes
) to set the theme class / color-scheme onhtml
. Because of this,suppressHydrationWarning
needs to be added tohtml
.
- [Breaking] Remove
ThemePanel
:- New design
- General:
- Fix negative margin overrides inheritance
- [Breaking] Rename
--color-surface-1
to--color-surface
- [Breaking] Rename
--color-surface-2
to--color-panel-translucent
- [Breaking] Rename
--color-panel
to--color-panel-solid
- [Breaking] Rename
--accent-surface
to--color-surface-accent
- [Breaking] Remove
--color-canvas
- Add new
panelBackground
setting onTheme
(andThemePanel
)
Button
,IconButton
:- Add new
classic
variant
- Add new
Card
:- [Breaking] Rename
surface
variant toclassic
- [Breaking] Rename
solid
variant tosurface
- [Breaking] Rename
Checkbox
:- [Breaking] Rename
surface
variant toclassic
- [Breaking] Rename
solid
variant tosurface
- [Breaking] Rename
Link
:- Add
underline
(auto
,hover
,always
) prop.auto
is the default and behaviour is unchanged.
- Add
RadioGroup
:- [Breaking] Rename
surface
variant toclassic
- [Breaking] Rename
solid
variant tosurface
- [Breaking] Rename
Select
:- Add new
classic
variant - [Breaking] Remove
solid
overrides, closest style for now is<Select.Trigger variant="surface" highContrast>
- Add new
Slider
:- [Breaking] Rename
surface
variant toclassic
- [Breaking] Rename
solid
variant tosurface
- [Breaking] Rename
Switch
:- [Breaking] Rename
surface
variant toclassic
- [Breaking] Rename
solid
variant tosurface
- [Breaking] Rename
Table
:- Fix pointer-events issue
TextArea
:- [Breaking] Rename
surface
variant toclassic
- [Breaking] Rename
solid
variant tosurface
- [Breaking] Rename
TextField
:- [Breaking] Rename
surface
variant toclassic
- [Breaking] Rename
solid
variant tosurface
- [Breaking] Rename
- General:
- Refine
--shadow-1
- Refine
Button
,IconButton
:- Add size 4
Callout
:- [Breaking] Remove
radius
prop
- [Breaking] Remove
Card
:- [Breaking] Remove
radius
prop
- [Breaking] Remove
Checkbox
:- Refine colors for
solid
unchecked variant - [Breaking] Remove
radius
prop
- Refine colors for
Select
:- [Breaking] Move
radius
prop fromRoot
toTrigger
- [Breaking] Move
Slider
:- Refine
Thumb
andRange
shadows
- Refine
RadioGroup
:- Refine colors for
solid
unchecked variant
- Refine colors for
Switch
:- Refine colors for
surface
unchecked variant
- Refine colors for
Table
:- [Breaking] Remove
radius
prop - [Breaking] Remove optional
Root
prop (Content
was renamed toRoot
instead) and add a newvariant
prop- Tables previously no wrapped in
Root
part should look the same out of the box (replaceContent
withRoot
) - Tables previously wrapped in
Root
: removeRoot
, renameContent
toRoot
and addvariant="surface"
- Tables previously no wrapped in
- [Breaking] Remove
TextArea
:- [Breaking] Remove
radius
prop
- [Breaking] Remove
- General:
- Upgrade Radix Colors to
2.0.0-alpha.1
- Upgrade Radix Colors to
Button
:- Refine colors for
outline
andsurface
variants - Use a smaller border radius for
size="1"
buttons - Use a softer border color for
variant="outline" highContrast
buttons
- Refine colors for
Card
:- Refine colors and shadows when hovered and pressed
Switch
:- Improve
soft
variant saturation when checked
- Improve
TextArea
,TextField
- Refine colors for the
solid
variant
- Refine colors for the
- General:
- Make
--color-surface-2
and--accent-surface
slightly transparent in light mode - [Breaking] Rework all shadow token values and how they are used
--shadow-2
and--shadow-3
are the new steps- Other steps renamed and tweaked
- Switch your
--shadow-2
to--shadow-4
if you want to approximate the old look - Switch your
--shadow-3
to--shadow-6
if you want to approximate the old look - Switch your
--shadow-4
to--shadow-5
if you want to approximate the old look - Switch your
--shadow-5
to--shadow-4
if you want to approximate the old look
- Make
Card
:- [Breaking] Remove
outline
variant - [Breaking] Add new
solid
variant and make it the default - Rework
surface
variant design
- [Breaking] Remove
Dialog
:- Tweak the overlay color in light mode
- General:
- Improve
--shadow-1
in dark mode
- Improve
Slider
:- Add new
surface
variant, reworksoft
variant - [Breaking] Switch your
variant
tosurface
if you want the old look
- Add new
Switch
:- Improve
soft
andsurface
variants design
- Improve
- General:
- Add
--color-surface-1
--color-surface
is now--color-surface-2
- Add
--color-canvas
(used insolid
variants for form controls)
- Add
Button
,IconButton
:- Update font-weight to
--font-weight-medium
on all exceptghost
variant - Color polish
- Update font-weight to
TextField
:- Add new
solid
variant - [Breaking] Default
variant
is nowsolid
- Add new
TextArea
:- Add new
solid
variant - [Breaking] Default
variant
is nowsolid
- Add new
Checkbox
:- Add new
surface
andsoft
variants - [Breaking] Switch your
variant
tosurface
if you want the old look
- Add new
RadioGroup
:- Add new
surface
andsoft
variants - [Breaking] Switch your
variant
tosurface
if you want the old look
- Add new
Select
:- [Breaking] Default variant is now
solid
solid
variant look and feel adjusted to match form controls (e.g.TextField
,Checkbox
, etc)
- [Breaking] Default variant is now
Switch
:- Add new
surface
andsoft
variants - [Breaking] Switch your
variant
tosurface
if you want the old look
- Add new
Warning! This release contains some breaking changes.
Grid
:- Add support for arbitrary values in
columns
- Add
rows
prop with arbitrary values support
- Add support for arbitrary values in
Inset
:- New component supported inside
Dialog
,AlertDialog
,Card
,HoverCard
,Popover
- Automatic padding adjustments for
Table
insideInset
- New component supported inside
Slider
: ForwardtabIndex
correctly toThumb
Code
:- [Breaking] Polish size,
--code-font-size-adjust
is now0.95
- [Breaking] Rename
plain
variant toghost
- [Breaking] Polish size,
Callout
: [Breaking] Removesolid
variantTable
: Addsize
prop toTableContent
Popover
: [Breaking] Now comes with its own internal padding- General:
- Fix light/dark color inheritance
- [Breaking]
--color-surface-1-accent
is now--accent-surface
- [Breaking]
--color-surface-1
is now--color-surface
- [Breaking]
- Polish color usages (alpha, etc)
- Polish focus states throughout
- Fix light/dark color inheritance
TextField
:Root
is nowdisplay: flex
- General:
- Fix inherited appearance colors
- Support
.light
/.dark
out of the box
Warning! This release contains some breaking changes.
Table
: New component- [Breaking]
TextField
: Add slots support (basic breaking change fix:TextField
->TextFieldInput
) - General:
ThemePanel
: Remove keying and__useKey
prop (now syncs prop changes internally)- Support global appearance inheritance (next-themes integration):
- [Breaking]
appearance="invert"
was removed onTheme
- [Breaking]
Avatar
: Add 4 extra sizes- General:
- Don't reset
cursor
in CSS resets forbutton
anda
elements - Fix callout post CSS warning
- Expose private
__useKey
prop onTheme
to disable keying the rootTheme
in the docs.
- Don't reset
Warning! This release contains some breaking changes.
- General:
- [Breaking]
[data-rui-root]
is now.radix-themes
rui-
prefixes are nowrt-
prefixes (could be breaking if you rely on internal stuff)
- [Breaking]
Select
: Tweak icon gapCard
: Add built-in negative margin support to ghost cards
Callout
: New componentCard
: New componentContextMenu
/DropdownMenu
: Fix link items (<DropdownMenuItem asChild><a>…
)
- General:
- Create new static context on
[data-rui-root]
so overlayed components work correctly out of the box - Fix
--color-surface-1
value in nested themes
- Create new static context on
Button
,IconButton
: Tweak ghost variant sizingBadge
: Scale based on font-size/line-heightHeading
: Fix leading-trim regression
- General:
- Fix Context issues in Next.js RSC component. This was fixed using proper module resolution using
exports
field inpackage.json
, it seems without it it's confusing Next.
- Fix Context issues in Next.js RSC component. This was fixed using proper module resolution using
DropdownMenu
,ContextMenu
: Improve experience using scroll marginsSelect
:- Fix issue with scrollarea integration messing up scroll position
- Improve experience using scroll margins
Button
,IconButton
: Improve balancing using built-in negative marginsCheckbox
: Fix radius regression- Typography:
- Remove
--default-font-size-adjust
- Remove
--heading-font-weight
- Fix
--default-font-style
value - Fix
--heading-font-style
value
- Remove
- General:
- Use naming convention for internal CSS variables
This update is all about tokens!
--fs-
tokens renamed to long-form--font-size-
--br-
tokens renamed to long-form--radius-
- [Breaking] The border radius scale has been reworked to be more explicit:
- The
"full"
radius now is a multiplier of2
which avoids big panels to become circles - Raw border radius tokens have been removed, instead opt-into full radius using
--radius-full
in amax
CSS function
- The
- [Breaking] The border radius scale has been reworked to be more explicit:
- Implement the entire token suite for font sizes, line heights, letter-spacings, leading-trim, font-weight, font-families, etc
- General:
- Fix missing export for tooltip prop defs
- General:
- [Breaking] Add missing / rename wrong prop defs
Warning! This release contains some breaking changes.
Sup
: [Breaking] This component was removedLink
: Now extendsText
and supports all its props exceptalign
Button
,IconButton
: AddasChild
support (for analogous use of<Button asChild><a>…
)Blockquote
: Now extendsText
and supports all its props exceptalign
Heading
: Addweight
support- General:
- Use local icons internally instead of Radix icons to avoid package bloat
- [Breaking] Rework exposed props definitions
Warning! This release contains some breaking changes.
RadixThemesProvider
: [Breaking] The component was removed, onlyTheme
is required nowHeading
: Improve types output slightlyContainer
,Section
: Add all layout props- General:
- Improve
::selection
color - Add
auto
support in margin values
- Improve
Warning! This release contains some breaking changes.
Provider
:- [Breaking] The component was renamed to
RadixThemesProvider
- [Breaking] The component was renamed to
ThemeConfig
:- [Breaking] The component was renamed to
Theme
- [Breaking] The
mode
prop was renamed toappearance
- Now live-reloads correctly when changing a prop in JSX
- [Breaking] The component was renamed to
Heading
: Addas
prop for quick level change (allowsh1
toh6
)Text
:- Add
as
prop for specific quick change (allowsspan
(default),div
andp
) - [Breaking] Now renders a
span
by default (instead ofp
).- Most of your usages of
Text
should be replaced by<Text as="p">
- Your usages of
<Text asChild><span>…
should be replaced simply by<Text>…
- Your usages of
<Text asChild><span>…
should be replaced simply by<Text>…
- Most of your usages of
- Add
DropdownMenu
,ContextMenu
:- [Breaking] The
mode
prop onContent
was removed - Ensure extra left padding on items only when checkable items are present in the menu
- [Breaking] The
Select
:- [Breaking] The
mode
prop onContent
was removed - Fix
Content
type (remove wrongsize
prop, exists onRoot
, not onContent
)
- [Breaking] The
AlertDialog
,Dialog
HoverCard
,Popover
:- [Breaking] The
mode
prop onContent
was removed
- [Breaking] The
Dialog
,AlertDialog
: Fix overlay color whenmode
is setSelect
:- Add
placeholder
styling - Add internal
ScrollArea
to provide overflow affordance - Adjust
disabled
item color
- Add
DropdownMenu
,ContextMenu
:- Add internal
ScrollArea
to provide overflow affordance - Adjust
disabled
item color
- Add internal
Text
: Fixtrim
for non-defined sizes- General:
- Popper components, default
collisionPadding
to10
for consistency - Fix responsive styles bug (output order)
- Popper components, default
Slider
: Fixsize="1"
thumb not showing
- General:
- Ensure all arbitrary px values are also scaled (line-heights, etc)
- Put popper animations behind
prefers-reduced-motion
media query
ThemePanel
: Add "copy theme config" functionalityBadge
:- Add
solid
variant - Add
radius
support
- Add
Separator
: Handlecolor
more simply (default tocolor="gray"
likeBadge
)Heading
:- Add
align
support - Add
highContrast
support
- Add
Text
:- Add
highContrast
support - Don't set default
font-weight
anymore (now inherits by default) - No default
size
anymore (now inherits by default)
- Add
Link
:- Don't set default
font-weight
anymore (now inherits by default)
- Don't set default
Warning! This release contains lots of breaking changes.
AlertDialog
,Dialog
,ContextMenu
,DropdownMenu
,HoverCard
,Popover
,Select
: Add newmode
prop toContent
part- General:
- [Breaking]
ThemeConfig
is now mandatory - All tokens are now scoped to the root
ThemeConfig
component - All config values are now explicitly set in the DOM (no more implied defaults in CSS).
- [Breaking] This also removed the need for the intermediary
--natural-gray
scale. - [Breaking] Default prop value names have been renamed throughout (i.e.
defaultAvatarSize
=>avatarSizeDefault
)
- [Breaking]
ThemeConfig
:- [Breaking]
darkMode
boolean prop was replaced with newmode
enum prop (values:light
|dark
|invert
) - You can now nest
ThemeConfig
components:- Theme config inherits from the parent config by default. New values can be passed to override.
- This can be used to switch sections from light to dark mode (or automatically with
invert
) - It can also be used to make different sections use different accent scales, or any other config value
- [Breaking]
- New
ThemePanel
component to tweak the theme option live- Drop it into your own app anywhere under the root
ThemeConfig
- Drop it into your own app anywhere under the root
AlertDialog
,Dialog
,ContextMenu
,DropdownMenu
,HoverCard
,Popover
,Select
,Tooltip
: Expose portalcontainer
prop
Warning! This release contains lots of breaking changes.
Select
:- [Breaking] API is now more open with
Trigger
andContent
part
- [Breaking] API is now more open with
DropdownMenu
/ContextMenu
:- [Breaking] style props (
size
,variant
,color
) now passed toContent
, no need to pass again toSubContent
Item
now supportscolor
too
- [Breaking] style props (
Dialog
: Now alwaysmodal
Slider
: Fixkey
bugLink
:- [Breaking] Bring back
highContrast
instead ofvariant="high-contrast"
- [Breaking] Bring back
- General:
- [Breaking] No more
-mono
variants on any components and addedhighContrast
instead- Note: The old
-mono
look can usually b achieved now withcolor="gray"
andhighContrast
- Note: The old
- [Breaking]
subtle
variants are now namedsoft
everywhere
- [Breaking] No more
- Fix build issue with new
ThemeConfig
file
Warning! This release contains lots of breaking changes.
Container
: Addwidth: 100%
to ensure it fills its parentAvatar
:fallback
is now a required prop (removed default person icon)- General:
- [Breaking] Update to latest Radix Colors (new color variable naming convention)
- [Breaking] Update Radix Themes colors to follow same convention
- [Breaking] "color" scale is now called "accent" scale (e.g. in CSS variables, in theme configuration, etc.)
- Add new
--accent-9-contrast
step to account for text color on "solid" background (step 9) - [Breaking] Prefixed all color aliases with
--color-
(e.g.--panel
is now--color-panel
) - [Breaking] Border radius tokens:
- (e.g.
--br-3
) are now the dynamic values (i.e. based on global/local radius config) - the raw (static) values are now suffixed with
-raw
(e.g.--br-3-raw
) - max constraint should now be applied on a case by case locally (not baked into the tokens anymore)
- (e.g.
- [Breaking] Button radius is now called radius
- [Breaking] Scaling values have changed from names (like "larger") to % values (90%, 95%, 100%, 105%, 110%)
- [Breaking] Overalled gray scale configuration: No more
--mono-*
scale, instead always use--gray-*
scale - [Breaking] Overalled background/foreground feel options:
- "Background feel" is now "Background color" and options are "auto" or "gray"
- "Foreground feel" is now "Text color" and options are "auto" or "accent"
- Add new
ThemeConfig
component to allow typesafe theme configuration
Link
: Removegap
prop. Can now be achived usingFlex asChild
composition instead.
Code
: Addoutline
andoutline-mono
variantsBox
,Flex
,Grid
: AddasChild
support
Code
: Removehighlighted
prop in favour of multiple newvariants
Avatar
:- Add missing
defaultAvatarRadius
export - Fix loading state not showing fallback background
- Add missing
- Fix color resolving in nested light/dark sections (messed up after
0.0.4
changes)
- Update CSS tokens to ensure we have a default look and feel even without providing
data-*
theme configuration
Kbd
,Slider
,Switch
: Fix dark mode overrides to ensure correct resolving in nested light/dark sections- Reorganise code/exports to suit Next.js 13's RSC support. Notable change for using compound components inside an RSC, you now need to import each part separately (e.g.
DropdownRoot
andDropdownTrigger
, instead ofDropdown.Root
andDropdown.Trigger
)
- All: expose discrete values / default values for props to be consumed in docs
Code
: Remove defaultsize
- Isolate resets