Styling

Skel UI is fully customizable and aims to simplify the styling of skeletons using CSS.

Animation

Skel UI defaults to using a shimmer animation effect for skeletons, but it also includes a built-in pulse animation.

<body className="skel-ui-pulse">...</body>
<body className="">...</body>

Custom animation

If the built-in animations do not meet your requirements, Skel UI offers the flexibility to create custom animations.

[data-skel-item][data-loading="true"] {
  animation:  /* Put your animation *;
}

Colors & Radius

Overrides the skeleton's default colors and border-radius with CSS variables.

global.css
:root {
  --skel-ui-color1: #a1a1aa;
  --skel-ui-color2: #e4e4e7;
  --skel-ui-radius: 0.25rem;
}
 
/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --skel-ui-color1: #27272a;
    --skel-ui-color2: #09090b;
  }
}

Data attribute

Both Root and Item have a data-loading attribute to create styles based on the loading state.

/* This style will be applied during loading. */
.card-title[data-loading="true"] {
  width: 5rem;
}
 
/* This style will be applied after loading is done. */
.card-title[data-loading="false"]:hover {
  background: #f97316;
}

Previous

Components

Next

Tailwind CSS

On this page

AnimationCustom animationColors & RadiusData attribute