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>import { Skeleton } from "@/components/starwind/skeleton";
export function Example() { return ( <> <div className="flex items-center space-x-4"> <Skeleton className="h-12 w-12 rounded-full" /> <div className="space-y-2"> <Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[200px]" /> </div> </div> </> );}Installation
pnpx starwind@latest add skeletonnpx starwind@latest add skeletonyarn dlx starwind@latest add skeletonFramework Availability
Astro Available React AvailableSkeleton is available for Astro and React.
Usage
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
Changelog
v1.3.0
- Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.
v1.2.2
- Refactor tailwind variants functions into separate
variants.tsfile
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