Skeleton

free

Skeleton holds layout space while data or media is still loading.

Preview

Dark

import Skeleton from '@/components/ui/Skeleton';

export default function UsageDemo() {
  return (
    <div className="w-full max-w-sm rounded-card border border-border bg-card p-4 shadow-card">
      <Skeleton height={148} />
      <div className="mt-4 flex items-center gap-4">
        <Skeleton variant="circle" height={44} width={44} />
        <div className="flex flex-1 flex-col gap-4">
          <Skeleton height={12} width="72%" />
          <Skeleton height={12} width="48%" />
        </div>
      </div>
      <div className="mt-4 flex flex-col gap-4">
        <Skeleton height={10} />
        <Skeleton height={10} width="82%" />
        <Skeleton height={10} width="64%" />
      </div>
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Skeleton

Examples

Variant

Preview

Dark

import Skeleton from '@/components/ui/Skeleton';

export default function VariantDemo() {
  return (
    <div className="flex w-full max-w-sm items-center gap-4">
      <Skeleton variant="circle" />
      <div className="flex flex-1 flex-col gap-4">
        <Skeleton />
        <Skeleton width="60%" />
      </div>
    </div>
  );
}

Size

Preview

Dark

import Skeleton from '@/components/ui/Skeleton';

export default function SizeDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 rounded-card border border-border bg-card p-4">
      <Skeleton height={132} />
      <div className="flex items-center gap-4">
        <Skeleton variant="circle" height={36} width={36} />
        <div className="flex flex-1 flex-col gap-4">
          <Skeleton height={10} />
          <Skeleton height={10} width="58%" />
        </div>
      </div>
    </div>
  );
}

Animation

Preview

Dark

Animated

Static

import Skeleton from '@/components/ui/Skeleton';

export default function AnimationDemo() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <div>
        <div className="mb-2">
          Animated
        </div>
        <Skeleton height={12} />
      </div>
      <div>
        <div className="mb-2">
          Static
        </div>
        <Skeleton animation={false} height={12} />
      </div>
    </div>
  );
}

API

Skeleton renders a tokenized placeholder element. Compose several skeletons together to preserve the shape of the content that is loading.

Prop	Description	Type	Default
`animation`	Whether the placeholder pulses.	`boolean`	`true`
`asElement`	Element or component used for the rendered node.	`ElementType`	`'span'`
`className`	Class names applied to the skeleton element.	`string`	-
`height`	Height as pixels or a CSS size.	`string \| number`	-
`ref`	Ref forwarded to the rendered element.	`Ref<ElementType>`	-
`style`	Inline styles applied to the rendered element.	`CSSProperties`	-
`variant`	Shape of the placeholder.	`SkeletonVariant`	`'block'`
`width`	Width as pixels or a CSS size.	`string \| number`	-
`...nativeProps`	Native props for the rendered element.	`ComponentProps<ElementType>`	-

Types

type SkeletonVariant = 'block' | 'circle';