Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Skeleton

Used to display a placeholder while content is loading.

code

Expend code


    <div className="flex space-x-2">
      <Skeleton className="rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-10 rounded-sm" />
        <Skeleton className="h-4 w-40 rounded-sm" />
      </div>
    </div>


    <div className="flex space-x-2">
      <Skeleton className="rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-10 rounded-sm" />
        <Skeleton className="h-4 w-40 rounded-sm" />
      </div>
    </div>

Skeleton Loading UI

The properties of the Skeleton component used to indicate a loading state.

Prop	Type	Default	Description
className	string	bg-foreground rounded-full h-10 w-10	Allows additional styling to be applied to the Skeleton component.