Things

The Skeleton component displays a placeholder shape while content is loading. It provides visual feedback to users that content is being fetched or processed. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/skeleton.json

Usage

tsx

import { Skeleton } from "@/components/ui/skeleton"

function MyComponent() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

Skeleton

Quick Install

Usage

Examples

Default

Card Skeleton

Loading State Example