Skeleton

A placeholder for loading content

A skeleton component for loading placeholders. No Ark UI dependency; uses CVA for size variants (default, sm, lg, icon).

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

export default function Example() {
  return (
    <div className="space-y-2">
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
    </div>
  );
}

View Code

Installation

bash

liminal add skeleton

Usage

Use <Skeleton /> with optional size prop or custom className for dimensions. By default it has rounded-md, bg-muted, and animate-pulse.

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

<div className="space-y-2 w-full max-w-xs">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

View Code

Examples

Size variants

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

<Skeleton size="sm" />
<Skeleton size="default" />
<Skeleton size="lg" />
<Skeleton size="icon" />

View Code

Card placeholder

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

<div className="rounded-lg border p-4 space-y-3">
  <Skeleton className="h-5 w-1/3" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-2/3" />
</div>

View Code

API

Prop	Type	Default	Description
size	"default" \| "sm" \| "lg" \| "icon"	"default"	Preset size. default: h-4 w-full; sm: h-3 w-20; lg: h-6 w-full; icon: h-10 w-10.
className	string	-	Additional classes for custom dimensions and layout.