CSS Vars Framework ships as a single stylesheet. There's no package to install and no build step to configure — add one link tag and start writing markup.
<link rel="stylesheet" href="https://cdn.cssvars.com/cssvars.css">That's the entire setup. Every component and utility class in
this documentation works immediately, in every browser that supports CSS custom properties
and @layer.
Every visual decision in the framework reads from a small set
of custom properties defined in :root. Rebrand the whole site by overriding
them in your own stylesheet, loaded after the CDN link:
:root {
--color-1: #1a56ff;
--default-border-radius: 0.75rem;
}Tip: override tokens, not classes. Rather than writing a
new rule to change a button's background color, override
--control-bg instead so every component that reads it updates together.
The stylesheet declares its layer order up front, so your own
overrides — loaded in the implicit unlayered bucket — always win without
needing !important:
@layer theme, style, base, layout, components, components-advanced, utilities, utilities-advanced, overrides;