Skip to content
Paramanu v0.1.0-alpha.0

Skeleton

Skeleton provides placeholder loading states with text, circular, and rectangular variants for content previews.

Basic Usage

import { Skeleton } from "@paramanu/feedback-react"


export default function App() {
return <Skeleton variant="text" width="60%" />
}
<div class="pm-skeleton pm-skeleton--text" aria-hidden="true" style="width: 60%;"></div>

Variants

import { Skeleton } from "@paramanu/feedback-react"


export default function App() {
return (
  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
    <Skeleton variant="text" width="60%" />
    <Skeleton variant="circular" size="md" />
    <Skeleton variant="rectangular" width={200} height={100} />
  </div>
)
}
<div style="display: flex; flex-direction: column; gap: 16px;">
<div class="pm-skeleton pm-skeleton--text" aria-hidden="true" style="width: 60%;"></div>
<div class="pm-skeleton pm-skeleton--circular pm-skeleton--md" aria-hidden="true"></div>
<div class="pm-skeleton pm-skeleton--rectangular" aria-hidden="true" style="width: 200px; height: 100px;"></div>
</div>