CSS Vars Framework & UI Kit

Simplicity, Power, and Performance

Easy to use and customize, 100's of pure CSS UI elements to build light-weight HTML pages fast

About

CSS Vars is built to provide developers with a clean, customizable, and effective front-end solution by linking one stylesheet. Customize styles using variables, use hundreds of reusable UI components, and build elegant and fast-loading web apps without extra bloat, no installs, setup, or config files. Please, visit https://cssvars.com

Philosophy

Simplicity

Link one CSS file, and you're ready to go. Customize effortlessly with CSS variables, no complicated setups or installs required.

Power

Access hundreds of free and customizable UI elements – from complete layouts and typography to advanced icons and interactive components. Create rich experiences with just HTML and CSS.

Performance

With no dependencies, a minuscule file size ensures rapid loading times, enhancing user experience, mobile performance, SEO, and conversions.

Features

CSS Variables Based

Simple to implement and modify. Set your styles simply by adjusting variables and using ready-made classes.

Instant Integration

Just link one CSS file. No npm install, webpack configuration, build scripts, nor package.json setup.

Pure HTML CSS

All web site elements without JS. It's built for better performance purposes, all common UI elements

Fast Loading

A small CSS file makes wonders. Just 10kb (minified + gzipped), including the UI kit code

Scoped CSS

Can be used with other frameworks. It can be used, as a framework and a library. Works with other frameworks

Responsive & Mobile first

Much more than just a grid. Responsive images, videos, galleries, tables, menus, maps, frames, embeds

All Popular Styles

Apply by adding one class, any of the most 20 web design styles: minimalist, modern, material, flat, brutal, glass, retro, neon, cyberpunk, luxury, playful, modular, system-ui, and more.

Themes

14 themes, to change theme change the variables in the CSS file, you can choose one of the pre-built themes, or change the variables to match your needs

Dark & Light Themes

Pre-built dark & light themes and you can enable auto detect theme switcher based on the user's browser settings

100's of Free UI Elements

All needed elements are ready. Typography, buttons, cards, icons, tabs, carousel, masonry, Flex gallery ...

Icons Included

Advanced styles for SVG icons. Add and style SVG icons without icon libraries, still can use libraries.

Free & Open Source

Built with love to be used. Free framework, UI elements, & themes. Download, use, enjoy & share

Read the documentation on our website https://cssvars.com