Skeleton Line

Installation

Custom Widths

Control the randomized width range for more natural-looking skeletons.

Custom Height

Override the default height using Tailwind utility classes via className. The default height is 0.5rem.

Block Height

Use blockHeight to set the height of a container that vertically centers the skeleton line. Useful when replacing text of a known line height. Accepts a number (treated as px) or any CSS string value.

Card Loading State

Use skeleton lines to create loading states for cards and content areas.

API Reference

<table class="w-full text-sm">
  <thead>
    <tr class="border-b border-kumo-hairline">
      <th class="px-4 py-3 text-left font-semibold">Prop</th>
      <th class="px-4 py-3 text-left font-semibold">Type</th>
      <th class="px-4 py-3 text-left font-semibold">Default</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">minWidth</td>
      <td class="px-4 py-3 font-mono text-xs">number</td>
      <td class="px-4 py-3 font-mono text-xs">30</td>
    </tr>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">maxWidth</td>
      <td class="px-4 py-3 font-mono text-xs">number</td>
      <td class="px-4 py-3 font-mono text-xs">100</td>
    </tr>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">minDuration</td>
      <td class="px-4 py-3 font-mono text-xs">number</td>
      <td class="px-4 py-3 font-mono text-xs">1.3</td>
    </tr>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">maxDuration</td>
      <td class="px-4 py-3 font-mono text-xs">number</td>
      <td class="px-4 py-3 font-mono text-xs">1.7</td>
    </tr>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">minDelay</td>
      <td class="px-4 py-3 font-mono text-xs">number</td>
      <td class="px-4 py-3 font-mono text-xs">0</td>
    </tr>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">maxDelay</td>
      <td class="px-4 py-3 font-mono text-xs">number</td>
      <td class="px-4 py-3 font-mono text-xs">0.5</td>
    </tr>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">blockHeight</td>
      <td class="px-4 py-3 font-mono text-xs">string | number</td>
      <td class="px-4 py-3 font-mono text-xs">-</td>
    </tr>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">className</td>
      <td class="px-4 py-3 font-mono text-xs">string</td>
      <td class="px-4 py-3 font-mono text-xs">-</td>
    </tr>
  </tbody>
</table>

Kumo