Stacks children in a row or column with one consistent gap.
import { Stack } from "@/fragments/ui";Sourceimport { Box } from '@/components/Box';
import { Stack } from '@/components/Stack';
<Stack gap="sm">
<Box background="secondary" rounded="sm" paddingX="md" paddingY="sm">One</Box>
<Box background="secondary" rounded="sm" paddingX="md" paddingY="sm">Two</Box>npx @usefragments/cli add stackWrites src/fragments/ui/components/Stack plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Children flow left to right.
import { Box } from '@/components/Box';
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm">
<Box background="secondary" rounded="sm" paddingX="md" paddingY="sm">One</Box>
<Box background="secondary" rounded="sm" paddingX="md" paddingY="sm">Two</Box>One spacing token sets every gap in the stack.
import { Box } from '@/components/Box';
import { Stack } from '@/components/Stack';
<Stack gap="lg">
<Stack direction="row" gap="xs">
<Box background="secondary" rounded="sm" paddingX="md" paddingY="sm">xs</Box>justify positions children along the main axis.
import { Box } from '@/components/Box';
import { Stack } from '@/components/Stack';
<Stack gap="md">
<Box width="240px" border rounded="sm" padding="sm">
<Stack direction="row" gap="sm" justify="between">Swap direction and gap per breakpoint with an object value.
<Stack
direction={{ base: 'column', md: 'row' }}
gap={{ base: 'sm', md: 'lg' }}
>
<Button variant="soft">First</Button>
<Button variant="soft">Second</Button>Draws a divider between each child.
import { Stack } from '@/components/Stack';
import { Text } from '@/components/Text';
<Stack gap="md" separator>
<Text>Section one</Text>
<Text>Section two</Text>The as prop renders a real nav, section, or list element.
<Stack as="nav" direction="row" gap="md">
<Button variant="ghost" size="sm">Home</Button>
<Button variant="ghost" size="sm">About</Button>
<Button variant="ghost" size="sm">Contact</Button>
</Stack>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Elements to arrange |
direction | union | column | Stack direction: "row", "column", or responsive object |
gap | union | md | Spacing between items: "none"|"xs"|"sm"|"md"|"lg"|"xl", a number (1-8) for space scale, or responsive object |
align | enumstartcenterendstretchbaseline | Not set | Cross-axis alignment |
justify | enumstartcenterendbetween | Not set | Main-axis alignment |
wrap | boolean | false | Allow items to wrap |
separator | node | Not set | Render a separator between children. true = default 1px line, or pass a ReactNode for custom separators. |
as | enumdivsectionnavarticleasideheaderfootermainulol | div | HTML element to render |
className | string | Not set | — |
style | object | Not set | — |