Skip to content

Latest on the changelog, Oct 8, 2026: “Pages carry their content without JavaScript, and each deploy pings IndexNow”

OTF Kit logoOTF Kit

Shadcn-style Skeleton

Feedback

Shadcn-style skeleton for React. Layout-mirroring skeleton loaders for async content — never plain spinners.

View in Storybook
Skeleton
Loading Storybook preview…

Installation

bun add @otfdashkit/ui

Usage

Import Skeleton from @otfdashkit/ui.

Code
import { Skeleton } from '@otfdashkit/ui'

// Always mirror real layout — never plain spinners
export function UserCardSkeleton() {
  return (
    <div className="flex items-center gap-3 p-4 border border-border rounded-lg">
      <Skeleton className="h-10 w-10 rounded-full" />
      <div className="space-y-2 flex-1">
        <Skeleton className="h-4 w-32" />
        <Skeleton className="h-3 w-24" />
      </div>
    </div>
  )
}

Related