Flex

Arrange children with token-based flex alignment and gaps.

@sigil-ui/componentsReact

Preview

import { Flex, Badge } from "@sigil-ui/components";

<Flex gap="var(--s-space-12)" wrap><Badge>Design</Badge><Badge>Build</Badge><Badge>Ship</Badge></Flex>

Prop	Type	Default	Description
`direction`	`"row" \| "column" \| "row-reverse" \| "column-reverse"`	—	Direction configuration.
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	—	Align configuration.
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	—	Justify configuration.
`wrap`	`boolean \| "wrap" \| "nowrap" \| "wrap-reverse"`	—	Wrap configuration.
`gap`	`number \| string`	—	Gap configuration.
`inline`	`boolean`	—	Inline configuration.

Divider

Separate regions with a token-aligned structural band.

Frame

Enclose content within a structural page frame.