ComponentsData Display

Skeleton

Placeholder loading shape with a pulse animation.

Default

Skeleton renders a pulsing placeholder block. Control the shape and size through style or className.

Card Loading State

Combine multiple skeletons to build loading placeholders for complex layouts like cards.

Installation

npx visor add skeleton

This copies two files into your project:

components/ui/skeleton/skeleton.tsx — the component
components/ui/skeleton/skeleton.module.css — the styles

Usage

import { Skeleton } from '@/components/ui/skeleton/skeleton';

<Skeleton style={{ height: '1rem', width: '12rem' }} />
<Skeleton style={{ height: '2.5rem', width: '2.5rem', borderRadius: '9999px' }} />

API Reference

SkeletonProps

No props data available for “skeleton”.

The component also accepts all standard <div> HTML attributes.

Separator

Visual divider between content sections in horizontal or vertical orientation.

Sparkline

A decorative inline SVG mini-trend chart for stat-card trend slots and dense data contexts. Zero dependencies, theme-portable stroke.