Presets - Skeleton

Presets are pre-defined styles that allow you to quickly and easily style buttons, badges, cards, and more. Create by mixing Skeleton and Tailwind primitives.

<script lang="ts">
  import IconBookmark from 'lucide-svelte/icons/bookmark';
  const diagramCircle = 'preset-tonal w-8 aspect-square flex justify-center items-center rounded-full';
</script>

<div class="grid grid-cols-2 md:grid-cols-4 gap-10">
  <!-- 1. Filled -->
  <div class="flex flex-col items-center gap-4">
    <button type="button" class="btn preset-filled-primary-500">Filled</button>
    <div class={diagramCircle}>1</div>
  </div>
  <!-- 2. Tonal -->
  <div class="flex flex-col items-center gap-4">
    <button type="button" class="btn preset-tonal-primary">Tonal</button>
    <div class={diagramCircle}>2</div>
  </div>
  <!-- 3. Outlined -->
  <div class="flex flex-col items-center gap-4">
    <button type="button" class="btn preset-outlined-primary-500">Outlined</button>
    <div class={diagramCircle}>3</div>
  </div>
  <!-- 4. Elevated -->
  <div class="flex flex-col items-center gap-4">
    <button type="button" class="btn preset-filled-surface-100-900 shadow-xl">Elevated</button>
    <div class={diagramCircle}>4</div>
  </div>
  <!-- 5. Ghost -->
  <div class="flex flex-col items-center gap-4">
    <button type="button" class="btn hover:preset-tonal">Ghost</button>
    <div class={diagramCircle}>5</div>
  </div>
  <!-- 6. Ghost (Icon) -->
  <div class="flex flex-col items-center gap-4">
    <button type="button" class="btn hover:preset-tonal-primary">
      <IconBookmark className="size-6" />
    </button>
    <div class={diagramCircle}>6</div>
  </div>
  <!-- 7. Gradient -->
  <div class="flex flex-col items-center gap-4">
    <button type="button" class="btn preset-gradient">Gradient</button>
    <div class={diagramCircle}>7</div>
  </div>
</div>

<style lang="postcss">
  /* Create a custom preset in your global stylesheet */
  .preset-gradient {
    background-image: linear-gradient(45deg, var(--color-secondary-500), var(--color-tertiary-500));
    color: var(--color-primary-contrast-500);
  }
</style>

Filled - a filled preset of the primary brand color.
Tonal - a tonal preset of the primary brand color.
Outlined - an outlined preset of the primary brand color.
Elevated - mixes a filled preset with a shadow.
Ghost - has no style by default, but shows a tonal preset on hover.
Ghost Icon - has no style by default, but shows a branded tonal preset on hover.
Gradient - a custom preset generated using Tailwind gradient primitives.

Enabling Presets

Skeleton provides an optional set of presets for filled, tonal, and outlined styles. To enable these, simply add the following import to your global stylesheet. This is recommended for new users to Skeleton.

@import '@skeletonlabs/skeleton/optional/presets';

Skeleton Presets

Skeleton’s provides the following opinionated set of styles, including accessible backgrounds and text colors.

Filled

preset-filled-{color}-{lightModeShade}-{darkModeShade}

(neutral)

950-50

900-100

800-200

700-300

600-400

500

400-600

300-700

200-800

100-900

50-950

<div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-2">
  {/* Neutral */}
  <div class="preset-filled flex items-center justify-center p-4">(neutral)</div>
  {/* Colors */}
  <div class="preset-filled-primary-950-50 flex items-center justify-center p-4">950-50</div>
  <div class="preset-filled-primary-900-100 flex items-center justify-center p-4">900-100</div>
  <div class="preset-filled-primary-800-200 flex items-center justify-center p-4">800-200</div>
  <div class="preset-filled-primary-700-300 flex items-center justify-center p-4">700-300</div>
  <div class="preset-filled-primary-600-400 flex items-center justify-center p-4">600-400</div>
  <div class="preset-filled-primary-500 flex items-center justify-center p-4">500</div>
  <div class="preset-filled-primary-400-600 flex items-center justify-center p-4">400-600</div>
  <div class="preset-filled-primary-300-700 flex items-center justify-center p-4">300-700</div>
  <div class="preset-filled-primary-200-800 flex items-center justify-center p-4">200-800</div>
  <div class="preset-filled-primary-100-900 flex items-center justify-center p-4">100-900</div>
  <div class="preset-filled-primary-50-950 flex items-center justify-center p-4">50-950</div>
</div>

Tonal

preset-tonal-{color}

(neutral)

primary

secondary

tertiary

success

warning

error

surface

