Skeleton
UI placeholder for indicating content that is loading. It's designed to be a simple building block that users can compose into more complex loading UI patterns.
Source
TailwindCSS
package showcase
import "github.com/axzilla/templui/internal/components/skeleton"
templ SkeletonDefault() {
<div class="space-y-2 w-full max-w-sm">
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-full"})
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-2/3"})
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-1/3"})
</div>
}
Installation
templui add skeletonExamples
Profile
package showcase
import "github.com/axzilla/templui/internal/components/skeleton"
templ SkeletonProfile() {
<div class="flex items-center gap-4 w-full max-w-sm">
@skeleton.Skeleton(skeleton.Props{Class: "h-12 w-12 rounded-full"})
<div class="space-y-2 w-full">
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-full"})
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-3/4"})
</div>
</div>
}
Card
package showcase
import "github.com/axzilla/templui/internal/components/skeleton"
templ SkeletonCard() {
<div class="p-4 w-full max-w-sm">
@skeleton.Skeleton(skeleton.Props{Class: "h-[200px] w-full rounded-md mb-4"})
<div class="space-y-2">
@skeleton.Skeleton(skeleton.Props{Class: "h-5 w-2/3"})
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-full"})
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-full"})
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-3/4"})
</div>
</div>
}
Dashboard
package showcase
import "github.com/axzilla/templui/internal/components/skeleton"
templ SkeletonDashboard() {
<div>
<div class="grid gap-6 md:grid-cols-3">
for i := 0; i < 3; i++ {
<div class="p-4">
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-20 mb-2"})
@skeleton.Skeleton(skeleton.Props{Class: "h-8 w-24 mb-4"})
<div class="flex items-center gap-2">
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-12"})
@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-4"})
</div>
</div>
}
</div>
<div class="mt-4 p-4">
@skeleton.Skeleton(skeleton.Props{Class: "h-5 w-1/3 mb-6"})
@skeleton.Skeleton(skeleton.Props{Class: "h-[240px] w-full rounded-md"})
</div>
</div>
}