Stack

Stack arranges children in a single direction (vertical or horizontal) with consistent spacing between them.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Stack } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Stack gap="md">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Stack>
  );
}

When to use

• Stack — Use when you need a single-axis layout (vertical column or horizontal row) with consistent spacing. Ideal for forms, card content, and lists of items.
• Grid — Use when you need a two-dimensional layout with rows and columns.