Getting started

Install

LombokCSS is plain CSS + an optional plain-JS file, so it works with every package manager, bundler and framework. Pick whichever fits your stack.

Package managers (npm registry)

npm, Yarn and pnpm all read the same package — use whichever you have.

npm install lombokcss
yarn add lombokcss
pnpm add lombokcss

Then import the CSS once (and the optional JS for interactive components):

import "lombokcss/dist/lombok.min.css";
import "lombokcss/dist/lombok.js"; // optional

CDN (jsDelivr / unpkg)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lombokcss@0.1.9/dist/lombok.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/lombokcss@0.1.9/dist/lombok.js"></script>
<!-- or unpkg: https://unpkg.com/lombokcss@0.1.9/dist/lombok.min.css -->

Composer (PHP / Packagist)

composer require codinglombok/lombokcss
<!-- then reference vendor/codinglombok/lombokcss/dist/lombok.min.css -->

RubyGems (Rails / Sprockets)

# Gemfile
gem "lombokcss"

# config/initializers/assets.rb
Rails.application.config.assets.paths << Lombokcss.assets_path
# app/assets/stylesheets/application.css  ->  *= require lombok.min

Direct download

Grab dist/lombok.min.css (and optional dist/lombok.js) and link them.

Bundler & framework integrations

Because it ships standard .css and .js, there is no special plugin to install.

Vite

// main.js
import "lombokcss/dist/lombok.min.css";
import "lombokcss/dist/lombok.js";

Webpack

// requires css-loader + style-loader (or MiniCssExtractPlugin) in your config
import "lombokcss/dist/lombok.min.css";
import "lombokcss/dist/lombok.js";

Parcel

// Parcel handles CSS imports out of the box
import "lombokcss/dist/lombok.min.css";

Vue (and React, Svelte, etc.)

Import the CSS once in your entry file, then use the classes in templates.

// main.js (Vue entry)
import { createApp } from "vue";
import App from "./App.vue";
import "lombokcss/dist/lombok.min.css";
import "lombokcss/dist/lombok.js";
createApp(App).mount("#app");

<!-- App.vue -->
<button class="btn btn-primary">Save</button>

Set the style globally on <html>: document.documentElement.dataset.style = "neo-brutalism".

Bower is included for legacy setups (bower install lombokcss) but Bower is deprecated — prefer npm/Yarn/pnpm.

GitHub Packages

LombokCSS is also available on all 5 GitHub Packages registries:

# npm (GitHub Packages Registry)
npm install @codinglombok/lombokcss --registry=https://npm.pkg.github.com

# Container (Docker)
docker pull ghcr.io/codinglombok/lombokcss:latest

# NuGet
dotnet add package codinglombok.LombokCSS --source https://nuget.pkg.github.com/codinglombok/index.json

# Maven (pom.xml)
<groupId>com.github.codinglombok</groupId>
<artifactId>lombokcss</artifactId>

File structure

src/
  variables.css   token architecture (the contract)
  core.css        reset + base element styles (classless mode)
  themes.css      token values per design style
  components.css  components (read tokens only)
  utilities.css   atomic utilities + responsive prefixes
dist/
  lombok.css      bundled, readable
  lombok.min.css  bundled + minified (ship this)
  lombok.js       optional interactive behaviors

Classless mode

Plain semantic HTML is styled with zero classes — good for prose and prototypes.

A heading

A paragraph with a link, some inline code and a ⌘K shortcut.

Tokens are the contract; styles are signatures on it.

<h3>A heading</h3>
<p>A paragraph with a <a href="#">link</a>, some <code>inline code</code>
   and a <kbd>⌘</kbd><kbd>K</kbd> shortcut.</p>
<blockquote>Tokens are the contract; styles are signatures on it.</blockquote>

Build process

The dist files are produced with Lightning CSS:

cat src/variables.css src/core.css src/themes.css \
    src/components.css src/utilities.css > dist/lombok.css
npx lightningcss --minify --bundle dist/lombok.css -o dist/lombok.min.css

PostCSS equivalent: postcss-import + autoprefixer + cssnano. To shrink further, ship utilities.css only if you use utility classes, purge unused classes against your templates, and drop styles you don't use from themes.css.

Browser support & accessibility

Modern CSS with graceful fallbacks: :has(), :user-invalid, accent-color, backdrop-filter (opaque fallback via @supports), logical properties, native <dialog>/<details>. Components ship with visible focus rings, ARIA hooks and respect prefers-reduced-motion.