Skeleton List

Skeleton list for loading states

Data displayskeletonloadingplaceholdershimmerlist

Code locked

export function SkeletonList() {
  return (
    <div className="w-full max-w-xs space-y-3">
      {[0, 1, 2].map((i) => (
        <div key={i} className="flex items-center gap-3">
          <span className="size-10 shrink-0 animate-pulse rounded-full bg-neutral-200" />
          <span className="flex-1 space-y-2">
            <span className="block h-2.5 w-3/4 animate-pulse rounded-full bg-neutral-200" />

Create a free account to copy the full source, usage snippet and AI prompt of every component.

Create free account Sign in

Free — no card required.

Related components

Revenue

₼12,480

+12.4%vs last month

Refunds

₼310

−4.1%vs last month

Stat Card

Data display · Stat card with a trend delta

AMRSKVTL+8

Avatar Group

Data display · Overlapping avatar stack

4 out of 5

Rating Stars

Data display · Star rating with hover and click