Open source · MIT · React and Rsbuild
Avior
A design system for React that builds a different site every time. Variables, helpers and components take their shape from your content, not from the framework.
git clone https://github.com/emagweb/avior.git my-siteUse it
Clone the repository, run two commands and build your site on a working base: routing, pages, light and dark mode, meta tags.
InstallationMake it yours
Colours, type, spacing and every component are variables. Change them in one file and the same markup becomes your site.
VariablesContribute
Missing a component? Write it so others can tune it with variables, and send a pull request. The engine is small enough to read in an evening.
How to contributeGrown from real sites
Avior was assembled from working sites into one system. Six projects with nothing in common, and each of them left something in it. The next ones are yours.
CraftFlow
Digital product agency
IdeaFlow
Open innovation platform
SmartCourses
Online courses for teachers
Rogovsky Studio
Fintech compliance and security
Job4Mom
Free courses for mothers
Proof
Resumes verified by colleaguesBuilt a site with Avior?
Send the link and a few words about the project. We look at every site and pick some for this page.
Three layers, nothing else
Every site on Avior is made of the same three things. What makes it different is how you set them.
One file decides how the site looks
Palette, type, spacing, radius, content width and every component setting live in inc/_variables.sass. Each value carries !default, so a project overrides only what it needs.
Read the docs$accent: $violet
$basic: 'Google Sans Flex', sans-serif
$content: 1248px
$radius: 8px
$card-radius: 12px
$card-padding: 24pxValues straight from the design
The mockup says 48px, the markup says p-y-48. Spacing, size, type, colour, alignment and a twelve-column grid, on a 4px step.
Read the docs<div className='row flex-24 aic'>
<div className='col-7 p-y-48'>…</div>
<div className='col-5'>…</div>
</div>What helpers cannot say
Card, tabs, accordion, alert, badge, code. Each one is a short Sass file driven by its own variables, so it fits any site without being rewritten.
Read the docs<a className='card' href='/docs'>
<div className='card-head'>…</div>
<p className='card-body'>…</p>
<span className='card-foot'>Read more</span>
</a>6 KB
of CSS reaches the browser
gzipped. Unused helpers are removed at build time.
100
Lighthouse on desktop
performance, accessibility, best practices and SEO.
4
runtime dependencies
React, React DOM, React Router and React Icons.
0
pages that wait for JavaScript
every route is prerendered to HTML.