Stack

Column

Column ( direction="column" ), spacing via gap.

tsx

import { Stack } from "~/components/ui/base/stack";

<Stack direction="column" gap={4} align="stretch">
  <div class="h-8 rounded bg-fill-secondary" />
  <div class="h-8 rounded bg-fill-tertiary" />
</Stack>

Row

A row aligned to the center and distributed with justify="between".

LeftRight

tsx

import { Stack } from "~/components/ui/base/stack";

<Stack direction="row" gap={2} align="center" justify="between" class="w-full max-w-md">
  <span class="text-callout">Left</span>
  <span class="text-callout">Right</span>
</Stack>

Metadata

Source: meta.generated.json (see npm run generate)

File base/stack/meta.generated.json not found or path not allowed.