logo
DocsThemes

Skeleton

Skeletons are preview placeholders for components that haven't loaded yet, reducing load-time frustration.

Source

Usage#

Demo#

import { Skeleton } from "pigment-ui";

function SkeletonDemo() {
  return (
    <div className="w-64">
      <Skeleton className="h-4" />
    </div>
  );
}

Animation#

import { Skeleton } from "pigment-ui";

function SkeletonAnimation() {
  return (
    <div className="w-64 space-y-4">
      <Skeleton animation="pulse" className="h-4" />
      <Skeleton animation="none" className="h-4" />
    </div>
  );
}

Radius#

import { Skeleton } from "pigment-ui";

function SkeletonRadius() {
  return (
    <div className="w-64 space-y-4">
      <Skeleton radius="sm" className="h-4" />
      <Skeleton radius="md" className="h-4" />
      <Skeleton radius="lg" className="h-4" />
      <Skeleton radius="full" className="h-4" />
      <Skeleton radius="none" className="h-4" />
    </div>
  );
}
Edit this page
SeparatorSlider