Inline

Horizontal flex container with token-driven gap, alignment, optional wrap, and `as` polymorphism.

npx visor add inline

Why Inline?

Inline is the horizontal counterpart to Stack — the same token-typed gap prop, plus an optional wrap for items that should flow onto multiple lines. Default align="center" matches the most common case of icon-plus-text rows.

Default Layout

One

Two

Three

Wrap

<Inline gap="xs" wrap>
  {tags.map(t => <Badge key={t}>{t}</Badge>)}
</Inline>

Responsive Gap

<Inline gap={{ base: "sm", lg: "xl" }}>
  Tighter on mobile, breathier on desktop.
</Inline>

Polymorphic `as`

<Inline as="nav" gap="sm">
  <a href="/one">One</a>
  <a href="/two">Two</a>
</Inline>

Installation

npx visor add inline

API Reference

InlineProps

Prop	Type	Default	Description
`as`	`keyof React.JSX.IntrinsicElements`	`'div'`	HTML element to render.
`gap`	`InlineSpacing \| ResponsiveProp<InlineSpacing>`	`'md'`	Space between children. Token-named. Accepts a responsive { base, sm, md, lg, xl } map.
`align`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	`'center'`	Cross-axis alignment (vertical in a row flex).
`justify`	`'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'`	—	Main-axis alignment (horizontal in a row flex).
`wrap`	`boolean`	`false`	Allow children to wrap onto multiple lines.

The component also accepts all standard HTML attributes for the rendered element.

Inline

On this page