Layout

Stack

Arrange direct children on the logical block axis.

SourceView as Markdown Edit on GitHub

Stack places direct children on the logical block axis. Read Layout to choose a layout component.

Stack: Basic

Open in playground

First block item

Second block item

Third block item

import { Stack } from '@luke-ui/react/stack';
import { ExampleItem } from '#docs';

export default () => {
	return (
		<Stack gap="space.12">
			<ExampleItem>First block item</ExampleItem>
			<ExampleItem>Second block item</ExampleItem>
			<ExampleItem>Third block item</ExampleItem>
		</Stack>
	);
};

Stack: Basic

Loading Stack: Basic example

Alignment

alignItems defaults to stretch.

Stack: Alignment

Open in playground

Short item

A wider item

The widest item

import { Stack } from '@luke-ui/react/stack';
import { ExampleItem } from '#docs';

export default () => {
	return (
		<Stack alignItems="center" gap="space.12">
			<ExampleItem>Short item</ExampleItem>
			<ExampleItem>A wider item</ExampleItem>
			<ExampleItem>The widest item</ExampleItem>
		</Stack>
	);
};

Stack: Alignment

Loading Stack: Alignment example

Choose the rendered element

Stack uses Box's elementType and renderRoot contract.

Stack also accepts listStyle="none" to remove list markers. Read Box for the semantics.

Stack: List

Open in playground

First list item
Second list item
Third list item

import { Stack } from '@luke-ui/react/stack';
import { ExampleItem } from '#docs';

export default () => {
	return (
		<Stack elementType="ul" gap="space.8" listStyle="none" margin="0" padding="0">
			<ExampleItem elementType="li">First list item</ExampleItem>
			<ExampleItem elementType="li">Second list item</ExampleItem>
			<ExampleItem elementType="li">Third list item</ExampleItem>
		</Stack>
	);
};

Stack: List

Loading Stack: List example

API

StackProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type	Default
alignItems	<"baseline" \|⁠ "center" \|⁠ "end" \|⁠ "flex-end" \|⁠ "flex-start" \|⁠ "normal" \|⁠ "start" \|⁠ "stretch"> \|⁠ undefined	`stretch`
Alignment of children on the inline axis.
alignSelf	<"auto" \|⁠ "baseline" \|⁠ "center" \|⁠ "flex-end" \|⁠ "flex-start" \|⁠ "normal" \|⁠ "stretch"> \|⁠ undefined	—
blockSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
borderBlockEndWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
borderBlockStartWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
borderInlineEndWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
borderInlineStartWidth	<"none" \|⁠ "thick" \|⁠ "thin"> \|⁠ undefined	—
flexBasis	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "content" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
flexGrow	<"0" \|⁠ "1"> \|⁠ undefined	—
flexShrink	<"0" \|⁠ "1"> \|⁠ undefined	—
gap	<>	—
Space between children on the block axis.
inlineSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
inset	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetBlock	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetBlockEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetBlockStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetInline	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetInlineEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
insetInlineStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
justifySelf	<"auto" \|⁠ "center" \|⁠ "end" \|⁠ "normal" \|⁠ "start" \|⁠ "stretch"> \|⁠ undefined	—
listStyle	"none" \|⁠ undefined	—
margin	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginBlock	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginBlockEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginBlockStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginInline	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginInlineEnd	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
marginInlineStart	<"0" \|⁠ "auto" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
maxBlockSize	<"0" \|⁠ "100%" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content" \|⁠ "none"> \|⁠ undefined	—
maxInlineSize	<"0" \|⁠ "100%" \|⁠ "container.448" \|⁠ "container.672" \|⁠ "container.896" \|⁠ "container.1152" \|⁠ "container.1280" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content" \|⁠ "none"> \|⁠ undefined	—
minBlockSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
minInlineSize	<"0" \|⁠ "100%" \|⁠ "auto" \|⁠ "fit-content" \|⁠ "max-content" \|⁠ "min-content"> \|⁠ undefined	—
order	<number> \|⁠ undefined	—
overflow	<"auto" \|⁠ "clip" \|⁠ "hidden" \|⁠ "scroll" \|⁠ "visible"> \|⁠ undefined	—
overflowX	<"auto" \|⁠ "clip" \|⁠ "hidden" \|⁠ "scroll" \|⁠ "visible"> \|⁠ undefined	—
overflowY	<"auto" \|⁠ "clip" \|⁠ "hidden" \|⁠ "scroll" \|⁠ "visible"> \|⁠ undefined	—
overscrollBehavior	<"auto" \|⁠ "contain"> \|⁠ undefined	—
padding	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingBlock	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingBlockEnd	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingBlockStart	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingInline	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingInlineEnd	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
paddingInlineStart	<"0" \|⁠ "space.4" \|⁠ "space.8" \|⁠ "space.12" \|⁠ "space.16" \|⁠ "space.24" \|⁠ "space.32" \|⁠ "space.40" \|⁠ "space.48" \|⁠ "space.64" \|⁠ "space.96"> \|⁠ undefined	—
placeSelf	<"auto" \|⁠ "center" \|⁠ "end" \|⁠ "normal" \|⁠ "start" \|⁠ "stretch"> \|⁠ undefined	—
position	<"absolute" \|⁠ "fixed" \|⁠ "relative" \|⁠ "static" \|⁠ "sticky"> \|⁠ undefined	—