Stack

Vertical flow with density-aware block spacing.@gemologic/sheen · layout

Playground

gap

align

justify

Name

<Stack align="stretch" gap="md" justify="start"><Input label="Name" /><Button>Save</Button></Stack>

Variant matrix

Stack composition

Name

gap: none

Name

gap: xs

Name

gap: sm

Name

gap: md

Name

gap: lg

Name

gap: xl

Name

align: start

Name

align: center

Name

align: end

Name

align: stretch

Name

justify: start

Name

justify: center

Name

justify: end

Name

justify: between

Name

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/layout/Layout.tsx

Tokens

--sheen-space-block-md
--sheen-space-inline-md

Accessibility

Role: presentation layoutKeyboard: No component-owned keys

Do

Preserve logical DOM order and use token spacing.

Do not

Do not use layout wrappers to invent inaccessible keyboard order.

Generated props

Name	Type	Default	Description
`gap`	`Spacing`	`md`	Role-based spacing that follows the active density.
`align`	`Alignment`	`stretch`	Cross-axis alignment without changing DOM or keyboard order.
`justify`	`Justification`	`start`	Main-axis distribution without reversing content order.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.