Skeleton loader for a card grid
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A card led by a 16:9 media block, then a heading bar and 2 copy lines over a footer with a wide and 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
- A card whose title bars sit above the image, with no footer: use the Skeleton Card 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
- Only one
Cardrenders despite the card grid title; repeat it inside your own grid wrapper for as many cards as a page holds 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-8.mdget_example("c-skeleton-8")npx shadcn@latest add @reui/c-skeleton-8About Shadcn Skeleton Card Grid
Skeleton loader for a card grid. Built by composing Card, Skeleton. A free, open source shadcn skeleton example you can install with npx shadcn@latest add @reui/c-skeleton-8 and edit as your own code.
What You Can Build With Shadcn Skeleton Card Grid
- 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-8
- 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
- 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 Card Grid?
Use it for a card led by a 16:9 media block, then a heading bar and 2 copy lines over a footer with a wide and 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 a card whose title bars sit above the image, with no footer, use the Skeleton Card 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 Card Grid?
Is Shadcn Skeleton Card Grid free to use?
Which components does Shadcn Skeleton Card Grid 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.