Loading...
Please waitLoading...
Please waitGenerate context-aware skeleton placeholders (text, avatars, cards, lists) without hand-coding markup.
pnpm dlx uselab@latest add use-smart-placeholder
import * as React from "react"
import { useSmartPlaceholder } from "@/hooks/use-smart-placeholder"
export function SkeletonCard() {
const placeholder = useSmartPlaceholder("card", {
tone: "soft",
})
return (
<article className="rounded-xl border bg-card p-4">
{placeholder.render()}
</article>
)
}| Name | Type | Description | Default Value |
|---|---|---|---|
type | "text" | "avatar" | "thumbnail" | "card" | "list" | Controls overall layout preset. | "text" |
options.lines | number | Number of lines (for text/list presets). | 3 |
options.tone | "default" | "soft" | "contrast" | Background intensity. | "default" |
options.shape | "text" | "avatar" | "thumbnail" | "card" | Override skeleton shape. | derived from type |
options.width / options.height | string | Force specific dimensions. | random widths |
| Name | Type | Description |
|---|---|---|
render | () => ReactNode | Call to render the placeholder node(s) for the configured type. |
render() again (or re-render component) to regenerate.type="list" for repeating rows (icon + text) and type="card" for more immersive content blocks.Switch between skeleton types without creating new markup.
Rendering card skeleton. Use the buttons to preview each preset.