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.