# Mituto UI
Mituto UI is the light, playful design language for Mituto web products. Mituto is built and based in Luxembourg. The kit ships as plain CSS, a small optional JavaScript enhancer, an SVG icon sprite, brand assets, and thin React adapters. There are no runtime UI dependencies.
## Browser setup
```html
```
`initMituto(root)` enhances only descendants of `root`, is safe to call again, and returns a cleanup function. Interactive controls dispatch a bubbling `mt:change` event when their value changes.
## React setup
```jsx
import "@mituto/ui/styles.css";
import { Button, Field, Input, Icon, NumberStepper, Select } from "@mituto/ui/react";
export function ProfileForm() {
return (
);
}
```
The React adapters import only React and never depend on the vanilla enhancer. Do not run `initMituto()` over React-managed interactive components; use one behavior owner per subtree.
## Package map
- `mituto.css` — tokens, reset, components, and utilities.
- `mituto.js` — framework-neutral enhancements for dropdowns, selects, autocomplete, tabs, accordions, dialogs, toasts, tables, and supporting controls.
- `react.jsx` — React-native adapters with controlled and uncontrolled APIs.
- `mituto-icons.svg` — the Mituto Sprout icon sprite.
- `tokens.json` — tool-friendly design tokens following the Design Tokens Community Group format.
- `brand/` — horizontal logo, mark, and wordmark.
- `fonts/` — self-hosted Fredoka and Nunito Sans variable fonts with OFL license files.
## Accessibility contract
Start with semantic HTML, keep every control keyboard reachable, connect labels and descriptions with IDs, and never communicate state by color alone. Mituto components preserve visible focus, minimum 44px primary controls, reduced-motion preferences, and light-surface contrast. Product teams remain responsible for meaningful labels, validation messages, focus order, and testing the completed flow.