React Aria skeleton blocks.

They are 100 React loading states, each a whole screen or section drawn as placeholders, in 15 groups: tables, lists and trees, forms, settings and profiles, cards, articles and posts, calendars and boards, chat and email, notifications and activity, dashboards and stats, shells and navigation, shopping and billing, galleries and players, marketing sections, code and maps. They show what the page looks like while its data loads, and each one swaps to its content in the same box.

Basic Table Skeleton keeps the column heads real and turns the cells into bars, Basic Form Skeleton keeps the labels and buttons while the values load, Card Grid Skeleton lays out the cards before their text arrives, and Full Dashboard Skeleton keeps the nav and headings real around the figures and chart.

Each block has a Load control that swaps typed sample data in after a short wait, row by row or field by field, and a Reload that goes back to the bars. The wait is a timer in the file, since nothing is fetched. Your loading state replaces the timer.

Render the placeholder while your request is pending and the real content when it resolves, in the same grid cell, as the blocks do. In Basic Table Skeleton the bar and the data share one cell, so the panel is exactly as tall in every phase and nothing jumps.

Replace the block's Load timer with your own pending flag: from a data fetching library's loading state, a Suspense fallback or a framework loading file. Keep the phases the block draws: the page chrome real from the first paint, only the data placeholders as bars.

The `Skeleton` component is a div with the `animate-pulse` class, and you size it with classes to the box it stands for. Give each bar the width and height of the text or control it replaces, as the blocks do, so the swap does not resize anything.

The blocks mark the loading region `aria-busy` and use a polite status line to say what loaded, and the pulse is switched off under reduced motion. Keep both when you wire your own loading state, so assistive tech hears the result and not the placeholders.

This page lists 100 of the category's 100 skeleton blocks for React on React Aria. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The skeleton blocks here are written on React Aria primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/aria/skeleton-activity-feed.json). The other bases are one picker away from /skeleton-block/aria.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on React Aria. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/aria/skeleton-activity-feed.json for Activity Feed Skeleton. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Activity Feed Skeleton brings Avatar, Button, Guides, Native Select and Skeleton, installed before it. Nothing else changes in your project.

Use the filters above the grid: 15 kinds of skeleton block, led by tables (9), dashboards and stats (9), shells and navigation (9) and lists and trees (8), and sort by popular or name. A good first look: Activity Feed Skeleton, Analytics Dashboard Skeleton and App Shell Skeleton. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a skeleton block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the tables and lists, forms and settings and cards and content kinds.

Open its page and use the full-screen viewer (/view/skeleton/aria/activity-feed) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each skeleton block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on React Aria, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the skeleton blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 skeleton blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a skeleton block, read it with get_block and install it on your React on React Aria stack.

Pass `category: "skeleton"` to search_blocks to search only the 100 skeleton blocks, or to list_blocks for the 15 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "skeleton", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.