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.
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 skeletonCopy and paste the following code into your project:
package skeleton import "github.com/axzilla/templui/internal/utils" type Props struct { ID string Class string Attributes templ.Attributes } templ Skeleton(props ...Props) { {{ var p Props }} if len(props) > 0 { {{ p = props[0] }} } <div if p.ID != "" { id={ p.ID } } class={ utils.TwMerge( "animate-pulse rounded bg-muted", p.Class, ), } { p.Attributes... } ></div> }Update the import paths to match your project setup.
Examples
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>
}