Component

Skeleton

A square loading placeholder.

stablev0.2.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.
bunx shadcn@3 add @fastrp/skeleton

Examples

Default

Open alone

API

<Skeleton />Takes the props of what it wraps

A loading placeholder in the shape of what is coming. Square, like everything else.

Dependencies

npm

  • None

Registry

  • @fastrp/utils

Source

components/ds/skeleton.tsxShow
import type * as React from 'react';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

/** A loading placeholder in the shape of what is coming. Square, like everything else. */
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      aria-hidden
      className={cn('animate-pulse rounded-md bg-foreground/[0.08]', className)}
      {...props}
    />
  );
}

export { Skeleton };