Zeno
Zeno is an open-source design system: web components and design tokens that work in plain HTML, React, Vue and Svelte.
Nothing is published to npm yet, so the install commands on this site do not work today. The first release will be 0.1.0. See Releases.
npm install @usezeno/tokens @usezeno/core
Real form controls
This form is made of Zeno elements inside a plain <form>. They carry a name and a value, take part in validation, and submit the way native controls do. Leave the email empty and press the button to see it.
The same form is built four times in the repository, in plain HTML, React, Vue and Svelte, and one shared set of tests runs against all four. See Frameworks.
What is here
39 elements
Each has a page written from its source: live examples, attributes, events, slots, parts, keyboard use and known gaps. See the elements.
279 tokens
Colour, type, spacing, radius, shadow and motion, as CSS custom properties with a light and a dark theme. See the tokens.
Where it stands
15 of the 39 elements have their own browser tests and are checked with axe-core. The others are only tested to render. No screen reader testing has been done. Read the accessibility statement.