Skeleton

Use to show a placeholder while content is loading.

<div className="flex items-center gap-4">
  <Skeleton className="size-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

Installation

pnpm dlx cubix@latest add skeleton --base radix

Usage

Import

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

Example

<Skeleton className="h-4 w-[100px]" />

Card

<div className="flex flex-col space-y-3">
  <Skeleton className="h-[125px] w-[250px] rounded-xl" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

Text

<div className="flex w-full max-w-sm flex-col gap-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-5/6" />
  <Skeleton className="h-4 w-4/6" />
</div>

API Reference

Skeleton

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Optional content rendered inside the skeleton.