Shadcn Skeleton Profile Page

Skeleton loader for a full profile page. Built by composing Card, Separator, Skeleton. A free, open source shadcn skeleton example you can install with npx shadcn@latest add @reui/c-skeleton-9 and edit as your own code.

Skeleton loader for a full profile page

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A profile card with an 80px avatar, name lines and 3 stat pairs, above a details card of 4 label and value rows

When to use

Placeholders for avatars and user info, text paragraphs, forms and media cards while data loads
Loading states for data tables, dashboard stats, lists with row actions, profile pages and chat threads

When not to use

Sortable record tables that draw their own placeholder rows during a fetch: use the Data Grid component
Menu links in an app navigation rail that are still being fetched: use the Sidebar component
A wait whose result has no known shape, such as a file being processed: use the Spinner component

Agent notes

CardHeader is a grid, so its items-center leaves the avatar and name bars at the left edge; add justify-items-center to center them
Skeleton has no size of its own, so every placeholder here sets its height and width by class; size yours to the content it stands in for
Skeleton is a bare div with no role or text, so screen readers hear nothing; set aria-busy on the region it fills while loading
The default radius of Skeleton follows the style, square in lyra and sera and rounded-2xl in luma and rhea; circles need rounded-full

Markdownhttps://reui.io/components/skeleton/c-skeleton-9.md

MCPget_example("c-skeleton-9")

Installnpx shadcn@latest add @reui/c-skeleton-9

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Skeleton Profile Page

About Shadcn Skeleton Profile Page

What You Can Build With Shadcn Skeleton Profile Page

Composes Card, Separator, Skeleton, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-skeleton-9
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Skeleton Examples

Avatar Info Skeleton loader for avatars and user info.
Card Skeleton loader for a card component.
Text Paragraphs Skeleton loader for text and paragraphs.
Form Skeleton loader for a form.
Data Table Skeleton loader for a data table.
Stats Row Skeleton loader for a dashboard stats row
List With Actions Skeleton loader for a list with actions
Card Grid Skeleton loader for a card grid
Chat Messages Skeleton loader for chat messages

Related Shadcn Component Categories

Slider
Open-source shadcn slider components for range filters, pricing controls, and media settings.
Sonner
Open-source shadcn Sonner toast components for success feedback, error states, and non-blocking updates.
Sortable
Open-source shadcn sortable components for drag-and-drop lists, priority ranking, and reordering rows.
Spinner
Open-source shadcn spinner components for loading indicators, async actions, and button states.
Stepper
Open-source shadcn stepper components for multi-step forms, checkout flows, and onboarding.
Switch
Open-source shadcn switch components for settings toggles, preferences, and binary choices.

Frequently Asked Questions

When should I use Shadcn Skeleton Profile Page?

Use it for a profile card with an 80px avatar, name lines and 3 stat pairs, above a details card of 4 label and value rows.

Shadcn Skeleton as a whole fits:

Placeholders for avatars and user info, text paragraphs, forms and media cards while data loads
Loading states for data tables, dashboard stats, lists with row actions, profile pages and chat threads

For sortable record tables that draw their own placeholder rows during a fetch, use the Data Grid component. For menu links in an app navigation rail that are still being fetched, use the Sidebar component. For a wait whose result has no known shape, such as a file being processed, use the Spinner component.

How do I install Shadcn Skeleton Profile Page?

Run npx shadcn@latest add @reui/c-skeleton-9. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Skeleton Profile Page free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Skeleton Profile Page use?

It composes Card, Separator, Skeleton. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.