Advanced Customization
Responsive & Theme Customization
Shape placeholders across every screen size, utilize complex CSS mathematical functions, and personalize colors via standard CSS variables.
First-Class Responsive Engine
Pass declarative breakpoint maps directly to width, height, or gap without writing separate CSS media queries:
<Skeleton
width={{
base: "100%",
sm: "80%",
md: "60%",
lg: "50%",
}}
height={{
base: 120,
md: 200,
}}
/>| Breakpoint | Min Width | Typical Target |
|---|---|---|
| base | 0px | Mobile portrait screens |
| sm | 640px | Mobile landscape & small devices |
| md | 768px | Tablets & compact monitors |
| lg | 1024px | Small desktop screens & laptops |
| xl | 1280px | Large desktop displays |
| 2xl | 1536px | Ultra-wide gaming monitors |
CSS Math: calc() & clamp()
Skelcraft normalizes arbitrary CSS functions cleanly without string mangling or browser parsing errors:
<Skeleton width="calc(100% - 32px)" height={140} /><Skeleton width="clamp(240px, 50%, 640px)" height={90} />Automatic Reduced Motion
Skelcraft halts all continuous keyframe animations when user preferences indicate prefers-reduced-motion: reduce, ensuring immediate accessibility compliance.
Official Brand Design Tokens
Override theme tokens globally in your project stylesheet.
:root {
--sk-color-base: #19122A;
--sk-color-shine: #2B2140;
--sk-color-highlight: #231938;
--sk-radius: 8px;
--sk-duration: 1.5s;
}
[data-skeleton-theme="dark"] {
--sk-color-base: #19122A;
--sk-color-shine: #2B2140;
--sk-color-highlight: #231938;
}--sk-color-base
Base skeleton background fill
Default: #19122A
--sk-color-shine
Highlight animation gradient sweep
Default: #2B2140
--sk-color-highlight
Secondary accent layer color
Default: #231938
--sk-radius
Default border radius across placeholders
Default: 8px
--sk-duration
Animation cycle duration
Default: 1.5s
--sk-delay
Animation initial delay
Default: 0s
Experiment with Custom Tokens
Test tokens visually or review the component props specification.