Layout

HStack

Horizontal flex row with token-driven gap. Default align=center because horizontal layouts almost always want vertical centering.

Examples

Left Middle Right

<HStack justify="between">
  <Badge>Left</Badge>
  <Badge variant="accent">Middle</Badge>
  <Badge>Right</Badge>
</HStack>

tag-one tag-two tag-three tag-four tag-five tag-six tag-seven

<HStack gap={2} wrap>
  <Badge>tag-one</Badge>
  <Badge>tag-two</Badge>
  …
</HStack>

Prop	Type	Default	Description
`gap`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8`	`2`	Maps to 0 or spacing tokens.
`align`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	`'center'`	Horizontal layouts default to center alignment.
`justify`	`'start' \| 'center' \| 'end' \| 'between'`	`'start'`	justify-content value.
`wrap`	`boolean`	`false`	Allow items to break onto multiple lines.

CLI

npx @a3tai/mittsu add hstack