Components
Customize
Installation
$ pnpm dlx shadcn@latest add @framecn/skeleton
Usage
import { Skeleton } from "@/components/ui/skeleton";<Skeleton layout="card" state="loading">
{/* real content revealed on loaded */}
</Skeleton>Pass children for the loaded content and optionally placeholder to override the default shimmer layout.
Smooth transitions
The docs preview shimmers for ~3 sweep cycles, then crossfades to real content via useSkeletonTransition:
import { Skeleton } from "@/components/framecn/skeleton";
import { useSkeletonTransition } from "@/components/framecn/use-skeleton-transition";
const skeletonStyle = useSkeletonTransition([
{ at: 180, state: "loaded", duration: 16 },
]);
<Skeleton style={skeletonStyle} layout="card">
{/* Real content — defines the box size; revealed on crossfade. */}
<div style={{ display: "flex", gap: 14, alignItems: "center" }}>
{/* avatar + text lines */}
</div>
</Skeleton>;style takes precedence over state when both are provided. The shimmer block is bundled with @framecn/skeleton.
API Reference
Skeleton
| Prop | Type | Default |
|---|---|---|
state | "loading" | "loaded" | "loading" |
style | SkeletonStyle | - (takes precedence over state) |
children | React.ReactNode | - |
placeholder | React.ReactNode | - |
layout | "lines" | "card" | "lines" |
speed | number | - |
theme | Partial<FramecnTheme> | - |
className | string | - |