Skeleton loader for avatars and user info.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A 48px avatar circle beside 2 fixed width text bars, the second shorter, with no card around them
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
- A titled list of avatar rows, each ending in its own action button: use the Skeleton List With Actions example
- 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
Skeletonhas no size of its own, so every placeholder here sets its height and width by class; size yours to the content it stands in forSkeletonis 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
Skeletonfollows the style, square in lyra and sera and rounded-2xl in luma and rhea; circles need rounded-full
https://reui.io/components/skeleton/c-skeleton-1.mdget_example("c-skeleton-1")npx shadcn@latest add @reui/c-skeleton-1Shadcn Components in Skeleton Avatar Info
About Shadcn Skeleton Avatar Info
Skeleton loader for avatars and user info. Built with the Skeleton component. A free, open source shadcn skeleton example you can install with npx shadcn@latest add @reui/c-skeleton-1 and edit as your own code.
What You Can Build With Shadcn Skeleton Avatar Info
- Composes Skeleton, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-skeleton-1
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Skeleton Examples
- 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
- Profile Page Skeleton loader for a full profile page
- Chat Messages Skeleton loader for chat messages
Related Shadcn Component Categories
Open-source shadcn slider components for range filters, pricing controls, and media settings.
Open-source shadcn Sonner toast components for success feedback, error states, and non-blocking updates.
Open-source shadcn sortable components for drag-and-drop lists, priority ranking, and reordering rows.
Open-source shadcn spinner components for loading indicators, async actions, and button states.
Open-source shadcn stepper components for multi-step forms, checkout flows, and onboarding.
Open-source shadcn switch components for settings toggles, preferences, and binary choices.
Frequently Asked Questions
When should I use Shadcn Skeleton Avatar Info?
Use it for a 48px avatar circle beside 2 fixed width text bars, the second shorter, with no card around them.
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 a titled list of avatar rows, each ending in its own action button, use the Skeleton List With Actions example. 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 Avatar Info?
Is Shadcn Skeleton Avatar Info free to use?
Which components does Shadcn Skeleton Avatar Info use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.