Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsLayout and structure

Stack

A flex container that lines its children up in a row or a column with even spacing. Reach for it first for small layouts: form rows, button groups, card bodies.

Row, column and breakpoint

A stack is a column by default and a row with Row. Breakpoint switches the direction at a screen size, so a row of fields can stack up on phones.

Column (default)

Flour
Water
Salt

Row

Flour
Water
Salt

Row with Breakpoint.Sm: a column on phones

First name
Last name

Spacing

Spacing sets the gap between children in steps of 4 pixels, from 0 to 20. The default is 3, or 12 pixels.

Spacing: 3 (12 px)

Mix
Rest
Fold
Shape
Bake

Justify and AlignItems

In a row, Justify places children along the row and AlignItems across it. Every combination of the two enums, with children of different heights.

MudStack Row: Justify × AlignItems
Justify ↓ · AlignItems →BaselineCenterStartEndStretch
FlexStart
a
b
c
a
b
c
a
b
c
a
b
c
a
b
c
Center
a
b
c
a
b
c
a
b
c
a
b
c
a
b
c
FlexEnd
a
b
c
a
b
c
a
b
c
a
b
c
a
b
c
SpaceBetween
a
b
c
a
b
c
a
b
c
a
b
c
a
b
c
SpaceAround
a
b
c
a
b
c
a
b
c
a
b
c
a
b
c
SpaceEvenly
a
b
c
a
b
c
a
b
c
a
b
c
a
b
c

Wrap and reverse

Wrap decides what happens when children do not fit: NoWrap keeps one line and lets it overflow (scroll the first frame), Wrap starts a new line, WrapReverse starts it above. Reverse flips the order without changing the markup.

Wrap.NoWrap

Poetry
Crime
Travel
Natural history
Biography
Cookery
Science fiction

Wrap.Wrap

Poetry
Crime
Travel
Natural history
Biography
Cookery
Science fiction

Wrap.WrapReverse

Poetry
Crime
Travel
Natural history
Biography
Cookery
Science fiction

Reverse

Stretching items

StretchItems lets chosen children grow to fill the free space along the main axis: the first, the last, both, those in between, or all of them.

MudStack Row: StretchItems
StretchItems.None
First
Middle
Middle
Last
StretchItems.Start
First
Middle
Middle
Last
StretchItems.End
First
Middle
Middle
Last
StretchItems.StartAndEnd
First
Middle
Middle
Last
StretchItems.Middle
First
Middle
Middle
Last
StretchItems.All
First
Middle
Middle
Last

Playground

Change any parameter; the markup below shows only the values that differ from the defaults.

Telescope
Camera
Mount
Spacing
Justify
AlignItems
Wrap
StretchItems
<MudStack Row="true">
    <MudPaper>Telescope</MudPaper>
    <MudPaper>Camera</MudPaper>
    <MudPaper>Mount</MudPaper>
</MudStack>

Starting .NET in your browser…