<arc-stack> Overview
Guidelines
When to use
- Use Stack to replace inline flexbox styles for consistent spacing
- Combine direction="horizontal" with justify="between" for toolbar layouts
- Use the wrap attribute for responsive card or tag grids
- Nest stacks for complex layouts: horizontal inside vertical
- Use gap tokens instead of margins on child elements
When not to use
- Use Stack when CSS Grid is more appropriate (2D layouts with column alignment)
- Add margin to Stack children — use gap instead
- Use gap="xs" for major layout sections — reserve xs for tight clusters like icon+text
- Nest more than 3 levels deep — consider a dedicated layout component instead
Features
- Vertical and horizontal flex direction via attribute
- Token-based gap scale: xs, sm, md, lg, xl, 2xl mapping to --space-* tokens
- Alignment control with start, center, end, and stretch options
- Justification control including space-between and space-around
- Flex wrap support for responsive layouts
- Zero inner DOM — host element is the flex container directly
Preview
Usage
<arc-stack direction="vertical" gap="md">
<arc-text>Item one</arc-text>
<arc-text>Item two</arc-text>
<arc-text>Item three</arc-text>
</arc-stack>
<arc-stack direction="horizontal" gap="sm" align="center" justify="between">
<arc-button variant="ghost">Cancel</arc-button>
<arc-button>Save</arc-button>
</arc-stack>import { Stack, Text, Button } from '@arclux/arc-ui-react';
<Stack direction="vertical" gap="md">
<Text>Item one</Text>
<Text>Item two</Text>
</Stack>
<Stack direction="horizontal" gap="sm" align="center" justify="between">
<Button variant="ghost">Cancel</Button>
<Button>Save</Button>
</Stack><script setup>
import { Stack, Text } from '@arclux/arc-ui-vue';
</script>
<template>
<Stack direction="vertical" gap="md">
<Text>Item one</Text>
<Text>Item two</Text>
</Stack>
</template><script>
import { Stack, Text } from '@arclux/arc-ui-svelte';
</script>
<Stack direction="vertical" gap="md">
<Text>Item one</Text>
<Text>Item two</Text>
</Stack>import { Component } from '@angular/core';
import { Stack, Text } from '@arclux/arc-ui-angular';
@Component({
imports: [Stack, Text],
template: `
<Stack direction="vertical" gap="md">
<Text>Item one</Text>
<Text>Item two</Text>
</Stack>
`,
})
export class MyComponent {}import { Stack, Text } from '@arclux/arc-ui-solid';
<Stack direction="vertical" gap="md">
<Text>Item one</Text>
<Text>Item two</Text>
</Stack>import { Stack, Text } from '@arclux/arc-ui-preact';
<Stack direction="vertical" gap="md">
<Text>Item one</Text>
<Text>Item two</Text>
</Stack><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-stack — requires stack.css + tokens.css (or arc-ui.css) -->
<div class="arc-stack">
Stack
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-stack — self-contained, no external CSS needed -->
<div class="arc-stack" style="display: flex; flex-direction: column; gap: 16px; align-items: stretch; justify-content: flex-start">
Stack
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'vertical' | 'horizontal' | 'vertical' | Flex direction — vertical is column, horizontal is row |
gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Gap between children, maps to --space-* tokens |
align | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | Cross-axis alignment (align-items) |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'start' | Main-axis alignment (justify-content) |
wrap | boolean | false | Enable flex-wrap for responsive wrapping |