Flex

Flexbox container primitive supporting token gap scale, direction, alignment, justification, and polymorphic tag rendering.

// Plain markup
import { Flex } from "@shavin/ui";

Row Flex Layout with Gap

Account Settings

<Flex direction="row" align="center" justify="between" gap="4">
  <span>Left Label</span>
  <Flex gap="2">
    <Button size="sm" variant="outline">Cancel</Button>
    <Button size="sm">Save</Button>
  </Flex>
</Flex>

Props

Prop	Type	Default
as	ElementType	—
translucent	boolean	—
direction	"row" \| "column" \| "col" \| "row-reverse" \| "column-reverse" \| "col-reverse"	"row"
align	"start" \| "center" \| "end" \| "stretch" \| "baseline"	"stretch"
justify	"start" \| "center" \| "end" \| "between" \| "around"	"start"
wrap	"nowrap" \| "wrap"	"nowrap"