Stack

Layout primitives for arranging children in a vertical or horizontal stack with consistent spacing.

Import

tsx

import { VStack, HStack } from '@tac-ui/web';

Playground

Interactively configure the VStack and HStack props below.

Direction

Gap

Align

tsx

<VStack gap="md" align="center">
  <div className="w-12 h-12 ..." />
  <div className="w-12 h-12 ..." />
  <div className="w-12 h-12 ..." />
</VStack>

VStack — Gap Variants

VStack arranges children in a column. The gap prop maps to the design-token spacing scale (none, xs, sm, md, lg, xl, 2xl).

tsx

<VStack gap="sm">
  <div className="w-12 h-12 rounded-[var(--radius-m)] bg-[var(--primary)]" />
  <div className="w-12 h-12 rounded-[var(--radius-m)] bg-[var(--primary)]" />
  <div className="w-12 h-12 rounded-[var(--radius-m)] bg-[var(--primary)]" />
</VStack>

<VStack gap="md">...</VStack>

<VStack gap="xl">...</VStack>

HStack — Align and Justify

HStack arranges children in a row. Use align to control cross-axis positioning and justify to distribute items along the main axis.

tsx

<HStack gap="md" align="center" justify="start">
  <div className="w-10 h-10 ..." />
  <div className="w-10 h-16 ..." />
  <div className="w-10 h-8 ..." />
</HStack>

<HStack gap="md" align="center" justify="between">
  <div className="w-10 h-10 ..." />
  <div className="w-10 h-10 ..." />
  <div className="w-10 h-10 ..." />
</HStack>

HStack — Wrap

Set wrap to allow children to flow onto multiple lines when the container is too narrow to fit them in a single row.

tsx

<HStack gap="sm" wrap>
  {Array.from({ length: 10 }).map((_, i) => (
    <div key={i} className="w-12 h-12 rounded-[var(--radius-m)] bg-[var(--primary)]" />
  ))}
</HStack>

API Reference

Prop	Type	Default	Description
gap	"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	"md"	Spacing between child elements using the design-token scale.
align	"start" \| "center" \| "end" \| "stretch" \| "baseline"	VStack: "stretch" / HStack: "center"	Cross-axis alignment of children (align-items).
justify	"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"	"start"	Main-axis distribution of children (justify-content).
wrap	boolean	false	Whether children wrap onto multiple lines.
children	React.ReactNode	-	Elements to stack.