leptos-shadcn-ui/docs/components/api/skeleton.md

Skeleton Component API

A loading placeholder component for content that is still loading.

---

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-skeleton = "0.7"

use shadcn_ui_leptos_skeleton::Skeleton;

---

Component API

Skeleton

Prop	Type	Default	Description
class	MaybeProp<String>	None	Additional CSS classes
width	MaybeProp<String>	None	Custom width
height	MaybeProp<String>	None	Custom height

---

Usage Examples

Basic Skeleton

use leptos::prelude::*;
use shadcn_ui_leptos_skeleton::Skeleton;

#[component]
pub fn MyComponent() -> impl IntoView {
    view! {
        <Skeleton />
    }
}

Card Skeleton

view! {
    <div class="space-y-4">
        <Skeleton class="h-12 w-12 rounded-full" />
        <Skeleton class="h-4 w-[250px]" />
        <Skeleton class="h-4 w-[200px]" />
    </div>
}

Custom Size

view! {
    <Skeleton width="100px" height="100px" />
}

---

CSS Classes

.skeleton {
    animate-pulse rounded-md bg-muted
}

---

Accessibility

ARIA Attributes

• role="status" - Status for screen readers
• aria-live="polite" - Announces to screen readers
• Hidden from assistive technology (loading placeholder)

---

TypeScript API

interface SkeletonProps {
  className?: string;
  width?: string;
  height?: string;
}

export const Skeleton: React.FC<SkeletonProps>;

---

Source: packages/leptos/skeleton/src/default.rs