Installation & Quick Start
Get up and running in less than 60 seconds. Skelcraft requires only React 18+ or 19+ and has zero runtime dependencies.
Install Package
Include Stylesheet
Import the lightweight Vanilla CSS stylesheet once in your application entry file (e.g. main.jsx, index.jsx, or app/layout.jsx):
import "skelcraft/styles.css";Quick Start Example
import { Skeleton, SkeletonGroup } from "skelcraft";
import "skelcraft/styles.css";
export default function LoadingCard() {
return (
<SkeletonGroup direction="column" gap={12} width={360}>
<Skeleton width="60%" height={20} radius={6} />
<Skeleton width="100%" height={12} radius={4} />
<Skeleton width="80%" height={12} radius={4} />
</SkeletonGroup>
);
}Ready to build deeper layouts?
Explore our component APIs or test live parameters in the visual studio.
Why Choose Skelcraft?
“Your layout. Your dimensions. Your skeleton. Complete creative freedom.” Say goodbye to opinionated, inflexible skeleton boxes.
Composable Component Hierarchy
Build loading skeletons using Flexbox and CSS Grid just like constructing ordinary React UI components. Nest placeholders naturally without rigid boundaries.
Pure Vanilla CSS Engine
Zero dependencies on Tailwind CSS, Bootstrap, or heavy JS-driven animation runtimes. Under 2KB of pure, optimized CSS that delivers blistering performance.
Fluid Dimension Control
Seamlessly pass numbers (200 = 200px), CSS strings ('100%', '10rem'), or complex mathematical expressions like calc(100% - 32px) and clamp().
First-Class Responsive Engine
Define multi-device skeletons via declarative breakpoint maps: width={{ base: '100%', md: '50%', lg: '33%' }}. Adapts across phone, tablet, and desktop.
Performant GPU Keyframes
GPU-accelerated CSS animations (shimmer, pulse, wave) engineered for 60fps rendering, automatically honoring @media (prefers-reduced-motion).
Global & Local Theming
Built-in support for light, dark, and system modes with seamless CSS custom property overrides (--sk-color-base, --sk-color-shine) and SkeletonProvider.
SSR & Next.js Hydration-Safe
Zero server crashes, deterministic IDs, and rock-solid compatibility with Next.js App Router streaming, React 18, and React 19 Server Components.
Full TypeScript Definitions
Authored in clean modern JavaScript (.jsx) for minimal overhead with comprehensive, exact .d.ts declaration files for instant IDE autocomplete.
Accessibility (a11y) First
Loading states must be completely silent and unobtrusive for assistive technology users. Skelcraft bakes in standard ARIA semantics automatically:
Non-Intrusive Geometry
Pure placeholders carry aria-hidden='true', preventing screen readers from reciting empty visual blocks.
Presentation Layout Roles
Grouping containers default to role='presentation' so semantic hierarchy remains intact.
Dynamic State Announcements
Stateful SkeletonWrapper manages aria-busy='true' while fetching and flips to 'false' upon render.
prefers-reduced-motion
CSS keyframes automatically cease continuous movement when user system preferences request reduced motion.
Full TypeScript Support
Authored in clean modern JavaScript (.jsx) for minimal runtime footprint while shipping exact declaration files for full IDE autocomplete:
import type {
SkeletonProps,
SkeletonGroupProps,
SkeletonTextProps,
SkeletonAvatarProps,
SkeletonImageProps,
SkeletonPresetProps,
SkeletonWrapperProps,
SkeletonProviderProps,
SkeletonAnimation,
SkeletonTheme,
ResponsiveValue,
} from "skelcraft";Contributing to Skelcraft
Open-source and MIT licensed. Pull requests, bug reports, and design suggestions are warmly welcome!