Placeholder

Skeleton loading placeholders for text lines, avatars, and content blocks with pulse animation.

Preview

Text skeleton

import { PlaceholderLine } from '@/registry/ui-kit/tailwind-placeholder/react'

function Example() {
  return (
    <div className="space-y-3">
      <PlaceholderLine width="100%" />
      <PlaceholderLine width="90%" />
      <PlaceholderLine width="60%" />
    </div>
  )
}

Component API

Prop	Default	Description
`Placeholder`	`—`	Base skeleton element with pulse animation. Control size via className.
`PlaceholderLine`	`—`	Text line placeholder with configurable width.
`PlaceholderAvatar`	`—`	Circular avatar placeholder with size variants (sm/md/lg).

Source Code

"use client";

import React from "react";

/* ── Placeholder (base) ──────────────────────────────── */
interface PlaceholderProps {
  className?: string;
  rounded?: "sm" | "md" | "lg" | "full";
}

const roundedMap: Record<string, string> = {
  sm: "rounded-sm",
  md: "rounded-md",
  lg: "rounded-lg",
  full: "rounded-full",
};

export function Placeholder({ className = "", rounded = "md" }: PlaceholderProps) {
  return (
    <div
      className={`animate-pulse bg-zinc-200 dark:bg-zinc-700 ${roundedMap[rounded]} ${className}`}
    />
  );
}

/* ── PlaceholderLine ─────────────────────────────────── */
interface PlaceholderLineProps {
  width?: string;
  className?: string;
}

export function PlaceholderLine({ width = "100%", className = "" }: PlaceholderLineProps) {
  return (
    <div
      className={`h-3 rounded-md animate-pulse bg-zinc-200 dark:bg-zinc-700 ${className}`}
      style={{ width }}
    />
  );
}

/* ── PlaceholderAvatar ───────────────────────────────── */
interface PlaceholderAvatarProps {
  size?: "sm" | "md" | "lg";
  className?: string;
}

const avatarSizeMap: Record<string, string> = {
  sm: "h-8 w-8",
  md: "h-10 w-10",
  lg: "h-12 w-12",
};

export function PlaceholderAvatar({ size = "md", className = "" }: PlaceholderAvatarProps) {
  return (
    <div
      className={`rounded-full animate-pulse bg-zinc-200 dark:bg-zinc-700 ${avatarSizeMap[size]} ${className}`}
    />
  );
}