Stack
Flexbox layout component for vertical or horizontal stacking with token-based spacing.
<arc-stack> Overview
Stack is a pure layout primitive that arranges child elements in a vertical or horizontal flex container with consistent, token-based spacing. Rather than writing ad-hoc flexbox CSS for every layout, Stack provides a declarative API where direction, gap, align, and justify attributes map directly to the design system's spacing scale.
The component renders no inner wrapper — the :host element itself is the flex container, and render() returns a bare <slot>. This zero-overhead design means Stack adds no extra DOM nodes. Gap values (xs through 2xl) map to var(--space-*) tokens, ensuring consistent spacing across the application without magic numbers.
Stack is especially useful for form layouts, card groups, button rows, and any composition where items need uniform spacing. The wrap attribute enables flex wrapping for responsive grids, and combining direction="horizontal" with justify="between" creates common toolbar-style layouts.
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
- Do not use Stack when CSS Grid is more appropriate (2D layouts with column alignment)
- Do not add margin to Stack children — use gap instead
- Do not use gap="xs" for major layout sections — reserve xs for tight clusters like icon+text
- Do not 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';
export default function Example() {
return (
<>
<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: `
<arc-stack direction="vertical" gap="md">
<arc-text>Item one</arc-text>
<arc-text>Item two</arc-text>
</arc-stack>
`,
})
export class MyComponent {}import { Stack, Text } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<Stack direction="vertical" gap="md">
<Text>Item one</Text>
<Text>Item two</Text>
</Stack>
);
}import { Stack, Text } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<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
-
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)
-
wrapbooleanfalse - Enable flex-wrap for responsive wrapping