Flex

Layout

A horizontal flex row with layout helpers.

Flex composes the most common flexbox utilities into a small set of props so layouts read clearly.

npx shadcn@latest add flex

Default

Preview

Live

tsx

1<Flex gap={4}>
2  <Placeholder>A</Placeholder>
3  <Placeholder>B</Placeholder>
4</Flex>

Justify & wrap

Space items out or let them wrap onto new lines.

Preview

Live

Left

Middle

Right

tsx

1<Flex justify="between">
2  <Placeholder>Left</Placeholder>
3  <Placeholder>Right</Placeholder>
4</Flex>
5<Flex gap={2} wrap="wrap">
6  <Placeholder>1</Placeholder>
7  <Placeholder>2</Placeholder>
8</Flex>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
gap	"2" \| "4" \| "6" \| "8"= "4"	Spacing between items.
align	"start" \| "center" \| "end" \| "stretch" \| "baseline"	Cross-axis alignment.
justify	"start" \| "center" \| "end" \| "between" \| "around"	Main-axis justification.
wrap	"wrap" \| "nowrap"	Whether items wrap onto new lines.