---
title: Style Utilities
description:
  Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
  See the [installation instructions](#installation) to use style utilities in your project.
layout: docs
---

<p>
{% markdown %}
  {{ description }}
{% endmarkdown %}
</p>

<div class="search-list">
  <wa-input class="search-list-input" type="search" placeholder="Search style utilities" autofocus>
    <wa-icon name="search" slot="start"></wa-icon>
  </wa-input>

  <section class="search-list-grid">
    {% for page in collections.styleUtilities | sort(false, false, 'data.title') %}
      <a href="{{ page.url }}">
        <wa-card with-header="" appearance="outlined">
          <div slot="header">
            {# Look for an icon based on the page name #}
            {% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
            {% set iconContent %}{% include iconPath ignore missing %}{% endset %}
            {% if iconContent.trim() %}
              {# An icon exists! Show it #}
              {{ iconContent | safe }}
            {% else %}
              {# Fallback to the placeholder #}
              {% include 'svgs/thumbnail-placeholder.njk' %}
            {% endif %}
          </div>
          <span class="page-name">{{ page.data.title }}</span>
        </wa-card>
      </a>
    {% endfor %}
  </section>
  <div class="search-list-empty" hidden>
    No results found
  </div>
</div>

<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>

{% markdown %}
## Using {{ title }}
{% endmarkdown %}

<wa-tab-group>
  <wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
  <wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
  <wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>

  <wa-tab-panel name="cdn">
{% markdown %}
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
2. Next to **Features**, select the **CSS utilities** checkbox.
3. **Save Changes** to immediately update anywhere you're using your project.
{% endmarkdown %}
  </wa-tab-panel>

  <wa-tab-panel name="npm">
{% markdown %}
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), import the following stylesheet in your project:

```js
import '@awesome.me/webawesome/dist/styles/webawesome.css';
```

Or, if you only want CSS utility classes, import a theme and the utilities individually:

```js
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/styles/utilities.css';
```
{% endmarkdown %}
  </wa-tab-panel>

  <wa-tab-panel name="self-hosted">
{% markdown %}
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:

```html
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
```

Or, if you only want CSS utility classes, include a theme and the utilities individually:

```html
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<link rel="stylesheet" href="/dist/styles/utilities.css" />
```
{% endmarkdown %}
  </wa-tab-panel>
</wa-tab-group>
