Visibility

Resize the browser to see these utility classes at work.

Visible at Specific Breakpoints

sm:visible

md:visible

lg:visible

Hidden at Specific Breakpoints

sm:hidden (shown at everything but sm)

md:hidden (shown at everything but md)

lg:hidden (shown at everything but lg)

These work according to the following chart:

Class specifier	Pixels
sm:visible	Visible only at sm-
md:visible	Visible only at md
lg:visible	Visible only at lg+
sm:hidden	Hides at sm-
md:hidden	Hides at md
lg:hidden	Hides at lg+

While a few hiding (display: none) helpers exist (shown above), you may be better suited to conditionally unmount components at breakpoints using a useBreakpoint hook .

tip

Note: import { useBreakpoint } from "mainsail-ui" — This hook can be used to provide responsive reactivity in JS components, but should be used at a higher level if possible because it responds to window resizing and should be used sparingly.