Back

Boneyard Skeleton

Pixel-Perfect Skeleton Loader

Credit: 0xGF/boneyard by @0xGoodfuture

Component Code (Next.js)

// Source: https://github.com/0xGF/boneyard
// Credit: https://x.com/0xGoodfuture
// Package: https://www.npmjs.com/package/boneyard-js

import { Skeleton } from "boneyard-js/react";
import blogBones from "./blog.bones.json";

<Skeleton
  name="blog"
  loading={loading}
  color="#d6d3d1"
  initialBones={blogBones}
>
  <BlogCard />
</Skeleton>

Claude / Codex Prompt

Create a Next.js card demo using boneyard-js where a button toggles between real UI and a pixel-perfect skeleton. Include clear attribution to https://github.com/0xGF/boneyard.