Skeleton Profile
A skeleton profile skeleton loader.
Preview
Live interactive preview.
Installation
Add this component to your project using the CLI:
terminal
npx -y vui-registry-cli-v1@latest add skeleton-profileSource Code
skeleton-profile.tsx
'use client'
import React from 'react'
import { Skeleton } from './skeleton'
// Variant 2: Profile Skeleton
export function SkeletonProfile() {
return (
<div className="flex items-center space-x-4 p-4 border rounded-xl w-full max-w-sm bg-background/50 backdrop-blur-sm">
<Skeleton className="h-12 w-12 rounded-full" circle />
<div className="space-y-2">
<Skeleton className="h-4 w-[150px]" />
<Skeleton className="h-3 w-[100px]" />
</div>
</div>
)
}
Dependencies
framer-motion: latestclsx: latesttailwind-merge: latest