Layout

The <Row> and <Col> components create responsive multi-column layouts inside your MDX content.

Basic Two-Column Layout#

Left column

Content on the left side. Columns are equal width by default.

Right column

Content on the right side.

Prose + Code Pattern#

The most common layout: prose on the left, a sticky code column on the right. Use sticky on the code column so it stays visible while the prose scrolls.

Creating a user#

Send a POST request to /api/users with the user's name and email.

The response includes the new user's id, which you'll need for subsequent requests.

Required fields

name — Display name (max 255 characters)
email — Valid email address (must be unique)

Request

POST /api/users

Content-Type: application/json

Response

201 Created

Three Columns#

Column 1

First piece of content.

Column 2

Second piece of content.

Column 3

Third piece of content.

Rows stack on narrow screens and use the requested column count from the small-screen breakpoint (640px). Columns can shrink within their grid so long content stays inside the preview.

Specimen#

<Specimen> frames a component example with Preview, Code and Props tabs. Put the MDX source in an ```mdx fence, the rendered example after it, and optional <Prop> rows inside <SpecimenProps>. Tabs only appear for the parts you include.

Beta

Props Reference#

Row Props

Prop	Type	Default	Description
`cols`	`number`	`1`	Grid column count.
`className`	`string`	—	Additional CSS classes.
`children`	`ReactNode`	—	`Col` components.

Col Props

Prop	Type	Default	Description
`sticky`	`boolean`	`false`	Enables `xl:sticky top-24` positioning. Keeps the column visible while adjacent content scrolls.
`rows`	`number`	`1`	Number of CSS grid rows this column spans.
`gap`	`number`	`4`	Spacing (Tailwind scale) between items inside the column.
`children`	`ReactNode`	—	Column content.

Was this page helpful?