Inline

Inline is a horizontal flex row with optional wrapping. Use it to lay out groups of items side-by-side with consistent spacing.

ExamplesCodeUsageChangelog

Basic

AlphaBetaGamma

Tailwind v4

<Inline>
  <Badge>Alpha</Badge>
  <Badge variant="success">Beta</Badge>
  <Badge variant="warning">Gamma</Badge>
</Inline>

Gap variants

gap="none"

gap="xs"

gap="sm"

gap="md"

gap="lg"

gap="xl"

Tailwind v4

<Inline gap="none">...</Inline>
<Inline gap="xs">...</Inline>
<Inline gap="sm">...</Inline>
<Inline gap="md">...</Inline>
<Inline gap="lg">...</Inline>
<Inline gap="xl">...</Inline>

Wrap behavior

wrap=true (default)

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

wrap=false

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Tailwind v4

<Inline :wrap="true">...</Inline>   <!-- default -->
<Inline :wrap="false">...</Inline>

Justify between

Section title

Tailwind v4

<Inline justify="between">
  <span>Section title</span>
  <Button variant="secondary" size="sm">Action</Button>
</Inline>

Props

Prop	Type	Default	Description
gap	'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'	'sm'	Space between items
align	'start' | 'center' | 'end' | 'baseline'	'center'	Cross-axis alignment (align-items)
justify	'start' | 'center' | 'end' | 'between'	'start'	Main-axis distribution (justify-content)
wrap	boolean	true	Whether items wrap onto multiple lines

class and style attributes are forwarded to the root element.