Skip to content


Repository files navigation

Dashvar Logo Banner

Build GitHub license GitHub release npm version

CSS Variables Library. Strong defaults for good looking designs. Inspired by Tailwind CSS.

Full documentation

Getting started

We recommend you follow the getting started page.


Usage example:

.component {
  color: var(--gray-800);
  font-size: var(--font-size-2); /* 1rem / 16px */
  line-height: var(--line-height-2); /* 1.5rem / 24px */
  padding: var(--size-5)); /* 1.25rem / 20px	*/

/* If preferred, you can use @media queries */
.md .component {
  padding: var(--size-10); /* 2.5rem / 40px	*/

Override variables

You can override any of the variables with your own if you need to:

:root {
  /* Just don't ever do this exact ugly override ;) */
  --blue-500: rgb(0, 0, 255);


Please, we welcome any contributions to the project. Together, we can build a great, yet simple library for the long run.

Support the project on the Dashvar GitHub Sponsors page.

The project is maintained, time and financially wise, by me (Carlos Baraza). I live in London, UK. And I strive to create an organization that can return some value to society in the best way I know how, technology.

Unfortunately, creating Open Source Software, although a great philanthropic exercise for the mind and the soul, has some disadvantages in comparison with proprietary software. I would love to continue providing value, and your contribution really makes a difference, even if it is really small.

The funds will be used to maintain and create useful projects for the development community.