Prose
A readable measure for long-form documents inside an interface.
Live — this one is real
Interfaces are instruments.
They give people a way to observe, choose and change something. A clear reading rhythm keeps those decisions in focus.
- Keep labels visible.
- Explain the next action.
Begin with the installation guide.
Usage
import { Prose } from "mizu-ui";
export function Example() {
return (
<Prose>
<h2>Interfaces are instruments.</h2>
<p>
They give people a way to observe, choose and change something. A clear
reading rhythm keeps those decisions in focus.
</p>
<ul>
<li>Keep labels visible.</li>
<li>Explain the next action.</li>
</ul>
<p>
Begin with the{" "}
<a href="/components/getting-started">installation guide</a>.
</p>
</Prose>
);
}
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 content/Typography.tsx
Source is included in the npm package under src/content/Typography.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Semantic headings, paragraphs, lists and links. |
| ...props | HTMLAttributes | — | Native wrapper attributes. |
Accessibility
Readability is CSS only. The author supplies correct heading levels and meaningful link text.
Motion
Static reading layout.