Astryx Design System

Usage

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

ts
import {Layout} from '@astryxdesign/core/Layout'

Best practices

Guidance	Practices
Do	Use Layout for page shells that need distinct zones like header, sidebar(s), content, and footer.
Do	Use HStack and VStack for simple directional stacking within a content area.
Don't	Use Layout for simple stacking layouts; use HStack or VStack instead.
Don't	Nest multiple Layout 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.