HomeComponents
Components
  • AccordionDone
  • AlertDone
  • Alert DialogDone
  • Aspect RatioNo Change
  • AvatarDone
  • BadgeDone
  • BreadcrumbDone
  • ButtonDone
  • Button GroupDone
  • CalendarNo Change
  • CardDone
  • CarouselDone
  • ChartNo Change
  • CheckboxDone
  • CollapsibleNo Change
  • ComboboxDone
  • CommandDone
  • Context MenuDone
  • Data TableDone
  • Date PickerDone
  • DialogDone
  • DrawerDone
  • Dropdown MenuDone
  • EmptyNo Change
  • FieldNo Change
  • React Hook FormNo Change
  • Hover CardDone
  • InputDone
  • Input GroupDone
  • Input OTPDone
  • ItemDone
  • KbdDone
  • LabelDone
  • MenubarDone
  • Navigation MenuDone
  • PaginationDone
  • PopoverDone
  • ProgressDone
  • Radio GroupDone
  • ResizableNo Change
  • Scroll AreaNo Change
  • SelectDone
  • SeparatorDone
  • SheetDone
  • SidebarNo Change
  • SkeletonDone
  • SliderDone
  • SonnerDone
  • SpinnerDone
  • SwitchDone
  • TableNo Change
  • TabsDone
  • TextareaDone
  • ToastDone
  • ToggleDone
  • Toggle GroupDone
  • TooltipDone
  • TypographyDone

Skeleton

Loading placeholders with square edges and subtle inset shine, matching the rest of the Omni dashboard surfaces.

Skeleton component

Loading state
Use skeletons inside cards to smooth over async fetches.

Installation

pnpm dlx shadcn@latest add @omni/skeleton

Usage

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