Skeleton

Use to show a placeholder of the UI to the user while content is loading.

Simple

Basic skeleton loader for simple text content.

'use client'

export default function SimpleSkeleton() {
  return (
    <div className='w-full space-y-3'>
      <div className='h-4 w-2/5 animate-pulse rounded-lg bg-white/5'></div>
      <div className='h-4 w-4/5 animate-pulse rounded-lg bg-white/5'></div>
      <div className='h-4 w-3/5 animate-pulse rounded-lg bg-white/5'></div>
    </div>
  )
}

Card

Skeleton loader for card components with avatar and content.

'use client'

export default function CardSkeleton() {
  return (
    <div className='flex items-center space-x-4 w-full max-w-sm rounded-xl bg-neutral-800 p-4'>
      <div className='h-12 w-12 animate-pulse rounded-full bg-white/5'></div>
      <div className='flex-1 space-y-3 py-1'>
        <div className='h-4 w-3/4 animate-pulse rounded-lg bg-white/5'></div>
        <div className='space-y-2'>
          <div className='h-4 animate-pulse rounded-lg bg-white/5'></div>
          <div className='h-4 w-5/6 animate-pulse rounded-lg bg-white/5'></div>
        </div>
      </div>
    </div>
  )
}

List

Skeleton loader for list items with avatar and text content.

'use client'

function ListItemSkeleton() {
    return (
        <div className='flex items-center space-x-4'>
            <div className='h-10 w-10 animate-pulse rounded-full bg-white/5'></div>
            <div className='flex-1 space-y-2'>
                <div className='h-3 w-3/5 animate-pulse rounded-lg bg-white/5'></div>
                <div className='h-3 w-4/5 animate-pulse rounded-lg bg-white/5'></div>
            </div>
        </div>
    )
}

export default function ListSkeleton() {
  return (
    <div className='w-full max-w-sm space-y-4 rounded-xl bg-neutral-800 p-4'>
        <ListItemSkeleton />
        <ListItemSkeleton />
        <ListItemSkeleton />
    </div>
  )
}

Select

Loader