Componentskeleton
Skeleton
Use to show a placeholder while content is loading.
Preview
Use to show a placeholder while content is loading.
<div class="flex items-center space-x-4">
@ui.Skeleton(ui.DOMProps{Class: "size-12 rounded-full"})
<div class="space-y-2">
@ui.Skeleton(ui.DOMProps{Class: "h-4 w-[250px]"})
@ui.Skeleton(ui.DOMProps{Class: "h-4 w-[200px]"})
</div>
</div>Installation
Add this component to your project using the CLI.
templcn add skeletonUsage
1. Import the component in your Go or templ file:
import "your-module/ui"2. Use the component in your template:
<div class="flex items-center space-x-4">
@ui.Skeleton(ui.DOMProps{Class: "size-12 rounded-full"})
<div class="space-y-2">
@ui.Skeleton(ui.DOMProps{Class: "h-4 w-[250px]"})
@ui.Skeleton(ui.DOMProps{Class: "h-4 w-[200px]"})
</div>
</div>Composition
Use these parts together to build the component.
SkeletonExamples
Named examples and common variations.
User avatar skeleton
A typical loading placeholder for a user card.
<div class="flex items-center gap-4">
@ui.Skeleton(ui.DOMProps{Class: "size-12 rounded-full"})
<div class="grid gap-2 flex-1">
@ui.Skeleton(ui.DOMProps{Class: "h-4 w-full"})
@ui.Skeleton(ui.DOMProps{Class: "h-4 w-3/4"})
</div>
</div>Card skeleton
A full card placeholder.
@ui.Card(ui.DOMProps{Class: "w-64"}) {
@ui.CardHeader(ui.DOMProps{}) {
@ui.Skeleton(ui.DOMProps{Class: "h-5 w-2/3"})
@ui.Skeleton(ui.DOMProps{Class: "h-4 w-1/2 mt-1"})
}
@ui.CardContent(ui.DOMProps{}) {
@ui.Skeleton(ui.DOMProps{Class: "h-24 w-full"})
}
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| DOMProps.Class | string | "" | Width, height, and shape classes (e.g. h-4 w-1/2 rounded-full). |
View source
package ui
import (
"context"
"io"
"github.com/a-h/templ"
)
func Skeleton(props DOMProps) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
return renderElement(ctx, w, "div", attrsFromDOMProps(props, "skeleton", "animate-pulse rounded-md bg-accent"), nil)
})
}