Introduction
MioUI is a set of components built on shadcn/ui conventions with a Claude-inspired aesthetic.
MioUI is not a package you install into node_modules. Like shadcn/ui, you copy the components into your own project — the code is yours to change.
Principles
- Editorial warmth: warm grays, serif headings, and an accent used only on key actions.
- Micro-contrast layers: Surface 0–3 tone steps plus hairlines instead of heavy borders.
- Single-border discipline: inside a bordered container, buttons and tags get no border of their own.
- Spring motion: four shared presets — SNAPPY, BOUNCY, GENTLE, HEAVY_SNAP.
- Accent-only themes: switching themes changes the accent color and nothing else.
Stack
Next.js · Tailwind CSS v4 · shadcn/ui conventions · Phosphor Icons · Motion