Stack

Flex row / column with token gap

Spacing children in a row or column with token gaps, so layouts don't need one-off margins. For a page grid use CSS grid; Stack is for small groups.

Basic

space-between

<script setup lang="ts">
import { BlessButton, BlessStack } from "blessing-ui";
</script>

<template>
  <BlessStack :gap="4">
    <BlessStack direction="row" :gap="2">
      <BlessButton size="sm">row</BlessButton>
      <BlessButton size="sm" variant="outline">gap 2</BlessButton>
    </BlessStack>
    <BlessStack direction="row" justify="between" align="center">
      <span>space-between</span>
      <BlessButton size="sm">→</BlessButton>
    </BlessStack>
    <BlessStack direction="row" :gap="1" wrap>
      <BlessButton v-for="n in 8" :key="n" size="sm" variant="ghost">{{ n }}</BlessButton>
    </BlessStack>
  </BlessStack>
</template>

• direction (column by default), gap (a space token: 1–16), align, justify, wrap.
• as sets the element — use ul with li children when it's really a list.

Usage

import { BlessStack } from "blessing-ui";

API

Props

Name	Type	Default	Description
as	string	"div"
direction	"column" | "row"	"column"
gap	1 | 2 | 3 | 4 | 6 | 8 | 12 | 16	3	space token key
align	"start" | "end" | "center" | "stretch" | "baseline"	"stretch"
justify	"start" | "end" | "center" | "between" | "around"	"start"
wrap	boolean	—

Slots

Name	Scope	Description
default	—