Skeleton
Skeleton is a placeholder to show a loading state and the expected shape of a component.
Completeness: styles-sufficient
The stylesheet is the whole component. There is no keyboard map beyond what the native element already does and nothing sets state at runtime that the CSS keys on, so a CSS-only port reproduces it.
Import
import { Skeleton } from '@blakeui/react';Usage
import {Skeleton} from "@blakeui/react";
export function Basic() {
return (
<div className="shadow-panel w-[250px] space-y-5 rounded-lg bg-transparent p-4">Text Content
import {Skeleton} from "@blakeui/react";
export function TextContent() {
return (
<div className="w-full max-w-md space-y-3">User Profile
import {Skeleton} from "@blakeui/react";
export function UserProfile() {
return (
<div className="flex items-center gap-3">List Items
import {Skeleton} from "@blakeui/react";
export function List() {
return (
<div className="w-full max-w-sm space-y-4">Animation Types
Shimmer
Pulse
None
import {Skeleton} from "@blakeui/react";
export function AnimationTypes() {
return (
<div className="grid w-full max-w-xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">Grid
import {Skeleton} from "@blakeui/react";
export function Grid() {
return (
<div className="grid w-full max-w-xl grid-cols-3 gap-4">Single Shimmer
A synchronized shimmer effect that passes over all skeleton elements at once. Apply the skeleton--shimmer class to a parent container and set animationType="none" on child skeletons.
import {Skeleton} from "@blakeui/react";
export function SingleShimmer() {
return (
<div className="skeleton--shimmer relative grid w-full max-w-xl grid-cols-3 gap-4 overflow-hidden rounded-xl">Styling
Global Animation Configuration
Set a default animation for every Skeleton in your application with the --skeleton-animation theme variable. Scope it to :root, or to a light/dark selector to vary it by theme — see Theming.
| Value | Effect |
|---|---|
shimmer | Gradient sweep across the placeholder (default) |
pulse | Opacity pulse |
none | Static placeholder |
The animationType prop overrides this on individual components.
Passing Tailwind CSS classes
import { Skeleton } from '@blakeui/react';
function CustomSkeleton() {
return (
<Skeleton className="h-20 w-32 rounded-full" />
);
}Customizing the component classes
To customize the Skeleton component classes, you can use the @layer components directive.
Learn more.
A worked example is in Styling.
blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.
CSS Classes
The Skeleton component uses these CSS classes (View source styles):
Base Class
.skeleton - Base skeleton styles with background and rounded corners
Animation Variant Classes
.skeleton--shimmer- Adds shimmer animation with gradient effect (default).skeleton--pulse- Adds pulse animation using Tailwind's animate-pulse.skeleton--none- No animation, static skeleton
Animation
The Skeleton component supports three animation types:
| Class | Animation |
|---|---|
.skeleton--shimmer | A gradient sweeps across the placeholder, driven by the --animate-skeleton theme variable |
.skeleton--pulse | Tailwind's animate-pulse opacity cycle |
.skeleton--none | No animation |
All three respect prefers-reduced-motion.
API Reference
Skeleton Props
| Prop | Type | Default | Description |
|---|---|---|---|
animationType | "shimmer" | "pulse" | "none" | "shimmer" or CSS variable | The animation type for the skeleton. Can be globally configured via --skeleton-animation CSS variable |
className | string | - | Additional CSS classes |
