Skeletons

Below is the full output of the Skeletons component across all variants and sizes.

“Its Important to install the packages & Dependencies to use can intall using npm install zure-ui and also paste code maunally For both React & Next Js “

1. Variants

These define the intent and visual weight of the Input.

Preview

Paragraph

Table

Text

Card

2. Example

Made an example for better understanding in which i have created an template how it can be used in your project while Loading.

Important Note “I have used tailwindcss you can use normal CSS”

Click the Refresh button to check the refresh effect

Preview

Paragraph

Table

Text

Card

Use

Skeleton.jsx


 
import React, { useEffect, useState } from "react";
import Image from "next/image";
import {
Skeleton,
SkeletonCard,
SkeletonText,
SkeletonTable,
} from "@/Components/ui/Skeleton";
 
import {RotateCw} from "lucide-react"
 
export default function SkeletonTypes() {
const [loading, setLoading] = useState(true);
 
// Auto load after 3 seconds
useEffect(() => {
  const timer = setTimeout(() => {
    setLoading(false);
  }, 3000);
 
  return () => clearTimeout(timer);
}, [loading]);
 
return (
  <div className="flex flex-col items-center gap-6">
 
    {/* Refresh Button */}
    <div className="flex justify-end text-black w-full"><button
      onClick={() => setLoading(true)}
      className="px-2 py-2 text-sm border rounded-full hover:bg-gray-100"
    >
      <RotateCw />
    </button></div>
 
    {/* Content */}
    <div className="flex justify-center text-black gap-8 items-start flex-wrap">
 
      {/* Left column */}
      <div className="flex flex-col w-[220px] gap-4">
        <h1 className="text-sm font-semibold">Paragraph</h1>
 
        {loading ? (
          <SkeletonText lines={2} />
        ) : (
          <p className="text-sm text-gray-700">
            This is a paragraph that appears after loading is complete.
          </p>
        )}
 
        <h1 className="text-sm font-semibold">Table</h1>
 
        {loading ? (
          <SkeletonTable rows={7} cols={3} />
        ) : (
          <table className="w-full text-sm border">
            <thead>
              <tr className="border-b">
                <th className="p-1 text-left">Name</th>
                <th className="p-1 text-left">Role</th>
                <th className="p-1 text-left">Status</th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b">
                <td className="p-1">Saurav</td>
                <td className="p-1">Developer</td>
                <td className="p-1">Active</td>
              </tr>
              <tr className="border-b">
                <td className="p-1">Saurav</td>
                <td className="p-1">Developer</td>
                <td className="p-1">Active</td>
              </tr>
              <tr className="border-b">
                <td className="p-1">Saurav</td>
                <td className="p-1">Developer</td>
                <td className="p-1">Active</td>
              </tr>
              <tr className="border-b">
                <td className="p-1">Saurav</td>
                <td className="p-1">Developer</td>
                <td className="p-1">Active</td>
              </tr>
              <tr className="border-b">
                <td className="p-1">Saurav</td>
                <td className="p-1">Developer</td>
                <td className="p-1">Active</td>
              </tr>
              <tr className="border-b">
                <td className="p-1">Saurav</td>
                <td className="p-1">Developer</td>
                <td className="p-1">Active</td>
              </tr>
              <tr className="border-b">
                <td className="p-1">Saurav</td>
                <td className="p-1">Developer</td>
                <td className="p-1">Active</td>
              </tr>
              <tr className="border-b">
                <td className="p-1">Saurav</td>
                <td className="p-1">Developer</td>
                <td className="p-1">Active</td>
              </tr>
              <tr className="border-b">
                <td className="p-1">Saurav</td>
                <td className="p-1">Developer</td>
                <td className="p-1">Active</td>
              </tr>
            </tbody>
          </table>
        )}
      </div>
 
      {/* Right column */}
      <div className="flex flex-col w-[220px] gap-4">
        <h1 className="text-sm font-semibold">Text</h1>
 
        {loading ? (
          <Skeleton width="200px" height="20px" />
        ) : (
          <span className="text-sm text-gray-800">
            Loaded Text Content
          </span>
        )}
 
        <h1 className="text-sm font-semibold">Card</h1>
 
        {loading ? (
          <SkeletonCard />
        ) : (
          <div className="w-[280px] p-4 border rounded-xl">
            <img
              src="/1.png"
              alt="demo"
              className="rounded-lg mb-3"
            />
            <h3 className="text-sm font-semibold">Demo Card</h3>
            <p className="text-xs text-gray-600">
              This card replaces the skeleton after loading.
            </p>
          </div>
        )}
      </div>
 
    </div>
  </div>
);
}

