shadcn.io is not affiliated with official shadcn/ui

Shadcn Skeleton for React and Tailwind

Displays a loading state.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/skeleton.json

pnpm dlx shadcn@latest add https://kit.dev/r/skeleton.json

npx shadcn@latest add https://kit.dev/r/skeleton.json

yarn shadcn@latest add https://kit.dev/r/skeleton.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/skeleton.tsx

"use client";

import { ark } from "@ark-ui/react/factory";
import { cn } from "@/lib/utils";

export const Skeleton = (props: React.ComponentProps<typeof ark.div>) => {
  const { className, ...rest } = props;

  return (
    <ark.div
      className={cn(
        "rounded-md bg-muted",
        "animate-pulse",
        "motion-reduce:animate-none!",
        className
      )}
      data-slot="skeleton"
      {...rest}
    />
  );
};

export const SkeletonCircle = (props: React.ComponentProps<typeof ark.div>) => {
  const { className, ...rest } = props;

  return (
    <ark.div
      className={cn(
        "size-10",
        "shrink-0",
        "bg-muted",
        "rounded-full",
        "animate-pulse",
        "motion-reduce:animate-none!",
        className
      )}
      data-slot="skeleton-circle"
      {...rest}
    />
  );
};

interface SkeletonTextProps extends React.ComponentProps<typeof ark.div> {
  /**
   * The number of lines of the skeleton text.
   *
   * @default 1
   */
  lines?: number;
}

export const SkeletonText = (props: SkeletonTextProps) => {
  const { className, lines = 2, ...rest } = props;

  return (
    <ark.div
      className={cn(
        "w-full",
        "flex flex-col gap-2",
        "animate-pulse",
        "**:[div]:h-4",
        "motion-reduce:animate-none!",
        className
      )}
      data-slot="skeleton-text"
      {...rest}
    >
      {Array.from({ length: lines }).map((_, index) => {
        const key = `skeleton-text-${index}`;

        return (
          <div className="w-full rounded-md bg-muted last:w-3/4" key={key} />
        );
      })}
    </ark.div>
  );
};

Update the import paths to match your project setup.

Usage

import { 
  Skeleton,
  SkeletonCircle,
  SkeletonText,
} from "@/components/ui/skeleton";

<SkeletonCircle />
<SkeletonText />
<Skeleton />

Examples

Skeleton

Rectangular skeleton placeholder.

Circle

Circular skeleton placeholder.

Text

Use the lines prop to control the number of placeholder lines; the last line is shorter by default.

Loading cards

API Reference

Skeleton

Rectangular loading placeholder.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

SkeletonCircle

Circular loading placeholder.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

SkeletonText

Multi-line text placeholder. Last line is shorter by default to mimic text.

Prop	Type	Default
`lines`	`number`	`2`
`className`	`string`	-
`asChild`	`boolean`	-

For a complete list of props, see the Ark UI documentation.

Signature Pad

Skip Nav