On this page

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@latest

Includes @ninna-ui/core. CSS setup required.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.

Live preview/ Default

Variants

Different animation variants: pulse, shine, or none.

Live preview/ Default

Pulse (default)

Shine

None

Circle

Circular skeleton for avatar placeholders.

Live preview/ Default

Text

Text skeleton for paragraph placeholders.

Live preview/ Default

With Children

Toggle between skeleton and actual content using the loading prop.

Live preview/ Default

Use Cases

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

Live preview/ Default

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