Skeleton loader for chat messages
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Incoming bubbles with an avatar and sender bar, one outgoing bubble on the right and a reply field with a square button bar
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
- One reply that waits and then streams in under turns already on screen: use the Message component
- A form of labeled fields above a single button: use the Skeleton Form 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-10.mdget_example("c-skeleton-10")npx shadcn@latest add @reui/c-skeleton-10About Shadcn Skeleton Chat Messages
Skeleton loader for chat messages. Built by composing Card, Skeleton. A free, open source shadcn skeleton example you can install with npx shadcn@latest add @reui/c-skeleton-10 and edit as your own code.
What You Can Build With Shadcn Skeleton Chat Messages
- Composes Card, Skeleton, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-skeleton-10
- 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
- Profile Page Skeleton loader for a full profile page
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 Chat Messages?
Use it for incoming bubbles with an avatar and sender bar, one outgoing bubble on the right and a reply field with a square button bar.
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 one reply that waits and then streams in under turns already on screen, use the Message component. For a form of labeled fields above a single button, use the Skeleton Form 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 Chat Messages?
Is Shadcn Skeleton Chat Messages free to use?
Which components does Shadcn Skeleton Chat Messages 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.