Layout

Stack and Inline

Columns and rows with token gaps. Use them instead of margins between siblings.

import { Stack, Inline } from "@flinbu/seed";

Gaps, dividers and a row with actions at both ends

Token name

Value

Description

Light

Dark

3 changes ready

import { Button, Grid, Inline, Stack } from "@flinbu/seed";

<Grid columns={2} gap="lg" className="w-full max-w-xl">
  <Stack gap="xs"><div className={box}>Token name</div><div className={box}>Value</div><div className={box}>Description</div></Stack>
  <Stack gap="sm" divider><div className={box}>Light</div><div className={box}>Dark</div></Stack>
  <Inline justify="between" className="col-span-full rounded-lg border border-secondary p-sm">
    <span className="text-primary label-label-2-medium">3 changes ready</span>
    <Inline><Button variant="tertiary" size="sm">Discard</Button><Button size="sm">Publish</Button></Inline>
  </Inline>
</Grid>

Use it for

Stack for forms, sections and lists; Inline for badges, button rows and a title with its actions.

Props

Prop	Type	Default	Description
`gap`	`'none''xxxs' … '4xl'`	–	Stack default base, Inline default xs.
`align / justify`	`'start''center''end''between' …`	–	Flex alignment. Inline centers by default.
`Stack: divider`	`boolean`	–	A line between children.
`Inline: wrap`	`boolean`	`true`	Wrap onto new lines.
`as / asChild`	`ElementType / boolean`	–	Render another element.

Accessibility

Pure layout: no roles. Pass as to render a list (as="ul").