Introduction
Avior is a design system for React and Rsbuild. One engine, and every site built on it looks like its own content.
Edit page
Quick start
git clone https://github.com/emagweb/avior.git my-site
cd my-site
yarn
yarn startThe site opens on localhost:3000. Then continue with installation.
What Avior is
Most frameworks make sites that look related. Avior is built the other way round: it gives you the means and no look of its own. A bakery, a law firm and a developer tool built on it should have nothing in common except clean code.
It grew out of real projects. Each site added what it needed, and what proved useful everywhere became part of the system.
Three layers
- Variables decide how the site looks: palette, type, spacing, radius, widths.
- Helpers take values straight from the design:
p-y-48is 48px top and bottom. - Components cover what helpers cannot, and each one is tuned by its own variables.