Skeleton

Skeleton component is used to render a placeholder while the content is loading. It provides visual feedback that content is being loaded.

import { Skeleton } from "@ninna-ui/feedback"

pnpm add @ninna-ui/feedback

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Skeleton components to display loading placeholders.

import { Skeleton, SkeletonCircle, SkeletonText } from "@ninna-ui/feedback";

export default function Example() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-4">
        <SkeletonCircle size="40px" />
        <SkeletonText noOfLines={2} />
      </div>
      <Skeleton height="200px" />
    </div>
  );
}

Basic

Basic skeleton placeholders with different widths.

Variants

Different animation variants: pulse, shine, or none.

Pulse (default)

Shine

None

Circle

Circular skeleton for avatar placeholders.

Text

Text skeleton for paragraph placeholders.

With Children

Toggle between skeleton and actual content using the loading prop.

Use Cases

Common skeleton patterns for cards, profiles, feeds, and tables.

Card Skeleton

Profile Skeleton

Feed Skeleton

Table Skeleton

API Reference

Complete list of props for the Skeleton components.

Skeleton Props

Props

Prop	Type	Default	Description
`variant`	`'pulse' \| 'shine' \| 'none'`	`'pulse'`	Animation variant for the skeleton
`width`	`string \| number`	-	Width of the skeleton (e.g., '200px', 200, '100%')
`height`	`string \| number`	-	Height of the skeleton (e.g., '20px', 20)
`radius`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	Border radius of the skeleton
`loading`	`boolean`	`true`	Whether the skeleton is in loading state
`children`	`React.ReactNode`	-	Content to show when loading is false
`className`	`string`	-	Additional CSS classes

SkeletonCircle Props

Props

Prop	Type	Default	Description
`size`	`string \| number`	`'40px'`	Size of the circle (width and height)
`variant`	`'pulse' \| 'shine' \| 'none'`	`'pulse'`	Animation variant
`loading`	`boolean`	`true`	Whether the skeleton is in loading state
`children`	`React.ReactNode`	-	Content to show when loading is false
`className`	`string`	-	Additional CSS classes

SkeletonText Props

Props

Prop	Type	Default	Description
`noOfLines`	`number`	`3`	Number of text lines to render
`gap`	`string \| number`	`'8px'`	Gap between lines
`variant`	`'pulse' \| 'shine' \| 'none'`	`'pulse'`	Animation variant
`loading`	`boolean`	`true`	Whether the skeleton is in loading state
`children`	`React.ReactNode`	-	Content to show when loading is false
`className`	`string`	-	Additional CSS classes

Accessibility

Uses role="status" to indicate loading state
Sets aria-busy="true" to indicate content is loading
Includes visually hidden "Loading..." text via sr-only class for screen readers
Smoothly transitions to content when loading completes