v1.0.0View on npm
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.