/
1.1k
Sponsor

Skeleton

Shimmer loading placeholder

Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/ink/skeleton

Usage

import { Skeleton } from "@/components/ui/skeleton";
<Skeleton width={30} height={3} />

Examples

Static (No Animation)

Terminal
import { Skeleton } from "@/components/ui/skeleton";

export function SkeletonStatic() {
  return <Skeleton width={20} height={2} animated={false} />;
}

API Reference

Skeleton

PropTypeDefault
widthnumber20
heightnumber1
animatedbooleantrue

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

  • Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.