Skeleton

The Skeleton component displays a placeholder preview of content before it has loaded, reducing visual layout shifts and improving perceived loading speeds.

Preview

Code

import { Skeleton } from '@ignix-ui/skeleton';

<Skeleton
  variant="rectangular"
  width={"100%"}
  height={100}
  animation="shimmer"
  colorTheme="default"
/>

Installation

CLI

ignix add component skeleton

Manual

'use client';

import * as React from "react";
import { cn } from "../../../utils/cn";

export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
variant?: "text" | "circular" | "rectangular";
width?: string | number;
height?: string | number;
animation?: "shimmer" | "wave" | "pulse" | "none";
colorTheme?: "default" | "primary" | "success" | "warning" | "danger";
}

const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
(
    {
        className,
        variant = "rectangular",
        width,
        height,
        animation = "shimmer",
        colorTheme = "default",
        style,
        ...props
    },
    ref
) => {
    const isTailwindWidth = typeof width === "string" && width.startsWith("w-");
    const isTailwindHeight = typeof height === "string" && height.startsWith("h-");

    const customStyle: React.CSSProperties = {
        ...style,
        width: !isTailwindWidth && width !== undefined 
            ? (typeof width === "number" ? `${width}px` : width) 
            : undefined,
        height: !isTailwindHeight && height !== undefined 
            ? (typeof height === "number" ? `${height}px` : height) 
            : undefined,
    };

    const isAnimatedGradient = animation === "shimmer" || animation === "wave";

    const themeClasses = {
        default: isAnimatedGradient
            ? "bg-gradient-to-r from-slate-100 via-slate-200/80 to-slate-100 dark:from-slate-900 dark:via-slate-800/80 dark:to-slate-900"
            : "bg-slate-200 dark:bg-slate-800/80",
        primary: isAnimatedGradient
            ? "bg-gradient-to-r from-primary/10 via-primary/20 to-primary/10 dark:from-primary/20 dark:via-primary/35 dark:to-primary/20"
            : "bg-primary/10 dark:bg-primary/25",
        success: isAnimatedGradient
            ? "bg-gradient-to-r from-green-50 via-green-100 to-green-50 dark:from-emerald-950/40 dark:via-emerald-900/30 dark:to-emerald-950/40"
            : "bg-green-100 dark:bg-emerald-950/40",
        warning: isAnimatedGradient
            ? "bg-gradient-to-r from-amber-50 via-amber-100 to-amber-50 dark:from-amber-950/40 dark:via-amber-900/30 dark:to-amber-950/40"
            : "bg-amber-100 dark:bg-amber-950/40",
        danger: isAnimatedGradient
            ? "bg-gradient-to-r from-rose-50 via-rose-100 to-rose-50 dark:from-rose-950/40 dark:via-rose-900/30 dark:to-rose-950/40"
            : "bg-rose-100 dark:bg-rose-950/40",
    }[colorTheme];

    return (
        <>
            {isAnimatedGradient && (
                <style
                    dangerouslySetInnerHTML={{
                        __html: `
                            @keyframes ignix-shimmer {
                                0% { background-position: 200% 0; }
                                100% { background-position: -200% 0; }
                            }
                            @keyframes ignix-wave {
                                0% { background-position: 100% 0; }
                                100% { background-position: -100% 0; }
                            }
                            .ignix-skeleton-shimmer {
                                background-size: 200% 100%;
                                animation: ignix-shimmer 1.6s infinite linear;
                            }
                            .ignix-skeleton-wave {
                                background-size: 200% 100%;
                                animation: ignix-wave 2.2s infinite linear;
                            }
                        `,
                    }}
                />
            )}
            <div
                ref={ref}
                style={customStyle}
                className={cn(
                    themeClasses,
                    animation === "shimmer" && "ignix-skeleton-shimmer",
                    animation === "wave" && "ignix-skeleton-wave",
                    animation === "pulse" && "animate-pulse",
                    variant === "circular" && "rounded-full",
                    variant === "text" && "rounded h-4 w-full",
                    variant === "rectangular" && "rounded-xl",
                    isTailwindWidth && width,
                    isTailwindHeight && height,
                    className
                )}
                {...props}
            />
        </>
    );
}
);

Skeleton.displayName = "Skeleton";

export { Skeleton };

Usage

Import the component:

import { Skeleton } from '@mindfiredigital/ignix-ui';

Basic Shapes

Different shapes representing layouts for texts, circular avatars, and box components.

Preview

Code

import { Skeleton } from '@mindfiredigital/ignix-ui';

function BasicShapesDemo() {
  return (
    <div className="flex flex-col gap-4 max-w-sm">
      <Skeleton variant="text" width={200} />
      <Skeleton variant="circular" width={48} height={48} />
      <Skeleton variant="rectangular" width="100%" height={80} />
    </div>
  );
}

Profile Card Layout

A composite placeholder representing user profiles with circular images and detail lines.

Preview

Code

import { Skeleton } from '@mindfiredigital/ignix-ui';

function ProfileCardPlaceholder() {
  return (
    <div className="flex items-center gap-4 p-6 border rounded-2xl max-w-sm">
      <Skeleton variant="circular" width={48} height={48} />
      <div className="flex flex-col gap-2 flex-1">
        <Skeleton variant="text" width="60%" height={16} />
        <Skeleton variant="text" width="40%" height={12} />
      </div>
    </div>
  );
}

Dashboard Stats Card

A layout containing titles, dynamic numbers, and secondary details representing analytics cards.

Preview

Code

import { Skeleton } from '@mindfiredigital/ignix-ui';

function DashboardCardPlaceholder() {
  return (
    <div className="p-6 border rounded-2xl max-w-sm space-y-4">
      <div className="flex justify-between items-center">
        <Skeleton variant="text" width="50%" height={14} />
        <Skeleton variant="circular" width={24} height={24} />
      </div>
      <Skeleton variant="text" width="70%" height={32} />
      <div className="flex items-center gap-2">
        <Skeleton variant="text" width="30%" height={12} />
        <Skeleton variant="text" width="20%" height={12} />
      </div>
    </div>
  );
}

Color Themes

Custom brand-red and semantic themed skeleton states.

Preview

Code

import { Skeleton } from '@mindfiredigital/ignix-ui';

function ThemedSkeletons() {
  return (
    <div className="flex flex-col gap-4 max-w-sm">
      <Skeleton variant="rectangular" width="100%" height={50} colorTheme="primary" />
      <Skeleton variant="rectangular" width="100%" height={50} colorTheme="success" />
      <Skeleton variant="rectangular" width="100%" height={50} colorTheme="warning" />
      <Skeleton variant="rectangular" width="100%" height={50} colorTheme="danger" />
    </div>
  );
}

Props

Skeleton

Prop	Type	Default	Description
variant	'text' | 'circular' | 'rectangular'	'rectangular'	Shape of the skeleton placeholder
width	string | number	-	Width of the component (supports numbers for px, CSS lengths, or Tailwind utility classes like w-12, w-full)
height	string | number	-	Height of the component (supports numbers for px, CSS lengths, or Tailwind utility classes like h-12, h-full)
animation	'shimmer' | 'wave' | 'pulse' | 'none'	'shimmer'	Animation style used for transition loading effect
colorTheme	'default' | 'primary' | 'success' | 'warning' | 'danger'	'default'	Base color theme styling used for skeleton background
className	string	-	Additional custom CSS classes