Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Card

Card with Avatar and Content Skeleton for React

A bordered card placeholder with a round avatar, two name lines and three lines of text.

Framework
UI library

A loading card for anything someone posted: a round avatar and two short lines for the name, then three lines of text that end short like a paragraph. Every block is a Skeleton sized with classes.

Use it for comments, testimonials or feed posts, with the circle and the bars matched to the card that replaces them so nothing moves when it arrives.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What wraps this card?

flex w-full max-w-sm flex-col gap-3 rounded-md border p-4. The header and the three text bars stack in that column.

How is the avatar row built?

flex items-center gap-3 holds a size-12 rounded-full circle and a flex-1 column with gap-2. The name bar is h-4 w-24. The line under it is h-3 w-32.

Why are the body lines different widths?

They are h-4 w-full, h-4 w-5/6 and h-4 w-4/6. The shorter lines read as a paragraph ending. Match the count to the text you swap in.

What makes the avatar a circle?

rounded-full on that Skeleton. Skeleton's own radius comes from your style, and rounded-full replaces it. The text bars keep the default radius.

How do I keep the card from jumping?

Give the circle the same size as the avatar you render, and keep the three h-4 bars in line with the real paragraph. size-12 is the circle in this file.

Should the card skeleton be hidden?

Yes, when a status nearby already says the card is loading. Set aria-hidden on each Skeleton. The pulse should not be the only loading message.

All 30 skeleton examples