Skip to main content
Version: 1.0.2

Stack

Overview

The Stack component arranges its children in a vertical or horizontal stack with consistent spacing.
It’s ideal for layouts like button groups, form fields, navigation links, and responsive arrangements.

Preview

Installation

npx @mindfiredigital/ignix-ui add stack

Usage

Import the component:

import { Stack } from './components/ui';

Basic Usage

<Stack responsive={{ mobile: "vertical", tablet: "horizontal", desktop: "horizontal" }}>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</Stack>

Props

PropTypeDefaultDescription
directionstring"vertical"Stack direction: "vertical", "horizontal", "responsive"
alignstring"stretch"Alignment: "start", "center", "end", "stretch"
justifystring"start"Justify: "start", "center", "end", "between", "around"
spacingstring"normal"Space between items: "none", "xs", "sm", "normal", "lg", "xl", or custom
wrapbooleanfalseAllow items to wrap to next line
responsiveobjectResponsive direction: mobile, tablet, desktop
classNamestringAdditional CSS classes
childrennodeContent inside the stack

Use Cases

  • 👉 Horizontal button groups
  • 👉 Vertical form layouts
  • 👉 Navigation links in a header
  • 👉 Responsive layouts (switch direction on mobile)