Atom UI
LayoutPrimitivesResponsive

Compose structure with confidence.

Layout primitives are the foundation for every page shell, dashboard, and responsive section. Use them to create clean flow, consistent rhythm, and predictable behavior across breakpoints.

AspectRatioFlex + GridSidebarAccessibility
Aspect
media ratio
Flex
axis control
Grid
spatial map
Sidebar
app shell
Media Rhythm

AspectRatio

Lock visual proportions for media blocks so cards and content rows stay balanced, even when assets have inconsistent source dimensions.

Ratio Presets

1:1
ratio 1:1
4:3
ratio 4:3
16:9
ratio 16:9
21:9
ratio 21:9

Image Fill

Wide preview
hero / wide media
Square preview
thumb / card media
Direction Context

DirectionProvider

Provide `ltr` or `rtl` context for direction-aware behavior in nested component trees without rewriting each leaf component.

LTR vs RTL

LTR

Left to right

RTL

Right to left

Nested Providers

LTR

Parent provider

RTL

Nested override
Axis Layout

Flex

Control direction, alignment, distribution, and wrapping with one primitive. Use it for toolbars, action rows, metadata strips, and adaptive micro-layouts.

Direction + Align

row + center
A
B Tall
C
column + start
row 1
row 2
row 3

Justify + Wrap

justify="between"
Left
Center
Right
wrap
item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
Spatial System

Grid

Build predictable page structure with columns, spans, and responsive breakpoints. Use Grid for macro composition and Flex for micro alignment.

Columns + Auto-fit

3-column layout
1
2
3
4
5
6
auto-fit minChildWidth="180px"
item 1
item 2
item 3
item 4
item 5

12-Column Spans

span full
span 6
span 6
span 4
span 8
Horizontal Alias

HStack

Fast shorthand for horizontal composition. Great for inline metadata, toolbars, compact card headers, and mixed icon+label sequences.

Action Row

Inline Meta

4.8 rating

128 reviews

Open now

Vertical Alias

VStack

Best for progressive reading and form-like flows. Stack title, description, fields, and actions while preserving visual rhythm.

Content Block

Project Summary

VStack keeps spacing consistent as content grows from short snippets to richer editorial sections.

Form Skeleton

A11y Utility

VisuallyHidden

Hide content visually while preserving screen reader context for icon-only controls and compact interactions.

Icon Buttons

Context Extension

Read more about layout accessibility guidelines

Screen readers announce the full sentence, while the UI keeps compact copy.