Text Skeleton
A skeleton placeholder component designed to mimic the height of text lines during loading states
Loading...
pnpm dlx @sikka/naseem add text-skeletonnpx @sikka/naseem add text-skeletonyarn dlx @sikka/naseem add text-skeletonbunx --bun @sikka/naseem add text-skeletonUsage
The Text Skeleton component provides a loading placeholder that matches the line-height of surrounding text, making it ideal for content-loading states.
import { TextSkeleton } from "@/components/ui/text-skeleton"
export default function Loading() {
return (
<div className="space-y-1.5">
<TextSkeleton className="w-3/4 text-sm" />
<TextSkeleton className="w-full text-sm" />
<TextSkeleton className="w-1/2 text-sm" />
</div>
)
}Props
The TextSkeleton component accepts all native span element props. Use className to control width, text size, and other styling.
Prop
Type
Dependencies
{
"@radix-ui/react-skeleton": "latest"
}