Stack
A single-axis layout that wraps when the task calls for it.
Live — this one is real
ReactTypeScriptNative CSS
Usage
import { Stack, Badge } from "mizu-ui";
export function Example() {
return (
<Stack direction="row" wrap gap={12}>
<Badge>React</Badge>
<Badge>TypeScript</Badge>
<Badge>Native CSS</Badge>
</Stack>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect layout/Layout.tsx
Source is included in the npm package under src/layout/Layout.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | "row" | "column" | "column" | Main axis. |
| gap / align / wrap | number / CSS alignItems / boolean | — | Spacing, cross-axis alignment and wrapping. |
| ...props | HTMLAttributes | — | Native div props; style can override defaults. |
Accessibility
No synthetic semantics. Use children with meaningful document structure.
Motion
Native flex layout.