Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · layout

Layout utilities

Stack, cluster and responsive grid recipes built with native CSS.

Install with npx @madojs/ui@latest add layout.

Primitive

Layout recipes

One
Two
Three

Composition

  • Compose flow with stack, wrapping actions with cluster, and resilient cards with a responsive minmax grid.

Public API

class mado-ui-stack
Vertical flow with configurable gap, alignment and justification.
class mado-ui-cluster
Wrapping horizontal flow for controls and metadata.
class mado-ui-grid
Auto-fitting grid controlled by a minimum item size.
css-property --mado-ui-stack-gap / --mado-ui-cluster-gap / --mado-ui-grid-min
Primary layout sizing controls.

Detected public classes

  • .mado-ui-cluster
  • .mado-ui-grid
  • .mado-ui-stack

Detected public CSS properties

  • --mado-ui-cluster-align
  • --mado-ui-cluster-gap
  • --mado-ui-cluster-justify
  • --mado-ui-cluster-wrap
  • --mado-ui-grid-align
  • --mado-ui-grid-gap
  • --mado-ui-grid-min
  • --mado-ui-space-3
  • --mado-ui-space-4
  • --mado-ui-stack-align
  • --mado-ui-stack-gap
  • --mado-ui-stack-justify

Accessibility contract

  • Layout classes add no landmarks or semantics; choose meaningful native wrappers in application markup.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.