Config

Customize boneyard via boneyard.config.json in your project root. Controls both the CLI build and runtime defaults for all <Skeleton> components.

Config file

Create boneyard.config.json in your project root. All fields are optional.

boneyard.config.json

{
  // Build options
  "breakpoints": [375, 768, 1280],
  "out": "./src/bones",
  "wait": 800,

  // Runtime defaults
  "color": "#e5e5e5",
  "darkColor": "#2a2a2a",
  "animate": "shimmer",
  "shimmerColor": "#ebebeb",
  "darkShimmerColor": "#333333",
  "speed": "2s",
  "shimmerAngle": 110,
  "stagger": 80,
  "transition": 300,

  // Auth (for protected pages — web only)
  "resolveEnvVars": true,
  "auth": {
    "cookies": [{ "name": "session", "value": "env[SESSION_TOKEN]", "domain": "localhost" }],
    "headers": { "Authorization": "Bearer env[API_TOKEN]" }
  }
}

Build options

These control the CLI capture step. CLI flags override config values.

Key	Type	Default	Description
breakpoints	number[]	auto	Viewport widths to capture. Auto-detects Tailwind breakpoints, falls back to [375, 768, 1280]
out	string	./src/bones	Output directory for generated `.bones.json` files and `registry.js`
wait	number	800	Milliseconds to wait after page load before capturing

Runtime options

Runtime options are baked into the generated registry.js via configureBoneyard(). Per-component props override these.

Key	Type	Default	Description
color	string	#f0f0f0	Bone fill color (light mode). Any CSS color — hex, rgba, hsl, etc.
darkColor	string	#222222	Bone fill color (dark mode). Any CSS color.
animate	string	pulse	`pulse`, `shimmer`, or `solid`
shimmerColor	string	#f7f7f7	Shimmer highlight color (light mode)
darkShimmerColor	string	#2c2c2c	Shimmer highlight color (dark mode)
speed	string	2s / 1.8s	Animation duration (shimmer / pulse)
shimmerAngle	number	110	Shimmer gradient angle in degrees
stagger	number \| boolean	false	Delay between bones in ms. `true` = 80ms
transition	number \| boolean	false	Fade transition when loading ends in ms. `true` = 300ms
boneClass	string	—	CSS class applied to each bone element

Animation

Pulse

Default. Bones fade in and out. Speed defaults to 1.8s.

boneyard.config.json

{
  "animate": "pulse",
  "speed": "1.8s"
}

Shimmer

A diagonal highlight sweeps across bones. Customize the highlight color, speed, and angle.

boneyard.config.json

{
  "animate": "shimmer",
  "shimmerColor": "#ebebeb",
  "darkShimmerColor": "#333333",
  "speed": "2s",
  "shimmerAngle": 110
}

Solid

No animation. Static bone rectangles.

boneyard.config.json

{
  "animate": "solid"
}

Stagger

Bones appear one after another with a delay. Works with any animation style.

boneyard.config.json

{
  "stagger": 80
}

Transition

Fade out the skeleton overlay when loading ends.

boneyard.config.json

{
  "transition": 300
}

Dark mode

Boneyard detects dark mode via the .dark class on <html> or any parent element (standard Tailwind convention). It does not use prefers-color-scheme — this gives you explicit control over when dark bone colors are used.

boneyard.config.json

{
  "color": "#e5e5e5",
  "darkColor": "#2a2a2a",
  "shimmerColor": "#ebebeb",
  "darkShimmerColor": "#333333"
}

When the .dark class is present, darkColor and darkShimmerColor are used automatically. Per-component overrides work too:

tsx

// Override per component
<Skeleton color="#d4d4d4" darkColor="#333" />

Authentication

For protected pages, configure cookies and headers so the CLI can access them during capture. Use env[VAR] syntax with resolveEnvVars to keep tokens out of your config file.

boneyard.config.json

{
  "resolveEnvVars": true,
  "auth": {
    "cookies": [
      {
        "name": "session",
        "value": "env[SESSION_TOKEN]",
        "domain": "localhost"
      }
    ],
    "headers": {
      "Authorization": "Bearer env[API_TOKEN]"
    }
  }
}

Or use the fixture prop to provide mock content that renders without auth.

Precedence

Values resolve in this order (highest to lowest priority):

Per-component props — <Skeleton color="#ccc" />
Config file — boneyard.config.json runtime options, baked into registry.js
Package defaults — built-in values in shared.ts

For build options, CLI flags override config file values.