Display

Skeleton

Loading placeholder with shimmer animation.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash

$ npx @mcp-elements/cli add skeleton

Usage

skeleton-example.tsxTSX

import { Skeleton } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="flex flex-col gap-3 w-64">
      <Skeleton className="h-4 w-full rounded" />
      <Skeleton className="h-4 w-3/4 rounded" />
      <Skeleton className="h-4 w-1/2 rounded" />
    </div>
  )
}

Props

Prop	Type	Default	Description
`className`	`string`	—	CSS classes to control size and shape of the skeleton block
`animate`	`boolean`	`true`	Whether to show the shimmer animation