Skelcraft 1.0 is live•Pure Vanilla CSS Engine

Build any skeleton.
Shape every layout.

A customizable Skeleton UI toolkit for React developers. Create anything from simple text placeholders to complex responsive layouts with complete control over dimensions, alignment, animations, and styling.

$npm install skelcraft

Explore Playground Documentation GitHub npm

Zero Dependencies

Next.js Hydration-Safe

Pure Vanilla CSS

TypeScript Types

Interactive Preview

Anim:

Zero layout shifts guaranteed<SkeletonWrapper />

Interactive Studio & Code Generator

Craft Your Skeleton Live

Tweak animation modes, dimensions, border radii, brand themes, and device viewports in real-time. Export ready-to-use React and Next.js JSX code with zero hassle.

Skeleton Properties

Animation Engine (shimmer)

Animation Speed / Duration1.5s

Border Radius (8px)8px

Color Palette

Generated Code

import { Skeleton, SkeletonGroup, SkeletonAvatar, SkeletonText, SkeletonProvider } from "skelcraft";
import "skelcraft/styles.css";

export function ProfileSkeleton() {
  return (
    <SkeletonProvider
      theme="dark"
      animation="shimmer"
      duration="1.5s"
      radius={8}
      baseColor="#19122A"
      shineColor="#2B2140"
    >
      <SkeletonGroup direction="row" gap={16} align="center" padding={20}>
        <SkeletonAvatar size={56} shape="circle" />
        <SkeletonGroup direction="column" gap={6} flex={1}>
          <Skeleton width="60%" height={16} radius={8} />
          <SkeletonText lines={2} gap={6} height={12} lastLineWidth="40%" />
        </SkeletonGroup>
      </SkeletonGroup>
    </SkeletonProvider>
  );
}

Getting Started

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

Zero Dependencies

$npm install skelcraft

Include Stylesheet

< 2KB Vanilla CSS

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>
  );
}

Live Result Output:

Ready to build deeper layouts?

Explore our component APIs or test live parameters in the visual studio.

Explore customizable React skeleton components →Try the interactive Skelcraft playground →

Architecture & Principles

Why Choose Skelcraft?

“Your layout. Your dimensions. Your skeleton. Complete creative freedom.” Say goodbye to opinionated, inflexible skeleton boxes.

Flex & Grid

Composable Component Hierarchy

Build loading skeletons using Flexbox and CSS Grid just like constructing ordinary React UI components. Nest placeholders naturally without rigid boundaries.

0 Runtime JS

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.

calc() & clamp()

Fluid Dimension Control

Seamlessly pass numbers (200 = 200px), CSS strings ('100%', '10rem'), or complex mathematical expressions like calc(100% - 32px) and clamp().

Breakpoints

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.

60 FPS

Performant GPU Keyframes

GPU-accelerated CSS animations (shimmer, pulse, wave) engineered for 60fps rendering, automatically honoring @media (prefers-reduced-motion).

Theming

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.

App Router

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.

.d.ts Included

Full TypeScript Definitions

Authored in clean modern JavaScript (.jsx) for minimal overhead with comprehensive, exact .d.ts declaration files for instant IDE autocomplete.

API Reference

Component Documentation

Complete API reference for all 8 Skelcraft components. Inspect props, live demos, and copy-paste examples.

<Skeleton />

skelcraft

The 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.

Learn how to create responsive skeleton layouts →Configure CSS Custom Properties & animations →Try the interactive Skelcraft playground →

Ready-To-Use Layouts

Custom Layout Examples

Real-world layout templates ready to copy and paste into your project. Tailor spacing, alignments, and aspect ratios with full flexibility.

Profile Card Layout

Social & Identity

User avatar with header and two-line typography body for bio and stats.

Integrate These Layouts

Learn how to wire up Suspense in Next.js or customize layout props.

Explore the SkeletonGroup API →Streaming with Next.js loading.jsx →Try the interactive Skelcraft playground →

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.

Explore customizable React skeleton components →Try the interactive Skelcraft playground →

Framework Recipes

React & Next.js Integration

Plug Skelcraft effortlessly into modern frontend setups, from Next.js App Router streaming to standard React and Vite SPAs.

Next.js App Router (app/layout.jsx + app/dashboard/loading.jsx)

// app/layout.jsx (Next.js App Router Root Layout)
import { SkeletonProvider } from "skelcraft";
import "skelcraft/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="bg-[#080611] text-[#F8FAFC]">
        <SkeletonProvider
          theme="dark"
          baseColor="#19122A"
          shineColor="#2B2140"
          animation="shimmer"
        >
          {children}
        </SkeletonProvider>
      </body>
    </html>
  );
}

// app/dashboard/loading.jsx (Instant Streaming Skeleton UI)
import { SkeletonPreset } from "skelcraft";

export default function DashboardLoading() {
  return <SkeletonPreset type="dashboard" cards={4} gap={16} radius={8} />;
}

Need More Implementation Guides?

Check installation details or design layout patterns.

Documentation & Getting Started →Browse production-ready skeleton layouts →Try the interactive Skelcraft playground →

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

.d.ts Included

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";

Full autocomplete for props, style overrides, breakpoints, and animation types in VS Code & Cursor.

Runtime Dependencies

< 2KB

Gzipped CSS Engine

100%

Verified Test Coverage

Dual

ESM (.mjs) & CJS (.cjs)

Contributing to Skelcraft

Open-source and MIT licensed. Pull requests, bug reports, and design suggestions are warmly welcome!

Fork on GitHub

Build any skeleton. Shape every layout.

Craft Your Skeleton Live

Installation & Quick Start

Install Package

Include Stylesheet

Quick Start Example

Ready to build deeper layouts?

Why Choose Skelcraft?

Composable Component Hierarchy

Pure Vanilla CSS Engine

Fluid Dimension Control

First-Class Responsive Engine

Performant GPU Keyframes

Global & Local Theming

SSR & Next.js Hydration-Safe

Full TypeScript Definitions

Component Documentation

<Skeleton />

Props Specification

Next Steps & Advanced Features

Custom Layout Examples

Profile Card Layout

Integrate These Layouts

Responsive & Theme Customization

First-Class Responsive Engine

CSS Math: calc() & clamp()

Automatic Reduced Motion

Official Brand Design Tokens

Experiment with Custom Tokens

React & Next.js Integration

Need More Implementation Guides?

Accessibility (a11y) First

Non-Intrusive Geometry

Presentation Layout Roles

Dynamic State Announcements

prefers-reduced-motion

Full TypeScript Support

Contributing to Skelcraft

Build any skeleton.
Shape every layout.