Skeleton

Shapes of the content that is loading, with a quiet pulse, never a shimmer.

<div className="flex w-480 flex-col gap-4">
      {[64, 48, 72].map((w, i) => (
        <div key={i} className="flex h-44 items-center gap-12 px-16">
          <Skeleton shape="circle" className="size-16" />
          <Skeleton shape="line" style={{ width: `${w}%` }} />
        </div>
      ))}
    </div>

import { Skeleton, SkeletonLine } from "@logicplanes/kaeso-ui";

Props

shape
"circle" | "line" | "control" | "block" = block
The shape it stands in for: a line of text, a control, a circle or a block.