ZStack

Vertical stack layout

Example

Layer 1

Layer 2

Import

import { ZStack } from "zurto-ui";

Usage

import { ZStack } from "zurto-ui";

function Example() {
  return (
    <ZStack gap={12}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </ZStack>
  );
}

Props

| Prop | Type | Default | Description | | ------- | ---------- | ------- | ----------------- | ------ | ----------- | --------- | | gap | number | 0 | Gap between items | | align | 'stretch' | 'start' | 'center' | 'end' | 'stretch' | Alignment |

Accessibility

• ✅ Keyboard navigation support
• ✅ ARIA attributes included
• ✅ Screen reader friendly
• ✅ Focus management