Skeleton loader for a data table.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A 3 column header row with a bottom border over 4 body rows, laid out with flex divs, not table markup
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
- Placeholder rows inside a sortable, paged records table with known columns: 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
- Placeholder rows come from
Array.fromwith alengthof 4; match it to your page size so the loaded rows do not shift the layout 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-5.mdget_example("c-skeleton-5")npx shadcn@latest add @reui/c-skeleton-5Shadcn Components in Skeleton Data Table
About Shadcn Skeleton Data Table
Skeleton loader for a data table. Built with the Skeleton component. A free, open source shadcn skeleton example you can install with npx shadcn@latest add @reui/c-skeleton-5 and edit as your own code.
What You Can Build With Shadcn Skeleton Data Table
- 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-5
- 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.
- 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 Data Table?
Use it for a 3 column header row with a bottom border over 4 body rows, laid out with flex divs, not table markup.
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 placeholder rows inside a sortable, paged records table with known columns, 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 Data Table?
Is Shadcn Skeleton Data Table free to use?
Which components does Shadcn Skeleton Data Table 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.