saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Skeleton

Skeleton

A placeholder loading state for content.

Installation

pnpm dlx shadcn@latest add @saturation/skeleton

Usage

import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-4 w-[250px]" />

Examples

Card

Skeleton for a card layout.

List

Loading...
Skeleton list items.

With Avatar

Skeleton with avatar placeholder.

API Reference

PropTypeDefaultDescription
classNamestring—Additional CSS classes.

On This Page

  • Installation
  • Usage
  • Examples
  • Card
  • List
  • With Avatar
  • API Reference