Astryx Design System

Usage

Layout provides composable components for building structured page shells with header, sidebar, content, and footer slots. Use XDSLayout for full app layouts and XDSHStack/XDSVStack for simple directional stacking.

ts
import {XDSLayout} from '@xds/core/Layout'

Best practices

Guidance	Practices
Do	Use XDSLayout for page shells that need distinct zones like header, sidebar(s), content, and footer.
Do	Use XDSHStack and XDSVStack for simple directional stacking within a content area.
Don't	Use XDSLayout for simple stacking layouts; use XDSHStack or XDSVStack instead.
Don't	Nest multiple XDSLayout components; use one per page shell and compose content within its slots.

Examples

Common configurations, variations, and states.

Layout — Basic Card

A card layout with header, scrollable content area, and footer with action buttons.

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.

Layout — Full Bleed Content

A layout where content extends edge-to-edge with zero padding, ideal for tables or images.

Layout — Sidebar Navigation

A settings page layout with a navigation sidebar panel, content area, header, and footer.