Skeleton

Skeleton helps preserve layout while data is loading, reducing visual jank and improving perceived performance.

When to use

• Reserve space for text blocks, avatars, cards, and media placeholders.
• Indicate background loading without showing an empty state too early.
• Replace final content with matching skeleton dimensions to avoid layout shift.

Behavior notes

• Skeleton renders a neutral surface with animate-pulse styling.
• Pass width/height using className (h-*, w-*, size-*) for shape control.
• Prefer concise placeholder sets that mirror final information density.

Example

<div className='space-y-2'>
  <Skeleton className='h-5 w-48' />
  <Skeleton className='h-4 w-64' />
  <Skeleton className='h-4 w-56' />
</div>

Preview

Usage

import { Skeleton } from '@branditdev/ui';

export function SkeletonDemo() {
  return (
    <div className='w-full max-w-sm rounded-md border p-4'>
      <div className='flex items-center gap-3'>
        <Skeleton className='size-10 rounded-full' />
        <div className='flex-1 space-y-2'>
          <Skeleton className='h-4 w-2/3' />
          <Skeleton className='h-4 w-1/2' />
        </div>
      </div>
    </div>
  );
}

API

Skeleton(props): Element

Defined in: components/skeleton/skeleton.tsx:14

Skeleton UI component.

Parameters

Returns

Element

Rendered component.

Source

import type { ComponentProps } from 'react';

import { cn } from '@branditdev/ui';

export type SkeletonProps = ComponentProps<'div'>;

export function Skeleton({ className, ...props }: SkeletonProps) {
  return (
    <div
      data-slot='skeleton'
      className={cn('animate-pulse rounded-md bg-accent', className)}
      {...props}
    />
  );
}