Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, heading, images, videos, and more.

You can set the width and height of these skeleton components based on the size of the content and element that it is being loaded in, such as a card or an article page.

Start using the skeleton component by importing it from the flowbite-react library:

import { Skeleton } from "flowbite-react";

Variants

Default#

Represents a single line of text.

'use client';

import { Skeleton } from "flowbite-react";

function Component() {
  return (
    <div>
      <Skeleton />
    </div>
  )
}

Circular#

'use client';

import { Skeleton } from "flowbite-react";

function Component() {
  return (
    <div>
      <Skeleton variant="circular" />
    </div>
  )
}

Rectangular#

'use client';

import { Skeleton } from "flowbite-react";

function Component() {
  return (
    <div>
      <Skeleton variant="rectangular" />
    </div>
  )
}

Rounded#

'use client';

import { Skeleton } from "flowbite-react";

function Component() {
  return (
    <div>
      <Skeleton variant="rounded" />
    </div>
  )
}

Examples

Image placeholder#

This example can be used to show a placeholder when loading an image and text content.

'use client';

import { Skeleton } from "flowbite-react";

function Component() {
  return (
    <div>
      <Skeleton.Image />
    </div>
  )
}

Video placeholder#

Use this example to show a skeleton placeholder when loading video content.

'use client';

import { Skeleton } from "flowbite-react";

function Component() {
  return (
    <div>
      <Skeleton.Video />
    </div>
  )
}

Card placeholder#

Use this example to show a placeholder when loading content inside a card.

'use client';

import { Skeleton } from "flowbite-react";

function Component() {
  return (
    <div>
      <Skeleton.Card />
    </div>
  )
}

List placeholder#

Use this example to show a placeholder when loading a list of items.

'use client';

import { Skeleton } from "flowbite-react";

function Component() {
  return (
    <div>
      <Skeleton.List />
    </div>
  )
}

Testimonial placeholder#

Use this example to show a placeholder when loading a list of items.

'use client';

import { Skeleton } from "flowbite-react";

function Component() {
  return (
    <div>
      <Skeleton.Testimonial />
    </div>
  )
}

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "max-w-sm animate-pulse"
  },
  "variant": {
    "base": "block bg-gray-200 dark:bg-gray-700 h-[1.2em]",
    "type": {
      "default": "rounded-sm transform origin-[0_55%] my-0 scale-100 text-[1rem]",
      "rectangular": "h-[60px]",
      "rounded": "h-[60px] rounded-sm",
      "circular": "rounded-[50%] w-10 h-10"
    }
  },
  "image": {
    "base": "space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center",
    "imgDiv": "flex items-center justify-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700",
    "imgSvg": "w-10 h-10 text-gray-200 dark:text-gray-600",
    "texts": {
      "base": "w-full",
      "lineOne": "h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4",
      "lineTwo": "h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[480px] mb-2.5",
      "lineThree": "h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5",
      "lineFour": "h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[440px] mb-2.5",
      "lineFive": "h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[460px] mb-2.5",
      "lineSix": "h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"
    }
  },
  "video": {
    "base": "flex items-center justify-center h-56 max-w-sm bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700",
    "svg": "h-10 w-10 text-gray-200 dark:text-gray-600"
  },
  "card": {
    "base": "max-w-sm p-4 border border-gray-200 rounded shadow animate-pulse md:p-6 dark:border-gray-700",
    "cardImg": {
      "base": "flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700",
      "svg": "w-10 h-10 text-gray-200 dark:text-gray-600"
    },
    "text": "h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5",
    "userIcon": {
      "base": "flex items-center mt-4",
      "icon": "w-10 h-10 me-3 text-gray-200 dark:text-gray-700",
      "text": "w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700"
    }
  },
  "list": {
    "base": "max-w-md p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700",
    "textList": {
      "base": "flex items-center justify-between pt-4",
      "list": {
        "textOne": "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5",
        "textTwo": "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700",
        "textThree": "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"
      }
    }
  },
  "testimonial": {
    "base": "animate-pulse",
    "textList": {
      "firstLine": "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 max-w-[640px] mb-2.5 mx-auto",
      "secondLine": "h-2.5 mx-auto bg-gray-300 rounded-full dark:bg-gray-700 max-w-[540px]",
      "author": {
        "base": "flex items-center justify-center mt-4",
        "userIcon": "w-8 h-8 text-gray-200 dark:text-gray-700 me-4",
        "authorName": "w-20 h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 me-3",
        "secondText": "w-24 h-2 bg-gray-200 rounded-full dark:bg-gray-700"
      }
    }
  }
}

References

• Flowbite Skeleton