API Reference
Component Documentation
Complete API reference for all 8 Skelcraft components. Inspect props, live demos, and copy-paste examples.
<Skeleton />
skelcraftThe fundamental atomic placeholder element for arbitrary UI blocks.
import { Skeleton } from "skelcraft";Live Demo Canvas
GPU-accelerated CSS KeyframeReady
Basic Usage Example
<Skeleton width="100%" height={160} radius={8} />Copy and drop directly into your React or Next.js components.
Props Specification
| Prop | Type | Default | Description |
|---|---|---|---|
| width | string | number | ResponsiveValue | '100%' | Width in px (number), CSS string, or responsive map |
| height | string | number | ResponsiveValue | 16 | Height in px (number), CSS string, or responsive map |
| minWidth / maxWidth | string | number | ResponsiveValue | undefined | Min and max width constraints |
| minHeight / maxHeight | string | number | ResponsiveValue | undefined | Min and max height constraints |
| radius | string | number | 4 | Border radius (number = px, string = CSS value) |
| background | string | undefined | Custom base background color override |
| animation | 'shimmer' | 'pulse' | 'wave' | 'none' | 'shimmer' | Animation mode |
| duration | string | '1.5s' | Animation cycle duration |
| delay | string | undefined | Animation delay |
| inline | boolean | false | When true, renders with display: inline-block |
| as | ElementType | 'div' | HTML tag to render as ('span', 'article', etc.) |
| visible | boolean | true | If false, renders nothing (null) |
| loading | boolean | undefined | If false, renders children instead of skeleton placeholder |
Next Steps & Advanced Features
Assemble full templates or adjust responsiveness and theme tokens.