Props

Skeleton

Prop	Type	Default	Description
`width`	`string \| number`	`"100%"`	Width of the skeleton block. Can be px, %, etc.
`height`	`string \| number`	`"20px"`	Height of the skeleton block.
`borderRadius`	`string \| number`	`"4px"`	Border radius for rounded corners.
`className`	`string`	`""`	Additional Tailwind/Custom classes.
`style`	`React.CSSProperties`	`{}`	Inline styles override.

SkeletonCard

Prop	Type	Default	Description
`width`	`string \| number`	`"250px"`	Width of the card.
`padding`	`string \| number`	`"16px"`	Inner padding of the card.
`borderRadius`	`string \| number`	`"8px"`	Rounded corners for card and image placeholder.
`border`	`string`	`"1px solid #ddd"`	Card border style.
`imageHeight`	`string \| number`	`"150px"`	Height of the skeleton image placeholder.
`className`	`string`	`""`	Extra CSS classes for the wrapper.
`style`	`React.CSSProperties`	`{}`	Inline styles override.

SkeletonText

Prop	Type	Default	Description
`lines`	`number`	`3`	Number of text lines to render.
`width`	`string \| number`	`"100%"`	Width of each line. Can also be an array of widths per line.
`height`	`string \| number`	`"16px"`	Height of each text line.
`gap`	`string \| number`	`"8px"`	Vertical gap between lines.
`className`	`string`	`""`	Additional custom classes.
`style`	`React.CSSProperties`	`{}`	Inline styles override.

SkeletonTable

Prop	Type	Default	Description
`rows`	`number`	`5`	Number of table rows.
`cols`	`number`	`3`	Number of table columns.
`width`	`string \| number`	`"100%"`	Width of each cell.
`rowHeight`	`string \| number`	`"20px"`	Height of each row.
`gap`	`string \| number`	`"8px"`	Gap between rows and columns.
`className`	`string`	`""`	Additional custom classes for table wrapper.
`style`	`React.CSSProperties`	`{}`	Inline styles override.

Installation

You can Integrate Zure UI By 2 ways npm install zure-ui Or by Manually creating folder , files & paste the given code It Totally depends on your workflow.

NPM

Step 1: Create a React App

Open your terminal and run the following command to create a new React app:


npx create-react-app my-app

Step 2: Navigate to Your Project Directory

After creating your project, navigate to your project directory:


cd my-app

Step 3: Install the Package

Run the following command in your project root to add the library as a dependency.


npm install zure-ui

Step 4: Start Building

You can now import any component directly into your React files.

Skeleton.jsx


import { Skeleton, SkeletonCard, SkeletonText, SkeletonTable } from 'zure-ui';
 
function App() {
  return 
     <h2>Basic Skeleton</h2>
<Skeleton width="200px" height="20px" />
 
<h2>Text Skeleton</h2>
<SkeletonText lines={4} />
 
<h2>Card Skeleton</h2>
<SkeletonCard />
 
<h2>Table Skeleton</h2>
<SkeletonTable rows={4} cols={3} />
}

Manual

Step 1: Create a Components Directory

Ensure you have a dedicated folder for UI components (e.g., src/components/ui).

Step 2: Create the Component Folder

For each component you want to use, create a new folder named after the component.

- - - - index.js
      - Skeleton.jsx
      - SkeletonCard.jsx
      - SkeletonTable.jsx
      - SkeletonText.jsx
- App.js

Step 3: Add the Three Core Files

Inside that new folder, create these three files and paste the code provided in the component’s documentation:

Skeleton.jsx (Normal)
index.js (The Export)
SkeletonCard.jsx (for Cad)
SkeletonTable.jsx (for Table)
SkeletonText.jsx (for text)

