Preact

Native Preact integration — uses preact/hooks directly, no preact/compat needed. Same API as React, smaller bundle.

Quick start

1. Install

bash
npm install boneyard-js

2. Add the component

app.tsx
import { Skeleton } from 'boneyard-js/preact'
import './bones/registry'

function BlogPage() {
  const { data, isLoading } = useFetch('/api/post')
  return (
    <Skeleton name="blog-card" loading={isLoading}>
      {data && <BlogCard data={data} />}
    </Skeleton>
  )
}

3. Generate bones

bash
npx boneyard-js build

Auto-detects your Preact dev server and captures all named skeletons.

4. Import the registry

ts
// Add once in your app entry (e.g. main.tsx)
import './bones/registry'

This import is required.Without it, skeletons won't render — the component needs the registry to resolve bone data by name.

Props
PropTypeDefaultDescription
loadingbooleanrequiredShow skeleton or children
namestring—Resolve bones from registry by name
initialBonesResponsiveBones—Pass bones directly (overrides registry)
colorstringrgba(0,0,0,0.08)Bone color in light mode
darkColorstringrgba(255,255,255,0.06)Bone color in dark mode
animate'pulse' | 'shimmer' | 'solid'pulseAnimation style (also accepts true/false)
staggernumber | booleanfalseStagger delay between bones in ms (true = 80ms)
transitionnumber | booleanfalseFade out duration in ms when loading ends (true = 300ms)
boneClassstring—CSS class applied to each bone element
classNamestring—CSS class on the container
fixtureComponentChildren—Mock content for CLI capture (dev only)
fallbackComponentChildren—Shown when loading but no bones available
snapshotConfigSnapshotConfig—Controls bone extraction during CLI capture
Vite plugin

The Vite plugin auto-detects Preact and generates the registry with the correct imports. No extra configuration needed:

vite.config.ts
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
import { boneyardPlugin } from 'boneyard-js/vite'

export default defineConfig({
  plugins: [preact(), boneyardPlugin()]
})

Bones are captured on dev server start and re-captured on every HMR update.

Dark mode

Auto-detects via .dark class on <html> or any parent element (Tailwind convention), and prefers-color-scheme media query. Uses darkColor when dark mode is active.

Animations
ValueEffect
'pulse'Fades a lighter overlay in and out (1.8s cycle)
'shimmer'Sweeps a gradient highlight across each bone (2.4s cycle)
'solid'Static — no animation
true / falsetrue = pulse, false = solid
Global defaults

Set defaults for all skeletons with configureBoneyard():

tsx
import { configureBoneyard } from 'boneyard-js/preact'

configureBoneyard({
  color: '#e5e5e5',
  darkColor: 'rgba(255,255,255,0.08)',
  animate: 'shimmer',
})

Per-component props override global defaults.

Config file

See Install → Config file for the full boneyard.config.json reference. Works with all frameworks.

Next steps