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

Tailwind CSS

To use Varvara CSS with Tailwind CSS, first install the package:

npm i varvara-css

Make sure Tailwind CSS is already configured in your project.

Tailwind CSS v4

Register the plugin in your main stylesheet:

@import 'tailwindcss';
@plugin 'varvara-css';

Tailwind CSS v3

Add the plugin to your tailwind.config.js:

import varvara from 'varvara-css'

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

NPM

You can also integrate Varvara CSS into your own CSS build process.

Install the package:

npm i varvara-css

Then import it into your stylesheet:

@import 'varvara-css/css';

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

CDN

For quick setups, you can load Varvara CSS directly from a CDN:

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

Or include it in your HTML:

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

Both methods include all CSS variables and components.

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 {
  --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é