Plass UI
One design language of glass and gradient, shipped as a React library and a Flutter package under the same component names. What you press is tinted, what holds content is clear.
About this project
Plass UI is one design language shipped as two libraries. The same hundred and twenty-seven components, under the same names and the same numbers, are available to a React project and to a Flutter app, with three more on the React side for problems only the DOM has, so what is learned on one side is used on the other rather than two systems drifting apart by the third release.
Every surface answers a single question: is this pressed, or does it hold something. A thing you press is tinted glass — a gradient that turns through its colour family rather than darkening, a shadow thrown in that same colour, and a bloom of light that follows the pointer across it. A thing that holds something is clear glass: translucent, deeply blurred, edged with a white hairline and never dyed. Nothing is bevelled and nothing moves when pressed, because depth is carried by light, colour and blur. Every gradient stop was measured against its own label, so the lightest corner still clears the contrast a reader needs.
Five props — size, color, variant, density and elevation — carry the whole API, and dark mode follows the platform on both sides. The React package is ESM, tree-shakeable and has two runtime dependencies, the second of which, highlight.js, is downloaded only when a code block actually highlights something; the Flutter package has none at all, no assets, no plugins and no provider. The one step neither package can do for you is painting the page behind the glass, and two tokens exist for exactly that.
Features
Documentation site
TypeScript types
Multiple languages
Verified by tests
Cross-platform
Accessibility built in
Dark mode
Tree-shakeable