Skeleton

Skeleton is a placeholder shape that stands in for content while it loads.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/skeleton.tsx

Import from@viliha/vui-react/skeleton

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

Size it with utility classes to match the content it stands in for while loading.

skeleton-demo.tsx

import { Skeleton } from "@viliha/vui-react/skeleton";

export function Example() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[200px]" />
        <Skeleton className="h-4 w-[160px]" />
      </div>
    </div>
  );
}

Skeleton props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.