Components
Skeleton
A loading placeholder that mimics the shape of content while it loads.
Category: Feedback / Standalone
Import from @hareru/ui:
import { Skeleton } from "@hareru/ui"Exports
| Export | Description |
|---|---|
Skeleton | Renders a div with aria-hidden="true" and a pulsing animation |
Notes
- Size and shape are controlled via
styleorclassName. aria-hidden="true"is applied automatically so screen readers skip the placeholder.- No variant props are needed; use inline styles or utility classes for dimensions.
Accessibility
- ARIA attributes:
aria-hidden - Notes: Hidden from screen readers as it is a visual loading placeholder.
Usage
Card-style skeleton:
import { Skeleton } from "@hareru/ui"
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
<Skeleton style={{ width: "2.5rem", height: "2.5rem", borderRadius: "9999px" }} />
<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem", flex: 1 }}>
<Skeleton style={{ width: "60%", height: "0.875rem" }} />
<Skeleton style={{ width: "40%", height: "0.875rem" }} />
</div>
</div>Full card skeleton:
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
<Skeleton style={{ width: "100%", height: "12rem" }} />
<Skeleton style={{ width: "75%", height: "1rem" }} />
<Skeleton style={{ width: "50%", height: "0.875rem" }} />
</div>