Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Stack

Flexbox layout component for vertical or horizontal stacking with token-based spacing.

Components Stack
content static
<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

NEW Stack Layout Cancel Submit

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)
wrap boolean false
Enable flex-wrap for responsive wrapping

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy