Skeleton
---import { Skeleton } from "@/components/starwind/skeleton";---
<div class="flex items-center space-x-4"> <Skeleton class="h-12 w-12 rounded-full" /> <div class="space-y-2"> <Skeleton class="h-4 w-[250px]" /> <Skeleton class="h-4 w-[200px]" /> </div></div>Installation
pnpx starwind@latest add skeletonnpx starwind@latest add skeletonyarn dlx starwind@latest add skeletonUsage
Card Skeleton
---import { Skeleton } from "@/components/starwind/skeleton";---
<div class="flex flex-col space-y-3"> <Skeleton class="h-[125px] w-[250px] rounded-xl" /> <div class="space-y-2"> <Skeleton class="h-4 w-[250px]" /> <Skeleton class="h-4 w-[200px]" /> </div></div>Table Skeleton
---import { Skeleton } from "@/components/starwind/skeleton";---
<div class="space-y-2 w-[250px]"> <Skeleton class="h-8 w-full" /> <Skeleton class="h-8 w-full" /> <Skeleton class="h-8 w-full" /> <Skeleton class="h-8 w-full" /> <Skeleton class="h-8 w-full" /></div>API Reference
Skeleton
A loading placeholder animation that can be used to indicate content is being loaded.
| Prop | Type | Default |
|---|---|---|
class | string | - |
<Skeleton class="h-12 w-12 rounded-full" />Additional Notes:
- The default styles can be extended or overridden using the
classprop - Use Tailwind classes to control size, shape, and spacing
Changelog
v1.2.0
- style updates
v1.1.0
- Add
data-slotattribute to enable global styling updates
v1.0.0
- Initial release with starwind v1.7.0