Source: https://www.radix-ui.com/themes/docs/overview/layout

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Playground Blog

Overview

Getting started Styling Layout Releases Resources

Theme

Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors

Layout

Box Flex Grid Container Section

Typography

Text Heading Blockquote Code Em Kbd Link Quote Strong

Components

Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip

Utilities

Accessible Icon Portal Reset Slot Theme Visually Hidden

Overview

Layout

Get the layout concerns right.

Layout components

---

Layout components are used to separate layout responsibilities from content and interactivity. This is the separation of concerns that makes your app maintainable and easy to reason about, and understanding these principles is key to building your interfaces effectively.

Box

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.
• Hide content based on screen size using its responsive display prop.

Flex

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

Grid

Grid is used to organize the content in columns and rows. Like Box and Flex, it’s made to provide convenient access to the underlying CSS grid properties without any magic of its own.

Section

Section provides a consistent vertical spacing between the larger parts of your page content, creating a sense of hierarchy and separation. There’s just a few pre-defined sizes for different spacing levels to keep things simple and consistent.

Container

Container ’s sole responsibility is to provide a consistent max-width to the content it wraps. Like Section, it comes just with a couple of pre-defined sizes that work well with common breakpoints and typical content widths for comfortable reading.

Common layout props

---

Each layout component has a set of it’s own specialized props and also a shared set of common layout props. All layout props support responsive object values .

Padding

Padding props can access the space scale steps or accept any valid CSS padding value .

<Box p="4" />
<Box p="100px">
<Box p={{ sm: '6', lg: '9' }}>

| Prop | Type | Default | | --- | --- | --- | | p | Responsive<enum \| string><br><br>See full type | No default value | | px | Responsive<enum \| string><br><br>See full type | No default value | | py | Responsive<enum \| string><br><br>See full type | No default value | | pt | Responsive<enum \| string><br><br>See full type | No default value | | pr | Responsive<enum \| string><br><br>See full type | No default value | | pb | Responsive<enum \| string><br><br>See full type | No default value | | pl | Responsive<enum \| string><br><br>See full type | No default value |

Width

Width props accept any valid CSS width value .

<Box width="100px" />
<Box width={{ md: '100vw', xl: '1400px' }} />

| Prop | Type | Default | | --- | --- | --- | | width | Responsive<string> | No default value | | minWidth | Responsive<string> | No default value | | maxWidth | Responsive<string> | No default value |

Height

Height props accept any valid CSS height value .

<Box height="100px" />
<Box height={{ md: '100vh', xl: '600px' }} />

| Prop | Type | Default | | --- | --- | --- | | height | Responsive<string> | No default value | | minHeight | Responsive<string> | No default value | | maxHeight | Responsive<string> | No default value |

Positioning

Positioning props can change how the element is placed relative to the normal flow of the document. As usual, the corresponding CSS values are accepted for each property, and the space scale steps can be used for the offset values.

<Box position="relative" />
<Box position={{ initial: "relative", lg: "sticky" }} />

<Box inset="4" />
<Box inset={{ initial: "0", xl: "auto" }} />

<Box left="4" />
<Box left={{ initial: "0", xl: "auto" }} />

| Prop | Type | Default | | --- | --- | --- | | position | Responsive<enum><br><br>See full type | No default value | | inset | Responsive<enum \| string><br><br>See full type | No default value | | top | Responsive<enum \| string><br><br>See full type | No default value | | right | Responsive<enum \| string><br><br>See full type | No default value | | bottom | Responsive<enum \| string><br><br>See full type | No default value | | left | Responsive<enum \| string><br><br>See full type | No default value |

Flex children

Each layout component has props used to control the style when it is a child of a flex container.

<Box flexBasis="100%" />
<Box flexShrink="0">
<Box flexGrow={{ initial: "0", lg: "1" }} />

| Prop | Type | Default | | --- | --- | --- | | flexBasis | Responsive<string> | No default value | | flexShrink | Responsive<enum \| string><br><br>See full type | No default value | | flexGrow | Responsive<enum \| string><br><br>See full type | No default value |

Grid children

Each layout component has props used to control the style when it is a child of a grid container.

<Box gridArea="header" />

<Box gridColumn="1 / 3" />
<Box gridColumnStart="2">
<Box gridColumnEnd={{ initial: "-1", md: "3", lg: "auto" }} />

<Box gridRow="1 / 3" />
<Box gridRowStart="2">
<Box gridRowEnd={{ initial: "-1", md: "3", lg: "auto" }} />

| Prop | Type | Default | | --- | --- | --- | | gridArea | Responsive<string> | No default value | | gridColumn | Responsive<string> | No default value | | gridColumnStart | Responsive<string> | No default value | | gridColumnEnd | Responsive<string> | No default value | | gridRow | Responsive<string> | No default value | | gridRowStart | Responsive<string> | No default value | | gridRowEnd | Responsive<string> | No default value |

Margin props

---

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

<Button m="4" />
<Button m="100px">
<Button m={{ sm: '6', lg: '9' }}>

| Prop | Type | Default | | --- | --- | --- | | m | Responsive<enum \| string><br><br>See full type | No default value | | mx | Responsive<enum \| string><br><br>See full type | No default value | | my | Responsive<enum \| string><br><br>See full type | No default value | | mt | Responsive<enum \| string><br><br>See full type | No default value | | mr | Responsive<enum \| string><br><br>See full type | No default value | | mb | Responsive<enum \| string><br><br>See full type | No default value | | ml | Responsive<enum \| string><br><br>See full type | No default value |

The margin props may be unavailable on components that don’t render a HTML node or rely on their Root part for layout.

Standalone usage

---

If needed, it’s possible to use just the layout component from Radix Themes. Just make sure that JavaScript tree-shaking works on your side, and import the CSS that powers the layout styles:

import "@radix-ui/themes/layout.css";

You’ll still have to wrap your app with Theme to provide the space scale and scaling factor settings.

PreviousStyling

NextReleases

Edit this page on GitHub.