If your API takes a second to return data, the page should not look empty during that time. A skeleton gives the user the shape of the content before the data is ready.
For React and Next.js developers, this is especially useful for dashboards, tables, profile screens, cards, and lists. The loading state can follow the same layout as the final component.
This guide looks at the most useful Shadcn Skeleton examples, how to install them, where each pattern fits, and what to check before using one in production.
What is Shadcn Skeleton?
Shadcn Skeleton is a loading placeholder that represents content before it is available. Instead of showing an empty container, you display blocks that approximate the final content.
A skeleton can represent a heading, image, avatar, card, table row, or complete section. You decide the dimensions and layout based on the component being loaded.
Since the implementation can live in your project, you can change its Tailwind CSS classes and structure to match your existing UI.
How can Shadcn Skeleton help developers?
Skeletons help preserve the layout while asynchronous content is loading. This can be useful for API requests, database queries, image loading, dashboard metrics, and user data.
The important distinction is that the skeleton should describe the content rather than simply indicate that something is happening.
The components can be installed with pnpm, npm, yarn, or bun. Depending on the implementation, the underlying component setup can use Radix UI or Base UI.
Install a Shadcn Skeleton component
With pnpm:
pnpm dlx shadcn@latest add @shadcn-space/skeleton-01
You can use npm, yarn, or bun if that is the package manager already used in your project.
Once added, the source can be edited directly to match your application.
Best Shadcn Skeleton Components and Examples
These shadcn skeleton examples cover five common UI structures. Each one solves a different loading problem.
Basic Skeleton is the smallest building block in this list. It works when you need a placeholder for a single element rather than an entire component.
It can represent text, images, inputs, buttons, or other small pieces of UI. You can combine multiple instances when building a custom loading state.
Use cases:
- Text content
- Images
- Inputs
- Buttons
- Labels
Best for: Small placeholders and custom component states.
Card Skeleton is useful when your application renders repeated cards from data. It can reserve space for the visual area, heading, description, and action controls.
This keeps the grid structure visible while the request is pending and reduces the difference between the loading and loaded states.
Use cases:
- Analytics widgets
- Product grids
- Blog cards
- SaaS dashboards
- Search results
Best for: Data-driven card layouts.
This pattern combines profile information with statistics. It can represent the avatar, name, supporting text, and metrics while the required data is being loaded.
It is useful for account pages and other interfaces where user identity and numerical data appear together.
Use cases:
- Account dashboards
- User profiles
- Customer pages
- Team pages
- Author pages
Best for: User interfaces that combine identity and metrics.
A table skeleton is useful when the application cannot render its rows until data arrives. Adding avatar placeholders makes it suitable for tables that contain user or customer information.
The key is to maintain the same row height and approximate column widths as the final table.
Use cases:
- Customer tables
- User management
- Team lists
- Activity logs
- Transactions
Best for: Tables with profile or identity columns.
List with Icons Skeleton fits interfaces where information is displayed as repeated compact rows. The icon, title, and supporting text can each have their own placeholder.
This pattern works well for activity feeds and notification areas where a table would add unnecessary structure.
Use cases:
- Notifications
- Activity feeds
- Files
- Navigation
- Search results
Best for: Compact repeated content.
How to choose the right Shadcn Skeleton pattern
Start with the final component rather than the loading animation.
| Final UI | Recommended pattern |
|---|
| Single element | Basic Skeleton |
| Card | Card Skeleton |
| Profile and metrics | Profile with Stats Skeleton |
| Data table | Table with Avatars Skeleton |
| Compact list | List with Icons Skeleton |
A skeleton that closely matches the final UI also makes layout changes less noticeable when the real content appears.
Shadcn Skeleton best practices for React and Next.js
Build around the data boundary
Place the skeleton where asynchronous data is actually required. Avoid showing a loading state for content that is already available.
Match content dimensions
Text width, image size, avatar shape, card height, and row spacing should be close to the final component.
Use simple animation
A subtle pulse is enough for most loading states. Avoid adding animation that makes the page harder to scan.
Consider accessibility
Loading content should have appropriate semantics where necessary. For example:
<div aria-busy="true" aria-label="Loading profile">
<Skeleton className="h-12 w-12 rounded-full" >
</div>
Test the transition
Do not test only the skeleton. Test the transition from skeleton to real content as well. This is where unexpected height changes and layout movement usually become visible.
Shadcn Skeleton vs spinner
A skeleton is better when the user can predict what is coming next.
A spinner is better when the user is waiting for an action rather than a known content structure.
For example, use a skeleton for a product grid loading from an API. Use a spinner inside a submit button while a form request is being processed.
What tech stack works with Shadcn Skeleton?
Typical implementations use:
- React
- Next.js
- TypeScript
- Tailwind CSS
- shadcn CLI
- Radix UI
- Base UI
- Framer Motion
Your actual project dependencies may differ based on the selected implementation and existing setup.
Shadcn Skeleton installation checklist
- Identify the loading boundary
- Select the matching UI pattern
- Match final dimensions
- Keep spacing consistent
- Confirm the package manager
- Check the UI base being used
- Install the component
- Test API loading
- Test slow connections
- Check accessibility
- Test the transition to loaded content
Frequently asked questions
How do I use Shadcn Skeleton for API loading in Next.js?
Create a loading state that matches the component returned by your API. For cards, use card-shaped placeholders; for tables, preserve rows and columns; for profiles, represent the avatar and text fields.
How do I install Shadcn Skeleton with npm, pnpm, yarn, or bun?
Use the shadcn CLI with your preferred package manager. The command adds the component source to your project, after which you can import and modify it like other local components.
When should I use a skeleton instead of a loading spinner in React?
Use a skeleton when the content structure is predictable. Use a spinner when you are indicating an action or process that does not have a specific content layout.
Conclusion
Skeleton loading states are most useful when they follow the same structure as the content being loaded. That makes them a practical choice for React and Next.js dashboards, cards, tables, profiles, and lists.
Choose the simplest pattern that matches your UI. Keep the dimensions close to the final component, avoid unnecessary animation, test the loading transition, and handle accessibility where required.
A good skeleton should fit into your existing component architecture rather than becoming a separate visual system.