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

Container

Max-width wrapper for page sections.

Components Container
layout static
<arc-container>

Overview

Container is the fundamental width-constraining primitive in your layout toolkit. It centers its children horizontally with `margin-inline: auto` and caps their width at the `--max-width` design token (1120px by default), while adding consistent inline padding via `--space-lg`. Every landing page hero, documentation section, and dashboard content area should be wrapped in a Container to maintain readable line lengths and a uniform horizontal rhythm. The `narrow` boolean prop switches the max-width constraint to `--max-width-sm` (typically 720px), which is ideal for article-style content, blog posts, and focused forms where shorter line lengths improve readability. This single toggle covers the two most common content widths without requiring custom CSS overrides. Container exposes a `container` CSS part on the inner wrapper, so you can target it with `::part(container)` for one-off adjustments. Because the component uses `padding-inline` rather than fixed margins, it handles RTL layouts automatically and leaves vertical spacing to the parent or sibling components like Section.

Guidelines

When to use

  • Wrap every full-width page section in a Container to maintain consistent margins
  • Use the narrow prop for blog posts, articles, and single-column forms
  • Nest Container inside Section when you need both vertical spacing and width constraints
  • Rely on the --max-width and --max-width-sm tokens for global width changes
  • Combine with DashboardGrid or other grid components for structured inner layouts

When not to use

  • Do not nest Containers inside other Containers — a single wrapper per content band is sufficient
  • Do not override padding-inline with fixed pixel values; adjust the --space-lg token instead
  • Do not use Container as a flex or grid parent — it is a block-level width constraint only
  • Do not apply background colors directly to Container; wrap it in a full-bleed div for colored bands
  • Do not confuse Container with PageLayout — Container constrains width, PageLayout manages column structure

Features

  • Centers content with margin-inline: auto and respects the `--max-width` token
  • Narrow mode switches to `--max-width-sm` for article and form layouts
  • Consistent inline padding via `--space-lg` design token
  • RTL-safe layout using logical properties (padding-inline, margin-inline)
  • Exposes a container CSS part for targeted ::part() styling
  • Zero vertical opinion — leaves block spacing to parent layout components
  • Lightweight wrapper with no JavaScript interactivity overhead

Preview

Default container — max-width: var(--max-width)
Narrow container — max-width: var(--max-width-sm)

Usage

<arc-container>
  <p>Content constrained to 1120px</p>
</arc-container>

<arc-container narrow>
  <p>Content constrained to 720px</p>
</arc-container>
 
import { Container } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <Container>
      <p>Content constrained to 1120px</p>
    </Container>
  );
}
 
<script setup>
import { Container } from '@arclux/arc-ui-vue';
</script>

<template>
  <Container>
    <p>Content constrained to 1120px</p>
  </Container>
  
  <Container narrow>
    <p>Content constrained to 720px</p>
  </Container>
</template>
 
<script>
  import { Container } from '@arclux/arc-ui-svelte';
</script>

<Container>
  <p>Content constrained to 1120px</p>
</Container>

<Container narrow>
  <p>Content constrained to 720px</p>
</Container>
 
import { Component } from '@angular/core';
import { Container } from '@arclux/arc-ui-angular';

@Component({
  imports: [Container],
  template: `
    <arc-container>
      <p>Content constrained to 1120px</p>
    </arc-container>
    
    <arc-container narrow>
      <p>Content constrained to 720px</p>
    </arc-container>
  `,
})
export class MyComponent {}
 
import { Container } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <>
      <Container>
        <p>Content constrained to 1120px</p>
      </Container>

      <Container narrow>
        <p>Content constrained to 720px</p>
      </Container>
    </>
  );
}
 
import { Container } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <>
      <Container>
        <p>Content constrained to 1120px</p>
      </Container>

      <Container narrow>
        <p>Content constrained to 720px</p>
      </Container>
    </>
  );
}
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-container — requires container.css + base.css (or arc-ui.css) -->
<div class="arc-container">
  <div class="container">Container</div>
</div>
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-container — self-contained, no external CSS needed -->
<div class="arc-container" style="display: block">
  <div style="width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px">Container</div>
</div>

API

narrow boolean false
Use the narrow max-width (720px vs 1120px)
size 'sm' | 'md' | 'lg' | 'xl' | 'full' 'md'
Controls the maximum width.
padding 'none' | 'sm' | 'md' | 'lg' 'md'
Controls inline padding.

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