︲

︲

Skeleton

Use to show a placeholder while content is loading.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component skeleton
from components.ui.skeleton import skeleton

Anatomy

Use the following composition to build a Skeleton component.

skeleton_component()
from components.ui.skeleton import skeleton_component


def skeleton_general():
    return skeleton_component(class_name="h-8 w-32 rounded-md")
from components.ui.card import card
from components.ui.skeleton import skeleton_component


def skeleton_card():
    return card.root(
        card.header(
            skeleton_component(class_name="h-4 w-2/3 rounded-md"),
            skeleton_component(class_name="h-4 w-1/2 rounded-md"),
        ),
        card.content(
            skeleton_component(class_name="aspect-video w-full rounded-md"),
        ),
        class_name="w-full max-w-xs border border-input rounded-radius",
    )
import reflex as rx

from components.ui.skeleton import skeleton_component


def skeleton_table():
    """Skeleton table matching shadcn SkeletonTable layout."""

    return rx.el.div(
        *[
            rx.el.div(
                skeleton_component(class_name="h-4 flex-1"),
                skeleton_component(class_name="h-4 w-24"),
                skeleton_component(class_name="h-4 w-20"),
                class_name="flex gap-4",
                key=str(i),
            )
            for i in range(5)
        ],
        class_name="flex w-full max-w-sm flex-col gap-2",
    )