Stack

pnpm add @corew500/ui

import { Stack } from "@corew500/ui/stack"

<Stack>
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</Stack>

{/* Vertical stack (default) */}
<Stack direction="vertical">
  <Card>Card 1</Card>
  <Card>Card 2</Card>
  <Card>Card 3</Card>
</Stack>

{/* Horizontal stack */}
<Stack direction="horizontal">
  <Button>Cancel</Button>
  <Button>Save</Button>
</Stack>

<Stack spacing={0}>
  {/* No gap */}
</Stack>

<Stack spacing={2}>
  {/* 0.5rem gap */}
</Stack>

<Stack spacing={4}>
  {/* 1rem gap (default) */}
</Stack>

<Stack spacing={8}>
  {/* 2rem gap */}
</Stack>

<Stack align="start">
  {/* Align items to start */}
</Stack>

<Stack align="center">
  {/* Center items */}
</Stack>

<Stack align="end">
  {/* Align items to end */}
</Stack>

<Stack align="stretch">
  {/* Stretch items to fill */}
</Stack>

<Stack align="baseline">
  {/* Align to text baseline */}
</Stack>

<Stack direction="horizontal" justify="between">
  <Logo />
  <Navigation />
  <UserMenu />
</Stack>

<Stack justify="center">
  {/* Center content */}
</Stack>

<Stack justify="evenly">
  {/* Distribute evenly */}
</Stack>

<Stack direction="horizontal" wrap>
  {tags.map(tag => (
    <Badge key={tag}>{tag}</Badge>
  ))}
</Stack>

<Stack fullWidth>
  <Button fullWidth>Full Width Button</Button>
  <Button fullWidth>Another Button</Button>
</Stack>

<Stack direction="horizontal" align="center" justify="between" fullWidth>
  <Logo />
  <Navigation />
  <UserMenu />
</Stack>

<Stack direction="horizontal" spacing={2} justify="end">
  <Button variant="outline">Cancel</Button>
  <Button>Submit</Button>
</Stack>

<Stack direction="horizontal" spacing={4} wrap>
  {products.map(product => (
    <Card key={product.id}>{product.name}</Card>
  ))}
</Stack>

import { Container, Stack } from "@corew500/ui"

<Container size="lg">
  <Stack spacing={8}>
    <Heading level={1}>Page Title</Heading>
    <Text>Page content...</Text>
  </Stack>
</Container>