eoria
Component

Stack

Box with direction and alignment shorthands. Exports Stack, HStack and VStack.

Stack rendered on iOS, light mode
Stack rendered on iOS, dark mode
iPhone, zinc preset. Captured from the example app.
Terminal window
npx @eoria/cli add stack

Usage

import { HStack, VStack } from '@/components/ui/stack'


<VStack gap={3}>
  <HStack gap={2} justify="space-between">
    <Text>Total</Text>
    <Text weight="semibold">$70.00</Text>
  </HStack>
</VStack>

Props

Everything from Box except row and center, plus:

Prop Values
direction row, column (Stack only)
align any alignItems value
justify any justifyContent value
wrap boolean
reverse boolean

HStack is a row with align="center". VStack is a column. Only the keys you set are emitted, so an unset align never overrides a Box token.

Source

registry/ui/stack.tsx