Installation

Get Stoneware into your project in seconds.

Option 1: Full Bundle

Download css file and drop it into your project.

Then add it to your HTML:

<link rel="stylesheet" href="stoneware.css">

Includes:

CSS Reset
Design Tokens (CSS Variables)
Base Element Styles
All Component Classes (sw- prefixed)
Utility Classes
Dark Mode Support

Option 2: Tokens Only

Just the CSS custom properties for building your own components.

Download stoneware-tokens.css

Use tokens in your own CSS:

.my-button {
  background: var(--sw-primary);
  color: var(--sw-text-inverse);
  padding: var(--sw-space-3) var(--sw-space-5);
  border-radius: var(--sw-radius-lg);
}

Option 3: Copy Individual Components

Each component documentation page shows the exact CSS. Copy what you need.

This works best when you've already loaded stoneware-tokens.css for the variables.

Enable Dark Mode

Add data-theme="dark" to your HTML element:

<html data-theme="dark">

All tokens automatically adapt. No additional CSS required.

Browser Support

Stoneware uses CSS custom properties and requires:

Chrome/Edge 88+
Firefox 78+
Safari 14+

No IE11 support.