Radix Themes releases and their changelogs.
0,1,0
for styling HTML elements and at 0,1,1
for styling pseudo-elements, improving compatibility with Tailwind.
--black-a1
, --white-a1
, etc.), make sure to check the new values and update the steps used so that your designs look as expected:
--black-a1
to rgba(0, 0, 0, 0.01)
--black-a2
to rgba(0, 0, 0, 0.024)
--black-a3
to --black-a1
--black-a4
to --black-a2
--black-a5
to --black-a2
--black-a6
to --black-a3
--black-a7
to --black-a3
or --black-a4
--black-a8
to --black-a5
--black-a9
to --black-a6
or --black-a7
--black-a10
to --black-a7
--black-a11
to --black-a8
--black-a12
to --black-a11
--white-a1
to transparent
--white-a2
to rgba(255, 255, 255, 0.01)
--white-a3
to --white-a1
or --white-a2
--white-a4
to --white-a2
--white-a5
to --white-a3
--white-a6
to --white-a3
or --white-a4
--white-a7
to --white-a4
--white-a8
to --white-a5
--white-a9
to --white-a6
--white-a10
to --white-a7
--white-a11
to --white-a9
--white-a12
to --white-a11
or --white-a12
color="gray"
component, similarly to the text selection color.Theme
component also sets the corresponding browser colors, like the correct input autofill background color.@keyframes
animations with rt-
prefix and into kebab case.outline
rather than box-shadow
for most focus styles, which avoids a slight anti-aliasing issue in Chrome on focused elements.AlertDialog
, Dialog
Avatar
svg
assets as a fallback, make sure to set an appropriate size manually.--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;
.rt-reset-button
and .rt-reset-a
classes with a single .rt-reset
class
.rt-reset
class can be use to reset a
, button
, h1
, h2
, h3
, h4
, h5
, h6
, ol
, ul
, p
, and pre
tags when building custom components.Blockquote
trim
propButton
, IconButton
disabled
together with asChild
variant="classic"
look and feel across different accent colors in light and dark mode.Callout
Callout.Text
elements within Callout.Root
Callout.Root
happened to provide flex properties, change your layout to use a Flex
component explicitly.color
prop was passed.
highContrast
prop to your callouts to make the text darker.variant="surface"
variant="outline"
Checkbox
Text
component automatically aligns the checkbox with the first line of the text.
<Text as="label" size="...">
, using your preferred text size.size="1"
, change the default size to size="2"
, add a more refined size="3"
size="1"
or size="2"
checkboxes via an explicit size
prop, rename them to size="2"
and size="3"
respectively.variant="classic"
.Card
variant="classic"
shadow so that it doesn’t extend outside of the element.variant="classic"
Code
Code
is within Link
variant="ghost"
font size would be inconsistent depending on whether the size was based on a parent Text
element or came from the code’s own size
propvariant="outline"
and variant="surface"
::selection
background color for variant="solid"
.radix-themes
for customising the padding of Code
variants in case the default values don’t work well with the vertical metrics of custom code font.
--code-padding-top
--code-padding-bottom
DropdownMenu
, ContextMenu
radius="full"
Grid
Grid
components could cause the descendant Grid
’s to inherit some parent styles unintentionally.Inset
clip
prop to control whether content is clipped to the padding or to the border of the parent element.Table
is inside Inset
Kbd
Link
Heading
elements (similarly to the automatic high-contrast within Text
).variant="outline"
and variant="surface"
RadioGroup
Text
component automatically aligns the radiobutton with the first line of the text.
<Text as="label" size="...">
, using your preferred text size.size="1"
, change the default size to size="2"
, add a more refined size="3"
size="1"
or size="2"
radio buttons via an explicit size
prop, rename them to size="2"
and size="3"
respectively.variant="classic"
.Select
variant="classic"
look and feel across light and dark mode.SelectContent
to the left of the trigger when using position="popper"
size="3"
ScrollArea
.radix-themes
to facilitate easier scrollbar position adjustments
--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
Slider
Switch
Switch
component automatically aligns the switch with the first line of the text.
<Text as="label" size="...">
, using your preferred text size.size="2"
and size="3"
smaller.
size="3"
instead of size="2"
to match the previous look.Table
Tabs
.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
Text
as="label"
option to the as
propas
prop isn’t specifiedTextArea
TextArea
behaves like a true display: block
element, filling the available space horizontally.style
and className
are now forwarded to the wrapping div
element. The ref
and other props are still forwarded to the textarea
itself.TextArea
styles via style
, className
, or custom CSS that targets the related HTML nodes, make sure that your custom styles work as expected.TextArea
set by the browser, make sure that your layout looks as expected.TextArea
overflows.TextField
z-index
of the container to avoid potential stacking issues.text-indent
instead of padding-left
so that long values aren't truncated on the left when the cursor is at the end of the input.ThemePanel
Tooltip
radius="full"
multiline
prop
multiline
prop, pass style={{ maxWidth: 250 }}
to the relevant Tooltip elements.ThemeProps
and ThemePanelProps
ruby
, iris
, and jade
React.FC
type for ContextMenuSub
, DialogRoot
, HoverCardRoot
, and PopoverRoot
, resolving a type error with certain setups