Skeleton

Use to show a placeholder while content is loading.

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/skeleton.json

Usage

tsx
5 lines
1
2
3
4
5
import { Skeleton } from "@/components/ui/skeleton"

export default function MyComponent() {
  return <Skeleton className="w-[100px] h-[20px] rounded-full" />
}

Examples

Card Skeleton

Profile Skeleton

Table Skeleton

Article Skeleton

Props

PropTypeDescription
classNamestringCSS classes for sizing and styling