Skip to main content

Stack

Stack is a primitive component based on flexbox that manages the vertical layout of direct children.

Usage​

Stack arranges children vertically with consistent spacing.

import { Stack } from '@hardwater/teardrop';

<Stack gap="medium">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

Gap​

Control spacing between children:

<Stack gap="small">Tight spacing</Stack>
<Stack gap="medium">Default spacing</Stack>
<Stack gap="large">Comfortable spacing</Stack>

Alignment​

Align Items​

<Stack align="stretch">Stretch (default)</Stack>
<Stack align="start">Align start</Stack>
<Stack align="center">Align center</Stack>
<Stack align="end">Align end</Stack>

Justify Content​

<Stack justify="start">Justify start (default)</Stack>
<Stack justify="center">Justify center</Stack>
<Stack justify="end">Justify end</Stack>
<Stack justify="space-between">Space between</Stack>

Direction​

<Stack direction="column">Column (default)</Stack>
<Stack direction="row">Row (horizontal)</Stack>

Wrapping​

<Stack wrap>Wrap children</Stack>

API​

Props​

PropTypeDefaultDescription
gapSpacingToken-Spacing between children
align'stretch' | 'start' | 'center' | 'end''stretch'Align items
justify'start' | 'center' | 'end' | 'space-between''start'Justify content
direction'column' | 'row''column'Flex direction
wrapbooleanfalseWrap children
asstring | Component'div'Element or component to render as

Examples​

Form Layout​

<Stack gap="large">
  <Input label="Email" />
  <Input label="Password" type="password" />
  <Button variant="primary">Sign in</Button>
</Stack>

Card Content​

<Stack gap="small">
  <Heading level={2}>Card Title</Heading>
  <Text>Card description</Text>
  <Button>Action</Button>
</Stack>

Centered Content​

<Stack gap="medium" align="center" justify="center" minHeight={400}>
  <Heading>Centered Content</Heading>
  <Text>This content is centered</Text>
</Stack>

Responsive Stack​

<Stack
  direction={{ mobile: 'column', desktop: 'row' }}
  gap={{ mobile: 'small', desktop: 'medium' }}
>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Stack>

Best Practices​

  1. Consistent gaps - Use the same gap value for similar relationships
  2. Semantic HTML - Use as prop for semantic elements (<section>, <nav>, etc.)
  3. Composition - Combine with Box for padding and backgrounds
  4. Responsive - Adjust direction and gap for different screen sizes