Stack
Flexbox layout component for vertical or horizontal stacking with token-based spacing.
<arc-stack>Overview
Stack is a layout primitive that arranges child elements in a vertical or horizontal flex container with token-based spacing. Instead of writing flexbox CSS for every layout, you set direction, gap, align, and justify attributes, which map to the design system's spacing scale.
The component renders no inner wrapper. The :host element is the flex container, and render() returns a bare <slot>, so Stack adds no extra DOM nodes. Gap values (xs through 2xl) map to var(--space-*) tokens, so spacing stays consistent without magic numbers.
Stack suits 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