︲

︲

Skeleton

Custom skeleton component.

Installation

Copy the following code into your app directory.

uv

buridan add component skeleton
Usage
from components.ui.skeleton import skeleton_component
Anatomy

Use the following composition to build a Skeleton

skeleton_component()
Examples
General
from components.ui.skeleton import skeleton_component


def skeleton_general():
    return skeleton_component(class_name="h-8 w-32 rounded-md")
Card
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",
    )
Table
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",
    )