Layout & Structure
Stack
Vertical flex layout with consistent spacing.
Item 1
Item 2
Item 3
Group
Horizontal flex layout for inline elements.
Positioning
Flex
Flexible layout container for custom arrangements.
Flex item 1
Flex item 2
Flex item 3
SimpleGrid
Responsive grid that distributes children evenly.
1
2
3
4
Grid
Full-featured grid with column spans.
span=12
span=6
span=6
span=4
span=4
span=4
span=3
span=3
span=3
span=3
Responsive Grid
Responsive
Responsive
Responsive
Paper
Surface component with shadow and border options.
Shadow XS
Shadow SM
Shadow MD
Shadow LG
Shadow XL
With Border
Radius
radius=xs
radius=sm
radius=md
radius=lg
radius=xl
Center
Centers content horizontally and vertically.
Centered Content
Divider
Space
Adds empty space between elements. Useful when you need spacing outside of Stack/Group.
Content above
Content below (xl space)
AspectRatio
Maintains a consistent width-to-height ratio.
16:9
4:3
1:1