LombokCSS

Switch the look, not the HTML. A token-first component framework: drop a class, get a working component — then re-skin the whole page by changing one attribute.

Use the controls at the top to switch design style, dark mode and RTL. Every example on these pages reacts live, and your selection follows you between pages.

Component-based

Ready-made buttons, cards, forms, modals, navbars and more.

Token-driven

Five design styles + dark + RTL, all from CSS variables.

Tiny

~9.5 KB gzipped for the full build. JS is optional.

Quick start

Drop in the CDN links and start writing markup:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lombokcss/dist/lombok.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/lombokcss/dist/lombok.js"></script>

live

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline">Outline</button>
<span class="badge badge-success">live</span>

Three pillars

Component classes give you Bootstrap-style speed. Utility classes give you Tailwind-style control. The token layer keeps the whole thing Pico-small and lets a single data-style attribute restyle everything without touching your HTML.