bones
Skeleton loaders designed for React Server Components and streaming.
Streaming with Suspense
Wrap a component in <Bones> and pass a promise as data. The same component renders as skeletons while the data streams in, then swaps to content when it resolves.
Refresh the page to see the skeleton → content transition.
Forced Skeletons
Wrap with BonesForce to force skeleton mode. Toggle to see the same loaded cards switch to skeletons.
Multi-Line Text
Use the lines() helper to create paragraph-sized placeholders. Each skeleton line is a real element with its own animation.
Understanding React Server Components
Server Components let you render components on the server, reducing the JavaScript sent to the client. This changes how we think about data fetching and component architecture.
Animations
Add data-bone-animate to any parent element. Set it on <body> for app-wide animation, or scope it to individual sections.
Static
Shimmer
Pulse
Theming
Customize skeleton colors with CSS custom properties. Override --bone-base and --bone-highlight on any container.
Warm
Cool
Dark