new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Radix Primitives · all subjects

radix themes/layout

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Responsive object syntax in Radix Themes

Responsive object syntax allows building responsive layouts at different breakpoints without leaving React code. Example: `<Flex width={{ initial: "100%", sm: "300px", md: "500px" }} />` compiles to a div with CSS custom properties and utility classes with no runtime evaluation of breakpoints, enabling server rendering and vanilla CSS performance.

Radix Themes layout components list

Radix Themes has five layout components: Box, Flex, Grid, Section, and Container. These components separate layout responsibilities from content and interactivity, making compositions more maintainable and easier to reason about.

Radix Themes layout components new props in 3.0

In Radix Themes 3.0, layout components received 9 new props for working with flex and grid layouts, and 4 new props for controlling dimensions. All layout props now accept valid CSS values in addition to space scale values, including when used with responsive object syntax.

Radix Themes layout components props count

In total, the 5 layout components in Radix Themes have almost 40 props each, forming a system designed to be easy to learn, quick to master, and provide a high ceiling for what can be achieved without switching between files.

Using only layout components from Radix Themes

To use only the layout components from Radix Themes, import the layout essentials CSS with `import "@radix-ui/themes/layout.css";` and ensure JavaScript tree-shaking is enabled.

Blockquote supports common margin props

The Blockquote component supports common margin props as documented in the layout overview.

Box supports common margin props

Box supports common margin props as documented in the Layout overview section of the Radix Themes documentation.

Give your agent this brain