Styling components

Every component in this library is headless so you can style them as you like.

Basic Styles

We provide basic styles for each component via Splendid Styles. We recommend you use these styles over building your own because:

The required styles can be quite complex
Our styles are easily customizable

@use '@splendidlabz/styles';

@import '@splendidlabz/styles/css';

Note

The code above loads the entire styles library into your project. If you only wish to include basic styles per component, please see the style tab of that component for instructions.

Overriding basic styles

Overriding our basic styles is extremely easy because we have taken the time to ensure all our styles use a specificity of [0,1,0].

In other words, you would be able to override almost anything with just a single class.

.Component {
  /* Your styles here ... */
  /* This will override ours without hacking specificity */
}

Custom Styles

We support styling with both standard CSS and Tailwind, because we find both methods useful and valuable.

Using CSS

You will find the information you need to customize styles for the component in its styles tab. This includes:

The HTML output (with variations, if any)
The Classes that are being used

<!-- Example for Checkbox -->
<div class="Checkbox">
  <div class="Checkmark">
    <input class="Field" type="checkbox" ... />
    <!-- SVG for the checkmark -->
    <svg>...</svg>
  </div>

  <!-- label -->
  <label class="Label" for="{id}">{label}</label>
</div>

Using Tailwind

Each component contains properties you can use to insert Tailwind classes into the HTML. Information about available properties can also be found in the styles tab.

<!-- Example for DrawerTrigger -->
<DrawerTrigger
  class="Class for the Trigger Button"
  iconClass="Class for the SVG Icon"
/>