Layout
Inline
Horizontal flex-row layout primitive with a token gap, alignment, and wrapping.
Install
npx shadcn@latest add @alix/inlinePreview
1
2
3
Usage
<Inline gap="md" justify="between">
<div>1</div>
<div>2</div>
<div>3</div>
</Inline>Examples
01
Justify distributes the row
When the row is wider than its content, justify decides where the slack goes — packed to the start, split between, or pushed to the end.
justify="start"
1
2
3
justify="between"
1
2
3
justify="end"
1
2
3
{(["start", "between", "end"] as const).map((justify) => (
<Inline key={justify} gap="sm" justify={justify}>
<div>1</div>
<div>2</div>
<div>3</div>
</Inline>
))}02
Baseline lines up label and value
align="baseline" sits differently sized text on one baseline, so a big metric and its small caption read as a pair — where center would float them apart.
$248.6Mnet revenue, FY25
<Inline gap="xs" align="baseline">
<span className="text-4xl font-medium">$248.6M</span>
<span className="text-sm text-muted-foreground">net revenue, FY25</span>
</Inline>03
A right-aligned action row
The dialog and form footer idiom — actions pushed to the end, the primary button last, spaced on the small gap.
<Inline gap="sm" justify="end">
<Button variant="ghost">Cancel</Button>
<Button>Save changes</Button>
</Inline>04
A wrapping tag cluster
With wrap on by default, a crowded row of chips reflows onto the next line instead of overflowing its container.
RestructuringTransactionsPerformanceInvestigationsDisputes
<Inline gap="xs">
<Badge variant="primary">Restructuring</Badge>
<Badge variant="primary">Transactions</Badge>
<Badge variant="primary">Performance</Badge>
<Badge variant="primary">Investigations</Badge>
<Badge variant="primary">Disputes</Badge>
</Inline>When to use it
Use it for
- Any horizontal run spaced on one token — button rows, tag clusters, an icon beside a label.
- Label + value pairs, with align="baseline" so mixed type sizes sit on one line.
- Toolbars and footers, using justify to push actions to the end or split them across the row.
Reach for something else
- Vertical stacks — use Stack, the column counterpart.
- Equal-width columns that must collapse responsively — use Grid.
- Hand-written flex … gap-* divs — Inline encodes the shared gap scale and the wrap default.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Space between items, from the shared gap scale. |
| align | "start" | "center" | "end" | "stretch" | "baseline" | "center" | Cross-axis (vertical) alignment; baseline lines up text baselines for label + value rows. |
| justify | "start" | "center" | "end" | "between" | "around" | "evenly" | "start" | Main-axis (horizontal) distribution; between / around / evenly only take effect when the row is wider than its content. |
| wrap | boolean | true | Whether a crowded row reflows onto multiple lines; set false to force a single line. |
| render | ReactElement | ((props, state) => ReactElement) | — | Swaps the rendered element for a semantic tag (e.g. <nav>, <ul>) while keeping the layout. |