Stack
A layout component that allows you to stack children horizontally or vertically with consistent spacing.
Installation
npx shadcn@latest add @tetra-ui/stackUsage
import { Stack } from "@/components/ui/stack";<Stack gap="sm">
<Text>Hello</Text>
<Text>World</Text>
</Stack>Direction
Stack children horizontally with direction="row":
<Stack direction="row" gap="md">
<Button>Cancel</Button>
<Button>Save</Button>
</Stack>Gap
The gap prop accepts token values from none through 2xl:
<Stack gap="xs">…</Stack>
<Stack gap="sm">…</Stack>
<Stack gap="md">…</Stack>
<Stack gap="lg">…</Stack>
<Stack gap="xl">…</Stack>
<Stack gap="2xl">…</Stack>