Skeleton

Use to show a placeholder while content is loading.

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton" templ SkeletonDemo() {	<div class="flex items-center gap-4">		@skeleton.Skeleton(skeleton.Props{Class: "h-12 w-12 rounded-full"})		<div class="space-y-2">			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-[250px]"})			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-[200px]"})		</div>	</div>}

Installation

shadcn-templ add skeleton

Copy and paste the following code into your project.

components/skeleton/skeleton.templ

package skeleton import "github.com/axadrn/shadcn-templ/v2/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 }		}		data-slot="skeleton"		class={ utils.CN("cn-skeleton animate-pulse", p.Class) }		{ p.Attributes... }	></div>}

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

@skeleton.Skeleton(skeleton.Props{Class: "h-[20px] w-[100px] rounded-full"})

Avatar

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton" templ SkeletonAvatar() {	<div class="flex w-fit items-center gap-4">		@skeleton.Skeleton(skeleton.Props{Class: "size-10 shrink-0 rounded-full"})		<div class="grid gap-2">			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-[150px]"})			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-[100px]"})		</div>	</div>}

Card

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/card"	"github.com/axadrn/shadcn-templ/v2/components/skeleton") templ SkeletonCard() {	@card.Card(card.Props{Class: "w-full max-w-xs"}) {		@card.Header() {			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-2/3"})			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-1/2"})		}		@card.Content() {			@skeleton.Skeleton(skeleton.Props{Class: "aspect-video w-full"})		}	}}

Text

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton" templ SkeletonText() {	<div class="flex w-full max-w-xs flex-col gap-2">		@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>}

Form

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton" templ SkeletonForm() {	<div class="flex w-full max-w-xs flex-col gap-7">		<div class="flex flex-col gap-3">			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-20"})			@skeleton.Skeleton(skeleton.Props{Class: "h-8 w-full"})		</div>		<div class="flex flex-col gap-3">			@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-24"})			@skeleton.Skeleton(skeleton.Props{Class: "h-8 w-full"})		</div>		@skeleton.Skeleton(skeleton.Props{Class: "h-8 w-24"})	</div>}

Table

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton"

package examples import "github.com/axadrn/shadcn-templ/v2/components/skeleton" templ SkeletonTable() {	<div class="flex w-full max-w-sm flex-col gap-2">		for range 5 {			<div class="flex gap-4">				@skeleton.Skeleton(skeleton.Props{Class: "h-4 flex-1"})				@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-24"})				@skeleton.Skeleton(skeleton.Props{Class: "h-4 w-20"})			</div>		}	</div>}

API Reference

Skeleton

The Skeleton component renders an animated placeholder block.

Prop	Type	Default
`Class`	`string`	-

Sidebar Slider

On This Page

Installation Usage Avatar Card Text Form Table API Reference Skeleton

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.