Responsive values

Style props that change with screen size take one value, or one per breakpoint. The server writes classes and CSS variables for the breakpoints you set and nothing else, so a page fits a phone with no script.

One value per breakpoint

razor

<Stack Gap="4">...</Stack>
<Stack Gap="new() { Base = 2, Md = 6 }">...</Stack>
<Stack Direction="new() { Base = Direction.Column, Md = Direction.Row }">...</Stack>
<Grid Columns="new() { Base = 1, Sm = 2, Lg = 4 }">...</Grid>

Breakpoint	From
`Base`	0, every screen
`Sm`	640px
`Md`	768px
`Lg`	1024px
`Xl`	1280px

Each value holds from its breakpoint up, until a larger one replaces it. Only what you set produces CSS, so new() { Md = 6 } keeps the component's own value below 768px.

What's responsive

What changes with screen size takes a map: direction, gap, spacing, columns, sizes, alignment. Switches don't: Grow, Shrink, Wrap, Inline and the rest are plain booleans, so you can write them bare, as in <Row Wrap>. Each component's API page marks its responsive parameters.

Hide or show by width

Use HiddenFrom or VisibleFrom on nearly any component, fields included:

razor

<Button HiddenFrom="Breakpoint.Md" StartIcon="Lucide.Menu">Menu</Button>
<NavMenu VisibleFrom="Breakpoint.Md">...</NavMenu>

Fluid text

Use MinSize on Heading or TextBlock for text that grows smoothly instead of in steps: the text is MinSize on a 360px screen and Size at 1280px.

razor

<Heading Size="TextSize.Xl5" MinSize="TextSize.Xl3">Ship on Friday</Heading>

Sized by the container

A Form or Fieldset with Columns (a plain number) follows its own width, not the screen's, so the same form fits a page, a dialog and a drawer with no breakpoints. A Grid with MinChildWidth fits as many columns as there's room for.

razor

<Form Model="Model" FormName="contact" Columns="2">...</Form>   @* two columns from 32rem of form *@
<Grid MinChildWidth="Length.Rem(15)" Gap="4">...</Grid>

Next steps

Style props: every prop that takes a map.
Forms and validation: columns in a form.