Customization Basics

The lism-css package lets you customize the props / tokens / traits your components accept, the classes and breakpoints they output, and the size of your production CSS. There are two entry points for configuration — lism.config.js (requires @lism-css/plugin) and SCSS variables (no config file needed) — and which one you use depends on your build setup. You can also pair either one with CSS Purge to slim down your production CSS.

Entry points

Approach	Best for	Page
`lism.config.js`	Setups using `@lism-css/plugin` (recommended). With Vite, Astro, or Next.js it’s reflected automatically via the bundler integration; otherwise, build the CSS with the bundled CLI	lism.config.js
Overriding SCSS variables	Setups that load `lism-css/scss` directly, without `lism.config.js`. Use these values from components via `:value` notation	SCSS Customization
CSS Purge	When you want to strip unused classes from your production CSS to keep it lightweight. Can be combined with either of the above	CSS Purge

If you are using Vite or Astro, the single integrated plugin from @lism-css/plugin enables lism.config.js loading, automatic CSS reflection, and type generation all at once. Start with lism.config.js as your entry point.

Switching to the @layer-free builds or the full full.css build isn’t a configuration option — it’s a choice of which file you load. See CSS File Types.