Shadcn Skeleton List With Actions

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

Skeleton loader for a list with actions

For AI Agents

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

Best for: A titled list with a header button bar over 3 divided rows of avatar, 2 text lines and a trailing action 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 avatar with its name lines and no list header or row button: use the Skeleton Avatar Info 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

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-7.md

MCPget_example("c-skeleton-7")

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

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Skeleton List With Actions

About Shadcn Skeleton List With Actions

What You Can Build With Shadcn Skeleton List With Actions

Composes 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-7
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
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

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 List With Actions?

Use it for a titled list with a header button bar over 3 divided rows of avatar, 2 text lines and a trailing action 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 avatar with its name lines and no list header or row button, use the Skeleton Avatar Info 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 List With Actions?

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

Is Shadcn Skeleton List With Actions free to use?

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

Which components does Shadcn Skeleton List With Actions use?

It composes 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.