Skeleton

Component 29

About

Display a skeleton whilst another component is loading.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Skeleton to your project and fits it to your theme.

Code

How Skeleton is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";

export const DefaultWithSetWidth = () => (
  <div className="flex flex-col gap-4">
    <div className="font-bold text-xl dark:text-white">Default with set width</div>
    <Skeleton width={160} />
  </div>
)

export const DefaultWithBoxHeight = () => (
  <div className="flex flex-col gap-4">
    <div className="font-bold text-xl dark:text-white">Default with box height</div>
    <Skeleton boxHeight={42} width={160} />
  </div>
)

export const WrappingChildren = () => (
  <div className="flex flex-col gap-4">
    <div className="font-bold text-xl dark:text-white">Wrapping children</div>
    <Skeleton>
      <Button>Hidden by skeleton</Button>
    </Skeleton>

    <Skeleton show={false}>
      <Button>Not hidden by skeleton</Button>
    </Skeleton>
  </div>
)

export const WrappingChildrenWithFixedSize = () => (
  <div className="flex flex-col gap-4">
    <div className="font-bold text-xl dark:text-white">Wrapping children with fixed size</div>
    <Skeleton height={100} width="100%">
      {null}
    </Skeleton>

    <Skeleton height={100} width="100%">
      <Button>Not hidden by Skeleton</Button>
    </Skeleton>
  </div>
)

export const Pill = () => (
  <div className="flex flex-col gap-4">
    <div className="font-bold text-xl dark:text-white">Pill</div>
    <Skeleton pill width={48} />
  </div>
)

export const Rounded = () => (
  <div className="flex flex-col gap-4">
    <div className="font-bold text-xl dark:text-white">Rounded</div>
    <Skeleton boxHeight={48} height={48} rounded width={48} />
  </div>
)

export const Squared = () => (
  <div className="flex flex-col gap-4">
    <div className="font-bold text-xl dark:text-white">Squared</div>
    <Skeleton boxHeight={48} height={48} squared width={48} />
  </div>
)

export const NoAnimation = () => (
  <div className="flex flex-col gap-4">
    <div className="font-bold text-xl dark:text-white">No animation</div>
    <Skeleton animated={false} height={100} width="100%">
      {null}
    </Skeleton>
  </div>
);