Stack

The Stack component is the backbone of the layout system. It abstracts away repetitive Flexbox boilerplate (flex, flex-col, gap-x) to enforce consistent spacing and alignment across the application.

It supports vertical and horizontal layouts, responsive direction switching, and polymorphic rendering.

---

Layout Directions

Vertical Stack (Default)

Arranges items in a vertical column. This is the default behavior.

<Stack gap="4">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Stack>

Horizontal Stack

Arranges items in a horizontal row. Ideal for button groups, tags, or navigation items.

Responsive Layouts

The type prop accepts an object to change direction based on breakpoints. This is useful for layouts that need to stack on mobile (col) but sit side-by-side on desktop (row).

// 📱 Mobile: Column
// 💻 Desktop: Row
<Stack type={{ initial: 'col', md: 'row' }} gap="4">
  <Sidebar />
  <Content />
</Stack>

Polymorphism (Semantics)

By default, Stack renders a <div>. You can use the renderAs prop to render semantic HTML elements like <ul>, <section>, or <form> while keeping the layout behavior.

  <Stack renderAs="ul" gap="4">
    <li>List Item 1</li>
    <li>List Item 2</li>
  </Stack>

  <Stack renderAs="form" gap="6" onSubmit={handleSubmit}>
    <Input label="Email" />
    <Button type="submit">Login</Button>
  </Stack>

Accessibility

The Stack component is purely presentational and does not interfere with the accessibility of its child components. When using semantic HTML elements via the renderAs prop, ensure that the content within the Stack adheres to best practices for accessibility.

Props

Prop	Type	Default	Description
type	’row’ | ‘col’ | object	’col‘	“Direction. Pass an object { initial: 'col', md: 'row' } for responsive layouts.”
gap	’0’…‘12'	'4’	Spacing between items. Corresponds to Tailwind spacing scale.
align	’start’ | ‘center’ | ‘end’ | ‘stretch’	-	CSS align-items property.
justify	’start’ | ‘center’ | ‘between’	-	CSS justify-content property.
wrap	boolean	false	Whether to allow items to wrap to the next line.
renderAs	HTMLTag	’div‘	“The HTML tag to render (e.g., section, ul, form).”