Skeleton

Free · MIT

A loading placeholder in the shape of what's coming.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/skeleton

Brings in: utils

Usage

TSX · The example above

"use client"

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

export default function Example() {
  return (
    <div role="status" aria-label="Loading the run" className="flex w-full max-w-sm flex-col gap-2">
      <Skeleton className="h-4 w-2/3" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-5/6" />
    </div>
  )
}

<Skeleton>

No props.

Also takes the props of React.ComponentProps<"div">.