Koori UI
Components

GlassSkeleton

A glassmorphism-styled animated skeleton placeholder for loading states.

Preview

Usage

import { GlassSkeleton } from "koori-ui";
 
<GlassSkeleton width={200} height={20} />

Text Lines

<div className="flex flex-col gap-2">
  <GlassSkeleton width="100%" height={16} />
  <GlassSkeleton width="80%" height={16} />
  <GlassSkeleton width="60%" height={16} />
</div>

Card Placeholder

import { GlassSkeleton, GlassPanel } from "koori-ui";
 
<GlassPanel>
  <GlassSkeleton className="mb-4 rounded-full" width={48} height={48} />
  <GlassSkeleton className="mb-2" width="70%" height={20} />
  <GlassSkeleton width="100%" height={14} />
  <GlassSkeleton className="mt-1" width="90%" height={14} />
</GlassPanel>

Props

PropTypeDefaultDescription
widthstring | number—CSS width value or pixel number
heightstring | number—CSS height value or pixel number
classNamestring—Additional CSS classes (e.g. rounded-full)

All native <div> props are also accepted.

Previous

GlassProgress

Next

GlassBreadcrumb

On this page