Get started

Install

CSS Utils ships as SCSS. Install the package and, if your toolchain does not already provide it, Dart Sass:

npm i @oardi/css-utils
npm i -D sass

Add the styles

Load CSS Utils once through your application’s global stylesheet:

// styles.scss
@use '@oardi/css-utils';

The package already defines the cascade order reset, base, components, then utilities, so no separate layer setup is required.

Build your first interface

Utilities and component classes can be combined without additional CSS:

<div class="card">
	<div class="card-body d-flex flex-column gap-2">
		<p class="h5 card-title">Welcome</p>
		<p class="mb-0 text-muted">Your CSS Utils setup is ready.</p>
		<button class="btn btn-primary btn-solid" type="button">Continue</button>
	</div>
</div>

This renders as:

Customize the design

Override global design tokens in your own stylesheet to match your application:

:root {
	--primary: #0057ff;
	--primary-hover: #0047d6;
	--primary-active: #003cad;
	--on-primary: #ffffff;
	--action-color: #0047d6;
	--action-color-hover: #003cad;
	--action-color-active: #002f87;
	--focus-outline-color: var(--action-color);
	--border-radius: 0.5rem;
}

--primary* defines filled surfaces, while --action-color* defines interactive foregrounds such as links and primary text or outline buttons. Keeping them separate allows a soft brand surface to use darker, contrast-compliant actions without component selector overrides.

Learn more about utilities, components and design tokens.

Try online

Explore CSS Utils without installing anything in the StackBlitz sandbox:

Open on StackBlitz

Browser support

CSS Utils supports Chrome/Edge 122+, Firefox 128+ and Safari 18+, including iOS and iPadOS. Older browsers and Internet Explorer are not supported.