Components / Layout

VStack

VStack is <Stack direction="column"> named at the call site. Stack is column by default — VStack is mostly for readability.

Loading playground…

What it is

A sugar wrapper. VStack renders <Stack direction="column" /> and accepts every other Stack prop unchanged. Functionally identical to <Stack> with no direction prop — the name exists so intent is obvious when a file mixes vertical and horizontal stacks.

Install

VStack is exported from usemotif. No separate install.

example.tsx

import { VStack } from 'usemotif';

API

VStack

stable

function VStack(props: Omit<StackProps, "direction">): JSX.Element

…StackPropsOmit<StackProps, "direction">

Every Stack prop except `direction`. `gap`, `alignItems`, `justifyContent`, and all Box style props apply normally.

Examples

Form field stack:

example.tsx

<VStack gap="$3">
<Field>
  <Label>Email</Label>
  <Input type="email" />
</Field>
<Field>
  <Label>Password</Label>
  <Input type="password" />
</Field>
<Button intent="primary">Sign in</Button>
</VStack>

Mixed-direction layout — VStack and HStack side by side:

example.tsx

<VStack gap="$4">
<Heading>Settings</Heading>
<HStack gap="$2">
  <Button intent="neutral">Cancel</Button>
  <Button intent="primary">Save</Button>
</HStack>
</VStack>