Layout

Cluster

Arrange direct children on the logical inline axis with wrapping.

SourceView as Markdown Edit on GitHub

Cluster lays out direct children on the logical inline axis. Read Layout to choose a layout component.

Cluster: Basic

Open in playground

First item

Second item

Third item

Fourth item

Fifth item

import { Cluster } from '@luke-ui/react/cluster';
import { ExampleItem } from '#docs';

export default () => {
	return (
		<Cluster gap="space.8">
			<ExampleItem>First item</ExampleItem>
			<ExampleItem>Second item</ExampleItem>
			<ExampleItem>Third item</ExampleItem>
			<ExampleItem>Fourth item</ExampleItem>
			<ExampleItem>Fifth item</ExampleItem>
		</Cluster>
	);
};

Cluster: Basic

Loading Cluster: Basic example

Alignment

justifyContent defaults to flex-start. alignItems defaults to center.

Cluster: Alignment

Open in playground

Short item

A taller item
with two lines

import { Cluster } from '@luke-ui/react/cluster';
import { ExampleItem } from '#docs';

export default () => {
	return (
		<Cluster alignItems="flex-end" gap="space.8" justifyContent="space-between">
			<ExampleItem>Short item</ExampleItem>
			<ExampleItem>
				A taller item
				<br />
				with two lines
			</ExampleItem>
		</Cluster>
	);
};

Cluster: Alignment

Loading Cluster: Alignment example

Wrapping

flexWrap defaults to wrap. Set nowrap when children should stay on one line, or wrap-reverse to reverse wrap direction. Responsive objects use the same breakpoint keys as other layout props.

Cluster: No wrap

Open in playground

First item

Second item

Third item

import { Cluster } from '@luke-ui/react/cluster';
import { ExampleItem } from '#docs';

export default () => {
	return (
		<Cluster flexWrap="nowrap" gap="space.8" style={{ maxInlineSize: '16rem' }}>
			<ExampleItem>First item</ExampleItem>
			<ExampleItem>Second item</ExampleItem>
			<ExampleItem>Third item</ExampleItem>
		</Cluster>
	);
};

Cluster: No wrap

Loading Cluster: No wrap example

Choose the rendered element

Cluster uses Box's elementType and renderRoot contract.

Cluster: List

Open in playground

First list item
Second list item
Third list item

import { Cluster } from '@luke-ui/react/cluster';
import { ExampleItem } from '#docs';

const plainListStyle = { listStyle: 'none' } as const;

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

Cluster: List

Loading Cluster: List example

API

ClusterProps 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	`center`
Alignment of children on the block 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	—
flexWrap	<"nowrap" \|⁠ "wrap-reverse" \|⁠ "wrap"> \|⁠ undefined	`wrap`
Whether children wrap on the inline axis.
gap	<>	—
Space between children on both axes.
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	—
justifyContent	<"center" \|⁠ "end" \|⁠ "flex-end" \|⁠ "flex-start" \|⁠ "normal" \|⁠ "space-around" \|⁠ "space-between" \|⁠ "space-evenly" \|⁠ "start" \|⁠ "stretch"> \|⁠ undefined	`flex-start`
Distribution of children on the inline axis.
justifySelf	<"auto" \|⁠ "center" \|⁠ "end" \|⁠ "normal" \|⁠ "start" \|⁠ "stretch"> \|⁠ 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	—