Stack

import { VStack, Box, Text } from "astralis-ui";

export function StackDemo() {
  return (
    <VStack gap="3" alignItems="stretch" w="full" maxW="sm">
      {["Design review at 10:00", "Ship the docs site", "Water the plants"].map((task) => (
        <Box key={task} bg="panel" p="4" rounded="lg" border="normal" borderColor="subtle">
          <Text size="sm">{task}</Text>
        </Box>
      ))}
    </VStack>
  );
}

import { HStack, Box, Text, Button } from "astralis-ui";

export function StackHorizontal() {
  return (
    /* HStack centers its children vertically by default. */
    <HStack gap="4" bg="panel" p="4" rounded="xl" border="normal" borderColor="subtle">
      <Box size="12" bg="purple-solid" rounded="full" />
      <Box>
        <Text size="sm" weight="semibold">Orbit weekly</Text>
        <Text size="xs" color="muted">12 unread updates</Text>
      </Box>
      <Button size="sm" variant="subtle" colorScheme="purple">
        Open
      </Button>
    </HStack>
  );
}

import { Stack, Box, Text, VStack } from "astralis-ui";

export function StackDirection() {
  return (
    <VStack gap="5" alignItems="stretch">
      <VStack gap="1" alignItems="stretch">
        <Text as="span" size="xs" color="muted">vertical (default)</Text>
        <Stack gap="2">
          <Box bg="cyan-subtle" px="4" py="2" rounded="md"><Text size="xs">One</Text></Box>
          <Box bg="cyan-muted" px="4" py="2" rounded="md"><Text size="xs">Two</Text></Box>
        </Stack>
      </VStack>
      <VStack gap="1" alignItems="stretch">
        <Text as="span" size="xs" color="muted">horizontal</Text>
        <Stack direction="horizontal" gap="2">
          <Box bg="cyan-subtle" px="4" py="2" rounded="md"><Text size="xs">One</Text></Box>
          <Box bg="cyan-muted" px="4" py="2" rounded="md"><Text size="xs">Two</Text></Box>
        </Stack>
      </VStack>
    </VStack>
  );
}