Back to Home
Interactive

Playground.

Seven hands-on demos of things a portfolio usually just claims. Pick a tab — each one is a real, working widget built on the same CSS variables as the rest of the site.

Responsive

Resize it yourself.

Drag the handle, pick a device, or click the ruler. The preview reflows with CSS container queries — reacting to its own width, not the browser window.

0px@xs
xs
sm
md
lg
xl
preview · single column · compact nav
MZ / UI

Responsive by design

One layout, every screen.

Nothing here listens to the browser width. Each breakpoint is scoped to this panel, so the same component works anywhere it's placed.

Get startedDocs
preview.tsx

Fluid grids

auto-adapts

Container queries

auto-adapts

Fluid type scale

auto-adapts

Tap targets

auto-adapts

Safe gutters

auto-adapts

Zero overflow

auto-adapts

100%

Fluid width

0

Layout shifts

5

Breakpoints