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/components"
)
templ SkeletonDefault() {
<div class="space-y-2 w-full max-w-sm">
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-full"})
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-2/3"})
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-1/3"})
</div>
}
package components
import "github.com/axzilla/templui/utils"
type SkeletonProps struct {
ID string
Class string
Attributes templ.Attributes
}
templ Skeleton(props ...SkeletonProps) {
{{ var p SkeletonProps }}
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>
}
Usage
@components.Skeleton(components.SkeletonProps{...})Examples
Profile
package showcase
import (
"github.com/axzilla/templui/components"
)
templ SkeletonProfile() {
<div class="flex items-center gap-4 w-full max-w-sm">
@components.Skeleton(components.SkeletonProps{Class: "h-12 w-12 rounded-full"})
<div class="space-y-2 w-full">
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-full"})
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-3/4"})
</div>
</div>
}
package components
import "github.com/axzilla/templui/utils"
type SkeletonProps struct {
ID string
Class string
Attributes templ.Attributes
}
templ Skeleton(props ...SkeletonProps) {
{{ var p SkeletonProps }}
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>
}
Card
package showcase
import (
"github.com/axzilla/templui/components"
)
templ SkeletonCard() {
<div class="p-4 w-full max-w-sm">
@components.Skeleton(components.SkeletonProps{Class: "h-[200px] w-full rounded-md mb-4"})
<div class="space-y-2">
@components.Skeleton(components.SkeletonProps{Class: "h-5 w-2/3"})
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-full"})
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-full"})
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-3/4"})
</div>
</div>
}
package components
import "github.com/axzilla/templui/utils"
type SkeletonProps struct {
ID string
Class string
Attributes templ.Attributes
}
templ Skeleton(props ...SkeletonProps) {
{{ var p SkeletonProps }}
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>
}
Dashboard
package showcase
import (
"github.com/axzilla/templui/components"
)
templ SkeletonDashboard() {
<div>
<div class="grid gap-6 md:grid-cols-3">
for i := 0; i < 3; i++ {
<div class="p-4">
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-20 mb-2"})
@components.Skeleton(components.SkeletonProps{Class: "h-8 w-24 mb-4"})
<div class="flex items-center gap-2">
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-12"})
@components.Skeleton(components.SkeletonProps{Class: "h-4 w-4"})
</div>
</div>
}
</div>
<div class="mt-4 p-4">
@components.Skeleton(components.SkeletonProps{Class: "h-5 w-1/3 mb-6"})
@components.Skeleton(components.SkeletonProps{Class: "h-[240px] w-full rounded-md"})
</div>
</div>
}
package components
import "github.com/axzilla/templui/utils"
type SkeletonProps struct {
ID string
Class string
Attributes templ.Attributes
}
templ Skeleton(props ...SkeletonProps) {
{{ var p SkeletonProps }}
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>
}