CSS Utils v0.60.0 is now available - visit the showcase.

This release wraps up several smaller updates from the previous versions and brings the package closer to a more complete utility and component toolkit.

The focus of this update is on new UI components, better form controls, improved utility coverage and a cleaner color and z-index system.

Pagination

The biggest new addition in 0.60.0 is the new pagination component.

Pagination can be used to navigate through multiple pages of related content, for example in tables, lists or search results.

<nav class="pagination" aria-label="Pagination">
	<a class="pagination-item" href="#">Previous</a>
	<a class="pagination-item" href="#">1</a>
	<a class="pagination-item is-active" href="#" aria-current="page">2</a>
	<a class="pagination-item" href="#">3</a>
	<a class="pagination-item" href="#">Next</a>
</nav>

The default style is intentionally modern and lightweight. Instead of rendering every item like a bordered button, pagination items are borderless by default and use subtle hover styles with a clear active state.

This keeps pagination visually calm and avoids the classic heavy admin-panel look.

New form controls

Several form-related styles were added and split into dedicated documentation pages.

New and improved form controls include:

Inputs and textareas continue to use .form-control.

<input class="form-control" placeholder="your name" />

Native select elements can now use .form-select.

<select class="form-select">
	<option>Option one</option>
	<option>Option two</option>
</select>

Checkboxes and radios use .form-check together with .form-check-input.

<div class="form-check">
	<input class="form-check-input" id="privacy" type="checkbox" />
	<label class="form-label" for="privacy">Accept privacy policy</label>
</div>

Switches were added as a visual toggle style based on native checkbox inputs.

<div class="form-switch">
	<input class="form-switch-input" id="notifications" type="checkbox" checked />
	<label class="form-label" for="notifications">Enable notifications</label>
</div>

The main Forms page now acts more like an overview, while the individual form controls have their own showcase pages.

Alert component

The new alert component was added in 0.55.0.

Alerts are static feedback messages for important information, warnings or status updates.

<div class="alert bg-success" role="alert">
	<div class="alert-content">
		<p class="alert-title">Success</p>
		<p class="alert-message">Your changes were saved successfully.</p>
	</div>
</div>

Alerts use background utilities like .bg-success, .bg-warning or .bg-error instead of custom alert color classes.

Badge component

The badge component was added in 0.54.0.

Badges are small passive labels for counts, states or metadata.

<span class="badge bg-success">Active</span>
<span class="badge bg-warning">Pending</span>
<span class="badge bg-error">Failed</span>

Like alerts and toasts, badges use existing background utilities for color.

Order utilities

Order utilities were moved to their own file and responsive order utilities were added.

<div class="d-flex flex-column flex-md-row">
	<div class="order-2 order-md-1">Sidebar</div>
	<div class="order-1 order-md-2">Content</div>
</div>

This makes it easier to visually reorder flex or grid items across breakpoints.

z-index tokens and utilities

0.59.0 added z-index tokens and utility classes.

The new tokens make component layering easier to manage and avoid hardcoded z-index values inside components.

:root {
	--z-index-header: 1000;
	--z-index-tooltip: 1010;
	--z-index-overlay: 1040;
	--z-index-drawer: 1050;
	--z-index-toast: 1060;
}

Components like tooltip, overlay, drawer and toast can now rely on semantic z-index tokens.

Utility classes are also available for smaller local stacking changes.

Color cleanup

In 0.58.0, black and white were removed from the theme color map.

This means component variants like buttons, chips or icon buttons are no longer generated for black and white.

The reason is simple: black and white are raw colors, not semantic UI intent colors.

Theme colors like primary, success, warning and error are meant to generate interactive component variants with hover, active and focus states.

Black and white remain useful as raw utility colors.

<div class="bg-white text-black">Light block</div>
<div class="bg-black text-white">Dark block</div>

This keeps the system cleaner and avoids strange generated classes like .btn-white or .chip-black.

Fixes

0.58.1 fixed color setting behavior.

This was a smaller patch release and is included here for completeness.

Summary

CSS Utils v0.60.0 brings together several improvements:

Added pagination component
Added badge component
Added alert component
Added input, select, checkbox, radio and switch styles
Added responsive order utilities
Added z-index tokens and utilities
Removed black and white from generated theme component variants
Updated showcase pages

Overall, this release makes CSS Utils more complete as a small frontend style toolkit.

The package now provides a stronger foundation for layouts, forms, feedback messages, status labels and paginated interfaces while keeping the API simple and based on reusable utility classes and CSS variables.

Explore the full showcase here: https://css-utils.oardi.com