Skeleton
Placeholder shapes shown as a loading-state specimen.
Upstream documentationExamples
Loading-state specimen
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Skeleton
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/skeleton.json'Usage
A complete example using the installed component and hook paths.
Skeleton usage
"use client";import { Skeleton } from "@/components/ui/skeleton";const SkeletonPreview = function SkeletonPreview() { return ( <div className="w-full space-y-3"> <div className="flex 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> <Skeleton className="h-12 w-full" /> <p className="text-xs text-muted-foreground">Loading-state specimen</p> </div> ); };export default function Demo() { return <SkeletonPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Skeleton
Skeleton props
React.ComponentProps<"div">