Stack

Flexbox stack layout with spacing

SaaSLayout

Overview

The Stack component provides a flexbox container with props for direction, gap, alignment, justification, and wrapping. It simplifies common vertical and horizontal layout patterns used throughout SaaS interfaces.

Usage

import { Stack } from "@leanicon/web-builder-library/saas";

<Stack direction="vertical" gap={4}>
  <div>First item</div>
  <div>Second item</div>
</Stack>;

Variants

Default

First item
Second item
Third item

Horizontal

Label
Badge
Action

Space Between

Left
Right

Dark

First item
Second item
Third item

Props

NameTypeDefaultRequiredDescription
align"center" | "start" | "end" | "baseline" | "stretch" | null—No
wrapboolean | null—No
gap0 | 1 | 3 | 5 | 4 | 2 | 6 | 8 | 12 | 10 | null—No
direction"horizontal" | "vertical" | null—No
justify"center" | "start" | "end" | "between" | "around" | "evenly" | null—No