Design System Builder

Skeleton

Skeleton is a component component that provides skeleton functionality.

Active

Examples

variant

Different variant options for the Skeleton component.

default

text

avatar

Installation

npm install @your-design-system/skeleton
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {
  return (
    <Skeleton variant="default">
      {/* Content */}
    </Skeleton>
  )
}

API Reference

This component does not accept any props.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

animate-pulserounded-md

variant Variants

default

bg-muted

text

bg-mutedh-4

avatar

bg-mutedrounded-full

Design System Compliance

This component is validated against atomic design principles and foundation token usage.