Custom Skeleton Layout Builder
Build pixel-perfect loading wireframes tailored precisely to your own website layout. Pick components, customize shapes, and copy clean code for React, Vue, Svelte, Angular, Web Components, and HTML.
Build Skeletons Matching Your Exact Website Layout
Add elements, tweak dimensions, select animations and shapes. Copy the production code directly into your project in seconds.
✦ GPU-accelerated motion matching layout leaf elements.
import { CustomSkeleton, SkeletonBuilder } from 'veilkit/react';
// Option A: Declarative Custom Layout Component
export function MyWebsiteSkeleton() {
const config = {
animation: 'shimmer',
theme: 'glass',
shape: 'rounded',
gap: 12,
nodes: [
{ type: 'image', width: '100%', height: '160px' },
{ type: 'heading', width: '65%', height: '24px' },
{ type: 'line', width: '90%', height: '14px' },
{ type: 'button', width: '120px', height: '40px' }
],
};
return <CustomSkeleton config={config} />;
}
// Option B: Fluent SkeletonBuilder API
export const builderSkeleton = new SkeletonBuilder({ animation: 'shimmer', shape: 'rounded' })
.rect('100%', '160px')
.heading('65%', '24px')
.lines(2)
.button('120px', '40px')
.build();Fluent Builder API
Prefer code over UI? Veilkit ships with a fluent SkeletonBuilder API:SkeletonBuilder.row().avatar().col().heading().lines(2).build()
Declarative JSON Config
Store skeleton layouts in clean JSON configs. Load them dynamically or share them across micro-frontends and mobile apps without rewriting layout logic.
Shape & Theme Adaptive
Any custom layout automatically adapts to your current shape tokens (rounded, pill, square, glass) and all 11 themes.