varvara-css

Varvara CSS

Varvara CSS is a library of prebuilt UI components designed for smooth and simple browsing experiences, implemented using simple class names and easily customizable with CSS Variables.

It can be used alongside Tailwind CSS and with any JavaScript framework.

Install

CDN

The easiest way to use Varvara CSS is through a CDN:

@import url('https://unpkg.com/varvara-css');

Alternatively, add this line to the head tag of your HTML:

<link href="https://unpkg.com/varvara-css" rel="stylesheet" type="text/css" />

You'll have access to both variables and components from the same import.

NPM

Another option is to add Varvara CSS to your own build process:

npm i varvara-css

After, you have to import the package into your stylesheet:

@import 'varvara-css/css';

[!TIP] An @import rule must be defined at the top of the stylesheet

Tailwind v3 Plugin

Finally, you can extend Tailwind CSS with Varvara CSS.

Install Varvara CSS via NPM:

npm i varvara-css

Make sure Tailwind CSS is also installed.

Next, modify your tailwind.config.js file to include the Varvara CSS plugin:

import varvara from 'varvara-css'

module.exports = {
  plugins: [varvara]
  // ...
}

Your Tailwind setup is now extended with Varvara CSS, ready to use its variables and components in your project.

Usage

Once installed Varvara CSS, copy and paste components classes to get started.

Simply add a component class like this:

<button class="va-button">Example button</button>

Customize

Each component already has its own CSS variables, with basic properties such as padding, background color, border, etc... You can modify to customize it.

--va-button-font-size: var(--va-font-size-2);
--va-button-padding: var(--va-space-3);
--va-button-border-width: var(--va-border-width);
--va-button-border-color: var(--va-border-color);
--va-button-background-color: var(--va-background-color-default);

Also you can override the styles if you prefer:

.va-button {
  font-family: 'Rubik Variable', sans-serif;
}

Changelog

For a detailed record of changes, new features, and fixes in each version, see our CHANGELOG.md.

Contributing

Feel free to explore, test, and provide feedback. Your contribution is highly appreciated as we work towards improving and stabilizing the project.

License

MIT License © 2024 Marc Mariné