Introduction
A complete, accessible UI library for the web, one set of components, many design systems.
What MIAN is
MIAN is a complete set of 135 UI components, buttons and inputs through tables, charts, dialogs, command palettes and carousels, written as semantic HTML with CSS classes.
On top of that one component set sit 67 noodles in 10 families. A noodle is a whole design language: colours for light and dark, shape, depth, texture, motion and the way every control, table and chart is drawn, each inspired by a real noodle and written down as a philosophy you can extend. Change data-noodle and every component changes with it. The default, Mian, is the plain black-and-white base the others vary.
Principles
- The platform first. Dialogs are
<dialog>, menus use the Popover API, accordions are<details>, form controls are real inputs. You get accessibility and keyboard behaviour the browser already knows. - Classes, not components. No framework runtime. It works the same in plain HTML, React, Vue, Svelte, Laravel, Rails or WordPress.
- Small and optional JavaScript. 99 of 135 components need no JavaScript at all. The rest share one 22.3 KB script that initialises itself.
- Override-friendly. Everything lives in CSS cascade layers, so any rule you write wins.
- Readable by machines. Every component, noodle and design language is published as JSON, Markdown, a registry item and through MCP.
Where next
- Installation
- Two tags, or copy the files into your project.
- Components
- All 135, each with live examples you can switch between noodles.
- Noodles
- Pick a design language, and read why it looks the way it does.
- Noodle studio
- Put your own brand colours and type on any noodle.
- Designing websites
- How to compose whole pages that do not look generated.