<div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-2">
  {/* Neutral */}
  <div class="preset-tonal flex items-center justify-center p-4">(neutral)</div>
  {/* Colors */}
  <div class="preset-tonal-primary flex items-center justify-center p-4">primary</div>
  <div class="preset-tonal-secondary flex items-center justify-center p-4">secondary</div>
  <div class="preset-tonal-tertiary flex items-center justify-center p-4">tertiary</div>
  <div class="preset-tonal-success flex items-center justify-center p-4">success</div>
  <div class="preset-tonal-warning flex items-center justify-center p-4">warning</div>
  <div class="preset-tonal-error flex items-center justify-center p-4">error</div>
  <div class="preset-tonal-surface flex items-center justify-center p-4">surface</div>
</div>

Outlined

preset-outlined-{color}-{shade}-{shade}

(neutral)

950-50

900-100

800-200

700-300

600-400

500

400-600

300-700

200-800

100-900

50-950

<div class="grid w-full grid-cols-2 gap-2 lg:grid-cols-4">
  {/* Neutral */}
  <div class="preset-outlined flex items-center justify-center p-4">(neutral)</div>
  {/* Colors */}
  <div class="preset-outlined-primary-950-50 flex items-center justify-center p-4">950-50</div>
  <div class="preset-outlined-primary-900-100 flex items-center justify-center p-4">900-100</div>
  <div class="preset-outlined-primary-800-200 flex items-center justify-center p-4">800-200</div>
  <div class="preset-outlined-primary-700-300 flex items-center justify-center p-4">700-300</div>
  <div class="preset-outlined-primary-600-400 flex items-center justify-center p-4">600-400</div>
  <div class="preset-outlined-primary-500 flex items-center justify-center p-4">500</div>
  <div class="preset-outlined-primary-400-600 flex items-center justify-center p-4">400-600</div>
  <div class="preset-outlined-primary-300-700 flex items-center justify-center p-4">300-700</div>
  <div class="preset-outlined-primary-200-800 flex items-center justify-center p-4">200-800</div>
  <div class="preset-outlined-primary-100-900 flex items-center justify-center p-4">100-900</div>
  <div class="preset-outlined-primary-50-950 flex items-center justify-center p-4">50-950</div>
</div>

Custom Presets

For advanced users, we recommend disabing the Skeleton presets in favor of custom-generated presets. This ensures you retain full control over the look and feel of each element. Consider these best practices when creating presets.

Custom presets are only limited by your imagination.
Use any combination of Skeleton or Tailwind-provided primitive to generate a preset.
Apply presets to any relevant element, including: buttons, cards, inputs, and more.
Use a set naming convention, such as preset-{foo} to keep things standardized.
Implement all presets in using Tailwind’s @utility directive in your global stylesheet.
Abstrast presets to a stylesheet or NPM package for shared used between projects.

<div class="w-full max-w-[320px] grid grid-rows-3 gap-4">
  <input type="text" class="input" value="Default Input State!" />
  <input type="text" class="input preset-input-success" value="Valid Input State!" />
  <input type="text" class="input preset-input-error" value="Invalid Input State!" />
</div>

<style lang="postcss">
  /* Add each custom preset to your global stylesheet. */
  .preset-input-success {
    background-color: var(--color-success-100);
    color: var(--color-success-900);
  }
  .preset-input-error {
    background-color: var(--color-error-100);
    color: var(--color-error-900);
  }
</style>

Gradient Presets

Tailwind provides a number of powerful Gradient utility classes that can be used to generate presets.

Card

<div class="w-full space-y-4">
  <div class="grid grid-cols-3 gap-4">
    <button class="btn preset-gradient-one hover:brightness-125">Button</button>
    <button class="btn preset-gradient-two hover:brightness-125">Button</button>
    <button class="btn preset-gradient-three hover:brightness-125">Button</button>
  </div>
  <div class="grid grid-cols-3 gap-4 text-center">
    <div class="card p-4 preset-gradient-one">Card</div>
    <div class="card p-4 preset-gradient-two">Card</div>
    <div class="card p-4 preset-gradient-three">Card</div>
  </div>
</div>

<style lang="postcss">
  /* Create a custom preset in your global stylesheet */
  .preset-gradient-one {
    background-image: linear-gradient(45deg, var(--color-primary-500), var(--color-tertiary-500));
    color: var(--color-primary-contrast-500);
  }
  .preset-gradient-two {
    background-image: linear-gradient(45deg, var(--color-error-500), var(--color-warning-500));
    color: var(--color-error-contrast-500);
  }
  .preset-gradient-three {
    background-image: linear-gradient(45deg, var(--color-success-500), var(--color-warning-500));
    color: var(--color-success-contrast-500);
  }
</style>

Glass Presets

TODO: examples coming soon!