Menu

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-profile

Source 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: latest
  • clsx: latest
  • tailwind-merge: latest