Presets - Skeleton

Presets are complex utility classes that combine various Skeleton primitives. Allowing you quickly style buttons, badges, cards, and more. Create any combination of styles by mixing Skeleton Presets 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 {
    @apply bg-gradient-to-br from-secondary-500 to-tertiary-500 text-white;
  }
</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.

Built-Ins

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

Create a Preset

Presets are pre-generated combination of Skeleton and Tailwind primitives, which means you can abstract these to create your own set. Add these classes to your global stylesheet and use anywhere you would use the built-in presets. Use the preset-{foo} naming scheme to keep things standardized.

<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 {
    @apply bg-success-100 text-success-900;
  }
  .preset-input-error {
    @apply bg-error-100 text-error-900;
  }
</style>

Gradient Presets

Tailwind provides a number of powerful Gradient utility classes. Combine these to create your own unique gradient presets.

<div class="w-full grid grid-cols-3 gap-4">
  <!-- 1 -->
  <div class="card preset-gradient-one flex justify-center items-center p-10">
    <span class="font-bold">1</span>
  </div>
  <!-- 2 -->
  <div class="card preset-gradient-two flex justify-center items-center p-10">
    <span class="font-bold">2</span>
  </div>
  <!-- 3 -->
  <div class="card preset-gradient-three flex justify-center items-center p-10">
    <span class="font-bold">3</span>
  </div>
</div>

<style lang="postcss">
  /* Create a custom preset in your global stylesheet */
  .preset-gradient-one {
    @apply bg-gradient-to-br from-primary-500 to-tertiary-500 text-white;
    @apply hover:bg-gradient-to-tl;
    @apply text-primary-contrast-500;
  }
  .preset-gradient-two {
    @apply bg-gradient-to-br from-error-500 to-warning-500 text-white;
    @apply hover:bg-gradient-to-tl;
    @apply text-error-contrast-500;
  }
  .preset-gradient-three {
    @apply bg-gradient-to-br from-success-500 to-warning-500 text-white;
    @apply hover:bg-gradient-to-tl;
    @apply text-success-contrast-500;
  }
</style>