Components
Loading preview...
Use to show a placeholder while content is loading.
npx shadcn@latest add https://21st.dev/r/shadcn/skeletonimport {
Card,
CardContent,
CardFooter,
CardHeader,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
export function Cards() {
return (
<Card className="min-w-[300px]">
<CardHeader>
<Skeleton className="h-4 w-4/5" />
<Skeleton className="h-4 w-2/3" />
</CardHeader>
<CardContent>
<Skeleton className="h-72 w-full rounded" />
</CardContent>
<CardFooter className="gap-2">
<Skeleton className="h-8 w-20" />
<Skeleton className="h-8 w-20" />
</CardFooter>
</Card>
);
}