Skeleton

<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>

Installation

npx bearnie add skeleton

import Skeleton from "@/components/ui/skeleton/Skeleton.astro";

Usage

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

<Skeleton class="h-4 w-[200px]" />

Examples

Card

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

With avatar

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

Anatomy

Skeleton - A single placeholder element

Props

Prop	Type	Default	Description
class	string	-	Width, height, and shape classes

Use Tailwind classes like h-4, w-[200px], rounded-full to control dimensions and shape.