Stack

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

View in StorybookView in Playroom

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.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.