Step 4: Paste in Toast.jsx

Skeleton

Skeleton.jsx


'use client' //remove if you are using react
import React from "react";
 
export default function Skeleton({ width = "100%", height = "20px", borderRadius = "4px" }) {
  return (
    <div
      style={{
        width,
        height,
        borderRadius,
        backgroundColor: "#e0e0e0",
        overflow: "hidden",
        position: "relative",
      }}
      className="skeleton"
    >
      <div className="shimmer" />
      <style jsx>{`
        .skeleton {
          position: relative;
          background-color: #e0e0e0;
        }
        .shimmer {
          position: absolute;
          top: 0;
          left: -100%;
          height: 100%;
          width: 100%;
          background: linear-gradient(
            to right,
            rgba(224, 224, 224, 0) 0%,
            rgba(245, 245, 245, 0.5) 50%,
            rgba(224, 224, 224, 0) 100%
          );
          animation: shimmer 1.5s infinite;
        }
        @keyframes shimmer {
          0% {
            left: -100%;
          }
          100% {
            left: 100%;
          }
        }
      `}</style>
    </div>
  );
}

SkeletonCard

SkeletonCard.jsx


'use client' //remove if you are using react
import React from "react";
import Skeleton from "./Skeleton";
 
export default function SkeletonCard({
width = "250px",
padding = "16px",
borderRadius = "8px",
border = "1px solid #ddd",
imageHeight = "150px",
className = "",
style = {},
}) {
return (
  <div
    style={{
      width,
      padding,
      borderRadius,
      border,
      ...style,
    }}
    className={className}
  >
    {/* Image placeholder */}
    <Skeleton width="100%" height={imageHeight} borderRadius={borderRadius} />
 
    {/* Text placeholders */}
    <div style={{ marginTop: "12px" }}>
      <Skeleton width="80%" height="20px" />
      <Skeleton width="60%" height="20px" style={{ marginTop: "8px" }} />
    </div>
  </div>
);
}

SkeletonText

SkeletonText.jsx


'use client' //remove if you are using react
import React from "react";
import Skeleton from "./Skeleton";
 
export default function SkeletonText({ lines = 3, lineHeight = "20px", gap = "8px" }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap }}>
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton key={i} height={lineHeight} />
      ))}
    </div>
  );
}

SkeletonTable

SkeletonTable.jsx


'use client' //remove if you are using react
import React from "react";
import Skeleton from "./Skeleton";
 
export default function SkeletonTable({
rows = 5,
cols = 3,
width = "100%",              // width of each cell
rowHeight = "20px",          // height of each row
gap = "8px",                 // gap between rows and columns
className = "",              // extra classes for table wrapper
style = {},                  // inline styles
}) {
return (
  <div
    style={{ display: "flex", flexDirection: "column", gap, ...style }}
    className={className}
  >
    {Array.from({ length: rows }).map((_, i) => (
      <div key={i} style={{ display: "flex", gap }}>
        {Array.from({ length: cols }).map((_, j) => (
          <Skeleton key={j} height={rowHeight} width={width} />
        ))}
      </div>
    ))}
  </div>
);
}

Step 5: Paste in index.js

index.js


import Skeleton from "./Skeleton";
import SkeletonText from "./SkeletonText";
import SkeletonCard from "./SkeletonCard";
import SkeletonTable from "./SkeletonTable";
 
export { Skeleton, SkeletonText, SkeletonCard, SkeletonTable };

Step 6: Local Usage

Import the component using your local path:

App.jsx


import {
Skeleton,
SkeletonCard,
SkeletonText,
SkeletonTable,
} from '@/Components/ui/Skeleton';

Step 7: Usage

Use the component

App.jsx


<Toast />
    <h2>Basic Skeleton</h2>
<Skeleton width="200px" height="20px" />
 
<h2>Text Skeleton</h2>
<SkeletonText lines={4} />
 
<h2>Card Skeleton</h2>
<SkeletonCard />
 
<h2>Table Skeleton</h2>
<SkeletonTable rows={4} cols={3} />