CleenUI · Feedback · Skeleton

Skeleton

Placeholder shimmer for loading states — 23 variants matching the primary content components.

storybook.cleenui.com · feedback-skeleton--default
Open in new window

About Skeleton

Skeleton renders a shimmering placeholder shape that matches the layout of the content that will replace it. Use skeletons in place of Loader when the wait is long enough that users would otherwise wonder if anything is happening.

The 23 variants correspond to common content shapes: card, list-row, avatar, paragraph, chart, image — each pre-styled to match its real counterpart so the visual transition into loaded content is smooth.

When to use it

  • Initial page load placeholders.
  • Card grid loading states.
  • DataGrid row-skeleton displays.
  • Profile and header loading shimmers.

Common props

Prop
Type
Description
variant
string
Skeleton shape (e.g. "card", "list-row", "avatar").
width
string | number
Override width.
height
string | number
Override height.
count
number
Repeat the skeleton N times.
animated
boolean
Enable shimmer animation.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.