Splendid svelte

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:

  1. The required styles can be quite complex
  2. Our styles are easily customizable
@import '@splendidlabz/styles/svelte';

Overriding basic styles

We’ve written our styles in the @utilities layer, so you can override them easily with an unnamed layer — just by writing CSS normally! Easy peasy!

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

If you use CSS layers as well, just make sure you write your styles in the layer after @utilities.

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 -->
<Drawer
  class="Class for the Trigger Button"
  iconClass="Class for the SVG Icon"
/>