Layout

Layout is a general five-slot primitive for arranging header, start, content, end, and footer regions within a page or bounded container. AppShell owns the page shell and app-wide navigation behavior; use HStack or VStack for simple directional stacking.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

Layout

Layout is a general five-slot primitive for arranging header, start, content, end, and footer regions within a page or bounded container. AppShell owns the page shell and app-wide navigation behavior; use HStack or VStack for simple directional stacking.

Usage guidance

• Use Layout when content needs named header, start, content, end, or footer regions.
• Use HStack and VStack for simple directional stacking within a content area.
• Avoid: Use Layout for simple stacking layouts; use HStack or VStack instead.
• Avoid: Use Layout as the page shell or for app-wide navigation; use AppShell for that responsibility.

Page with a details panel inside AppShell

function OrdersPage() {
  return (
    <AppShell
      sideNav={
        <SideNav>
          <SideNavItem label="Orders" isSelected />
          <SideNavItem label="Customers" />
          <SideNavItem label="Settings" />
        </SideNav>
      }>
      {/* No padding props needed: the page Layout's regions keep their
          default inset inside AppShell's full-bleed content area. */}
      <Layout
        header={
          <LayoutHeader hasDivider>
            <Heading level={1}>Orders</Heading>
          </LayoutHeader>
        }
        end={
          <LayoutPanel
            hasDivider
            width={320}
            role="complementary"
            label="Order details">
            <VStack gap={2}>
              <Heading level={2}>Order #1042</Heading>
              <Text type="body" color="secondary">
                Shipped · 3 items · $184.00
              </Text>
            </VStack>
          </LayoutPanel>
        }
        content={
          <LayoutContent>
            <Text type="body">
              Select an order to see its shipping and payment details.
            </Text>
          </LayoutContent>
        }
      />
    </AppShell>
  );
}

Theming API

{
  "targets": [
    {
      "className": "astryx-layout",
      "visualProps": [
        "height"
      ]
    },
    {
      "className": "astryx-layout-content"
    },
    {
      "className": "astryx-layout-footer"
    },
    {
      "className": "astryx-layout-header"
    },
    {
      "className": "astryx-layout-panel"
    }
  ]
}

LayoutHeader

LayoutContent

LayoutFooter

LayoutPanel

Card

Section

Anatomy

• Layout container: General layout primitive that places the header, start, content, end, and footer slots.
• Header: Optional LayoutHeader region supplied by the caller, typically in the header slot.
• Panel: Optional LayoutPanel region supplied by the caller in the start or end slot.
• Content area: Optional LayoutContent region supplied by the caller in the content slot.
• Footer: Optional LayoutFooter region supplied by the caller, typically in the footer slot.

Layout Content

Scrollable main content area.

Layout Footer

Bottom bar for action bars, pagination, and status bars.

Layout Header

Top bar for page titles, app bars, and toolbars.

Layout Panel

Sidebar for navigation, settings, or inspector panels.

Examples

• Layout Content: LayoutContent is the scrollable main content area within a Layout, providing automatic padding and scroll containment between the header and footer.
• Layout Footer: LayoutFooter is a fixed footer slot within a Layout, pinned to the bottom for persistent actions like form buttons or navigation.
• Layout Header: LayoutHeader is a fixed header slot within a Layout, pinned to the top for titles, navigation, and action buttons.
• Layout Panel: LayoutPanel is a sidebar slot within a Layout, used for navigation, detail views, or secondary content alongside the main content area.
• Layout:
• Layout — Basic Card: A card layout with header, scrollable content area, and footer with action buttons.
• LayoutContent — Basic: A scrollable main content area below a fixed header. Use LayoutContent inside Layout to get automatic padding and scroll containment for the primary content.
• Layout — Content Only: A minimal layout with just a content area inside a card, without header or footer.
• Layout — Content Width: A layout using contentWidth to constrain and center content while keeping dividers full-bleed.
• Layout — Dual Panel: A file browser style layout with start panel for folders, main content for files, and end panel for details.
• LayoutFooter — Actions: A fixed footer with end-aligned action buttons below scrollable content. Use LayoutFooter inside Layout for persistent actions like Save and Cancel.
• Layout — Full Bleed Content: A layout where content extends edge-to-edge with zero padding, ideal for tables or images.
• LayoutHeader — With Actions: A fixed page header with a title and a primary action, above scrollable content. Use LayoutHeader inside Layout for persistent page-level headers.
• LayoutPanel — Navigation: A fixed-width side panel holding a navigation list next to the main content. Use LayoutPanel in the start or end slot of Layout for sidebars.
• Layout — Sidebar Navigation: A settings page layout with a navigation sidebar panel, content area, header, and footer.