Stack

A vertical layout component that evenly distributes children with consistent spacing between each item.

View in StorybookView in PlayroomAPI Reference

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Stack } from '@adaptavant/eds-core';

Default​

Basic example.

1
2
3
const styles = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  height: "5rem",
  width: "5rem",
  backgroundColor: "var(--background-accent)",
  color: "var(--text-onPrimary)",
};
return (
  <Stack
    className={`
      gap-4
      items-stretch
    `}
  >
    <div style={styles}>1</div>
    <div style={styles}>2</div>
    <div style={styles}>3</div>
  </Stack>
);
View in Playroom

API Reference​

Stack

as?'div'React.ElementType
The element type to render. Can be any valid HTML element (e.g., 'div', 'section', 'article', 'button') or a React component.
children?_React.ReactNode
The content to be rendered inside the Box.
className?''string
CSS class names to apply to the Box. Supports Tailwind CSS utility classes.
style?{}React.CSSProperties
Inline styles to apply to the Box.