row() / col() / box()

Lit-html directives that apply flex-row, flex-column, or utility styles directly to any existing HTML element — no wrapper elements required.

Quick start

import { row, col, stack, box } from "mates-ui";

// Apply row layout to any element:
html`<header ${row("between", "center", { gap: "var(--md-space-2)" })}>
  ${Text("Acme", { type: "title-sm" })}
  ${Button("Sign in", { variant: "outlined", size: "sm" })}
</header>`

row() on a header element

import { html, renderApp } from 'mates';

import { Text, FilledButton, OutlinedButton, TextButton, row } from 'mates-ui';

const App = () => () => html`

${Text("Acme", { type: "title-sm" })}

${TextButton("Docs", { size: "sm" })}

${OutlinedButton("Sign in", { size: "sm" })}

</div>

</header>

</div>

renderApp(App, document.getElementById('app'));

col() on a ul

import { html, renderApp } from 'mates';

import { Text, col } from 'mates-ui';

const TASKS = ["Review PR #142", "Update docs", "Deploy to staging", "Write release notes"];

const App = () => () => html`

<ul style="list-style:none;padding:0;margin:0;max-width:24rem;width:100%;"

${col("start", "stretch", { gap: "var(--md-space-1)" })}>

${TASKS.map((text) => html`

${Text(text, { type: "body-sm" })}

</li>

`)}

</ul>

renderApp(App, document.getElementById('app'));

box() for spacing and surface

import { html, renderApp } from 'mates';

import { Text, box } from 'mates-ui';

const App = () => () => html`

${Text("Centered with box()", { type: "title-sm" })}

${Text("maxw=400px, mx=auto, p=3, bgcolor, br", { type: "body-sm", color: "muted" })}

</main>

renderApp(App, document.getElementById('app'));

row() / col() / stack() / box()

import { row, col, stack, box } from "mates-ui";

Prop	Type	Default	Description
`ai`	`CSS align-items keyword`	`"center" (row) \| "stretch" (col)`	align-items value — e.g. `"center"`, `"stretch"`, `"start"`, `"end"`.
`attr`	`AttrMap`	—	HTML attributes on the root element.
`classes`	`string \| string[]`	—	Extra root classes — joined and appended after built-in classes.
`data`	`DataAttrMap`	—	Root `data-*` map (`testId` → `data-testid`). `testId` prop / `attr` win over `data`.
`fill`	`boolean`	`false`	Sets width: 100% and height: 100%.
`gap`	`CSS length`	`—`	Sets the gap between children.
`id`	`string`	—	Root `id` shorthand (`attr.id` wins). Form native-control `id` props are unchanged.
`inline`	`boolean`	`false`	Uses inline-flex instead of flex.
`jc`	`CSS justify-content keyword`	`"start"`	justify-content value — e.g. `"start"`, `"center"`, `"between"`, `"end"`.
`on`	`OnEventMap`	`—`	DOM event handlers on the root element.
`padding`	`CSS length \| number`	`—`	Padding on all sides. Number × 8px or raw CSS.
`px`	`CSS length \| number`	`—`	Horizontal padding shorthand.
`py`	`CSS length \| number`	`—`	Vertical padding shorthand.
`self`	`CSS align-self keyword`	`—`	Sets align-self on the element itself.
`style`	`StyleMap`	`—`	Inline CSS on the root element.
`wrap`	`boolean`	`false`	Enables flex-wrap.