A shadcn/ui inspired Blazor component library

Installation

Add the Skeleton component using the CLI:

shadcnblazor component add skeleton

Usage

The Skeleton component displays a loading placeholder with a pulse animation. Use the Class parameter to customize the shape (e.g., h-12 w-12 rounded-full for avatars, h-4 w-[250px] for text lines).

1

<Skeleton Class="h-4 w-[250px]" />

Examples

Shapes

Combine Skeleton components with different Class values to build loading states for cards, avatars, or form layouts.

1

2

3

4

5

6

7

8

9

10

<div class="flex flex-col gap-4">
    <div class="flex items-center gap-4">
        <Skeleton Class="h-12 w-12 rounded-full" />
        <div class="flex flex-col gap-2">
            <Skeleton Class="h-4 w-[250px]" />
            <Skeleton Class="h-4 w-[200px]" />
        </div>
    </div>
    <Skeleton Class="h-[125px] w-full rounded-xl" />
</div>

API Reference

Skeleton

Loading placeholder with pulse animation. Use the Class parameter to customize shape (e.g., h-12 w-12 rounded-full for avatar, h-4 w-[250px] for text).

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`Class`	`string`

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.