Stack

Used to distribute children vertically, with even spacing between each child.

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

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.