Stack

Stack lays out children in a row or column with a spacing-token gap. Default direction is column.

One

Two

Three

Contract

Overview

Machine-readable contract from Component Spec.

component: stackexport: Stackversion: 1attributes: data-refineui=stack

Anatomy

Part	data-refineui
root	stack

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Button, Stack } from "@refineui/react";

<Stack gap="sizeMedium">
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

<Stack direction="row" gap="sizeSmall" align="center" justify="between">
  <Button type="button" variant="outline">Cancel</Button>
  <Button type="button" variant="primary">Save</Button>
</Stack>

API Reference

Prop	Default	Type	Description
as	"div"	ElementType	Root element.
direction	"column"	"row" | "column" | "row-reverse" | "column-reverse"	Flex direction.
gap	"sizeNone"	Spacing token	Gap between children.
align	—	"start" | "center" | "end" | "stretch" | "baseline"	Cross-axis alignment.
justify	—	"start" | "center" | "end" | "between" | "around" | "evenly"	Main-axis justification.
wrap	—	boolean | wrap token	Wrapping behavior.
inline	false	boolean	Use `inline-flex`.