Flex component purpose
Flex component does everything that Box can do, but comes with an additional set of props to organize items along an axis. It provides convenient access to the CSS flexbox properties.
Radix Primitives · all subjects
layout
28 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Box component purpose
Box is the most fundamental layout component. Box is used to provide spacing to child elements, impose sizing constraints on content, control layout behaviour within flex and grid containers, and hide content based on screen size using its responsive display prop.
Grid component purpose
Grid is used to organize the content in columns and rows. Like Box and Flex, it is made to provide convenient access to the underlying CSS grid properties without any magic of its own.
Section component purpose
Section provides a consistent vertical spacing between the larger parts of your page content, creating a sense of hierarchy and separation. It comes with a few pre-defined sizes for different spacing levels to keep things simple and consistent.
Container component purpose
Container's sole responsibility is to provide a consistent max-width to the content it wraps. It comes with a couple of pre-defined sizes that work well with common breakpoints and typical content widths for comfortable reading.
Layout props support responsive values
All layout props support responsive object values, allowing different values at different breakpoints.
Padding props accept space scale or CSS values
Padding props can access the space scale steps or accept any valid CSS padding value. Examples: p="4" uses space scale, p="100px" uses a CSS value, p={{ sm: '6', lg: '9' }} uses responsive values.
Width props accept CSS values
Width props accept any valid CSS width value. Examples: width="100px" for absolute values, width={{ md: '100vw', xl: '1400px' }} for responsive values.
Height props accept CSS values
Height props accept any valid CSS height value. Examples: height="100px" for absolute values, height={{ md: '100vh', xl: '600px' }} for responsive values.
Positioning props support space scale for offsets
Positioning props can change how the element is placed relative to the normal flow of the document. The corresponding CSS values are accepted for each property, and the space scale steps can be used for the offset values. Example offset usage: inset="4", left="4", left={{ initial: "0", xl: "auto" }}.
Margin props available on most components
Margin props are available on most components in order to provide spacing around the elements. They are not exclusive to layout components. Margin props can access the space scale steps or accept any valid CSS margin value. Examples: m="4" uses space scale, m="100px" uses a CSS value, m={{ sm: '6', lg: '9' }} uses responsive values.
Margin props may be unavailable on some components
The margin props may be unavailable on components that don't render a HTML node or rely on their Root part for layout.
Standalone layout CSS import
It is possible to use just the layout component from Radix Themes by importing the CSS that powers the layout styles: @radix-ui/themes/layout.css. You must still wrap your app with Theme to provide the space scale and scaling factor settings.
Radix Themes 3.0.0 breaking change: shrink and grow props renamed
Radix Themes 3.0.0 renamed layout component props: shrink → flexShrink, grow → flexGrow.
Radix Themes 3.0.0 breaking change: width and height props no longer map to space scale
Radix Themes 3.0.0 changed width and height props on layout components to no longer map to space scale. Values must be replaced: width="1" → width="4px", width="2" → width="8px", width="3" → width="12px", width="4" → width="16px", width="5" → width="24px", width="6" → width="32px", width="7" → width="40px", width="8" → width="48px", width="9" → width="64px". The same conversion applies to height. Alternatively, you can use CSS variables like var(--space-1) through var(--space-9).
Radix Themes 3.0.0 breaking change: Section size values
Radix Themes 3.0.0 added a new size="3" to Section and changed the previous size="3" to size="4". Update all Sections that used size="3" to size="4".
Radix Themes 3.0.0 layout props additions
Radix Themes 3.0.0 added the following props to all layout components: minWidth, maxWidth, minHeight, maxHeight, flexBasis, flexShrink, flexGrow, gridColumn, gridColumnStart, gridColumnEnd, gridRow, gridRowStart, gridRowEnd, overflow, overflowX, overflowY.
Radix Themes 3.0.0 layout props support arbitrary CSS values
Radix Themes 3.0.0 reworked all layout props to allow arbitrary CSS values, including when used with responsive object syntax. Props supporting arbitrary values: 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.
Radix Themes 3.0.0 Box, Flex, Grid support as prop
Radix Themes 3.0.0 added support for `as` prop to Box, Flex, and Grid components to render as `span` or `div`. For Box, `display: block` style is now enforced regardless of the tag.
Radix Themes 2.0.0 breaking change: Section display default
Radix Themes 2.0.0 changed Section's display="block" value to display="initial" because the former value was broken.
Responsive object shape for props across breakpoints
Most component size and layout props accept a Responsive object shape for modifying the prop across breakpoints. Each size maps to a corresponding key, and the value of each will be applied when the screen size is greater than or equal to the named breakpoint.
Responsive prop syntax example
A Heading component with size responsive prop applied across breakpoints: Heading with size initial: "3", md: "5", xl: "7" applies size 3 at the initial breakpoint, size 5 at the md breakpoint, and size 7 at the xl breakpoint.
Breakpoints are min-width based
Breakpoints use min-width media queries. Each breakpoint matches a fixed screen width, and values apply when the screen width is equal to or greater than the breakpoint value.
Space scale numeric values 1-9
Spacing values are derived from a 9-step scale. Props such as margin and padding accept numeric strings from "1" to "9", which correspond to steps in the spacing scale.
Scaling factor CSS variable
The scaling factor token can be accessed using the --scaling CSS variable. This can be used in custom styles with calc() to scale values consistently with the theme, for example: width: calc(200px * var(--scaling)).
Theme scaling example with 100% value
The Theme component accepts a scaling prop with percentage values, for example: <Theme scaling="100%">. This controls the UI density scaling factor for all child components.
Space scale CSS variables
Space scale tokens can be accessed using CSS variables: var(--space-1), var(--space-2), var(--space-3), var(--space-4), var(--space-5), var(--space-6), var(--space-7), var(--space-8), var(--space-9). These tokens can be used to style custom components while maintaining consistency with the theme.
Scaling property scales layout properties uniformly
Values which affect layout (spacing, font size, line height) scale relatively to each other based on the scaling value defined in the Theme. This setting allows you to scale the UI density uniformly across the entire application.