pepeloper/ uipepeloper.dev

Feedback

Skeleton

A loading placeholder.

Install

Install
npx shadcn@latest add http://localhost:3000/r/skeleton.json

Usage

skeleton-example.tsx
"use client"

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

export function Example() {
  return (
    <div className="flex w-full max-w-xs items-center gap-3">
      <Skeleton className="size-10 rounded-full" />
      <div className="flex-1 space-y-2">
        <Skeleton className="h-3 w-3/4" />
        <Skeleton className="h-3 w-1/2" />
      </div>
    </div>
  )
}

API

Skeleton
TypeScript
function Skeleton(props: React.ComponentProps<"div">)
Source code +
components/ui/skeleton.tsx
import { cn } from "cn"

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

export { Skeleton }

Registry JSON ↗

← SidebarSlider →