CSS Vars gives you a utility-first foundation, a set of ready-made components built on top of it, and a semantic token layer — surface, panel, control, and input variables — that sits above the raw palette. Change a token, and every card, button, and form field that references it updates with it. No build step, no config files, just one stylesheet.
Simplicity
One CSS file. No dependencies, no tooling, no installs.
Instant Integration
Just link one CSS file
No npm install, no bundler config, no build scripts or package.json to maintain — drop in the stylesheet and start building.
Pure HTML & CSS
Every common UI element, no JS required
Menus, tabs, accordions, dropdowns, and modals all run on checkbox and radio toggles, so there's less to load and less to break.
Consistency
One design language. Change a token, and every component and utility using it updates.
Design Tokens, Not Guesswork
One set of variables runs the whole UI
Surface, panel, control, and input tokens sit above the color palette. Change one variable and every card, button, and field that references it follows.
Utility-First Core
Every property is a composable class
Spacing, color, shadow, and layout are all single-purpose classes you combine directly in markup — no custom CSS to write or maintain.
Component-Ready
Cards, panels, dropdowns & menus, built in
Common patterns — cards, panels, sidebars, dropdowns, pills, chips — ship as ready classes, composed from the same utilities, checkbox-driven, no JavaScript required.
Modern CSS
Built on today's CSS, not yesterday's workarounds, nor legacy tooling.
Modern CSS Under the Hood
Built on the platform, not around it
Cascade layers keep specificity predictable, color-mix() handles alpha, and clamp() drives fluid spacing instead of fixed breakpoints.
Scoped or Global
Plays well with other frameworks
Use CSS Vars as the whole framework, or scope it alongside an existing codebase without style collisions.
Responsive & Fluid
Much more than a fixed grid
A clamp()-based spacing scale flexes with the viewport, alongside responsive images, galleries, tables, menus, maps, and embeds.
Performance
Less dependencies, less code to load, less code to run, less code to maintain.
Fast Loading
A small stylesheet makes wonders
A compact, minified core — utilities, components, and tokens included — keeps first paint quick even on the busiest page.
Icons Included
Advanced styling for SVG icons
Fill, size, and background utilities style inline SVG icons directly — no icon library required, though you're free to use one.
Lightweight
14KB gzipped.
A lightweight, minified core with utilities, components, and design tokens included, no build tools required.
Free & Open Source
Built with love, meant to be shared
Framework, components, and theme presets under an MIT license — download, use, extend, and share freely.
100+ page templates
Free templates for different topics
Full page templates built entirely from CSS Vars utilities and components, ready to customize by swapping tokens instead of rewriting markup.
Explore Layouts
UI Elements
Build with our elements
Cards, panels, dropdowns, pills, chips, and dozens more — free, quality UI elements, fully customizable through CSS variables and battle-tested on real sites.
Explore UI ElementsBuild quality responsive websites quickly
No JavaScript or other libraries needed — pure HTML & CSS, styled by variables, to build great websites.