Feedback

Skeleton.

A pulsing placeholder block to hold space while content loads.

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

export default function SkeletonDemo() {
  return (
    <div
      role="status"
      aria-label="Loading site"
      className="w-full max-w-xs overflow-hidden rounded-lg border bg-card"
    >
      <Skeleton className="h-32 rounded-none border-b bg-accent/60" />
      <div className="space-y-3 p-5">
        <Skeleton className="h-3 w-20" />
        <Skeleton className="h-5 w-3/4" />
        <Skeleton className="h-4 w-full" />
        <div className="flex items-center gap-3 pt-2">
          <Skeleton className="size-8 rounded-full" />
          <Skeleton className="h-3 w-24" />
        </div>
      </div>
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add skeleton

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/skeleton. See Installation if your project is not set up yet.

Manually

Copy the source into your project

components/ui/skeleton.tsx

import * as React from "react";

import { cn } from "@/lib/utils";

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="skeleton" className={cn("animate-pulse rounded-md bg-secondary", className)} {...props} />;
}

export { Skeleton };

Update the import paths to match your project
The source imports cn from @/lib/utils.

Usage#

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

<Skeleton className="h-4 w-40" />

Installation#

With the CLI

Manually

Copy the source into your project

Update the import paths to match your project

Usage#