Veilkit Guide & Reference

Installation

Install Veilkit with your preferred package manager. The core package is 0-dependency:

Quickstart in React & Next.js

Import presets, primitives, spinners, or buttons directly from veilkit/react:

import { SkeletonPreset, LoadingButton } from 'veilkit/react';

export function ProductPage({ loading }) {
  if (loading) {
    return <SkeletonPreset name="product-card" shape="glass" animation="aurora" />;
  }

  return (
    <LoadingButton
      loadingStyle="morph-circle"
      loadingText="Adding..."
      onClick={async () => await addToCart()}
    >
      Add to Cart
    </LoadingButton>
  );
}

Zero Layout Thrashing & Synced Clocks

Traditional skeleton libraries animate properties like background-position or width, forcing the browser to perform constant reflows on every single frame. Veilkit moves motion strictly to the GPU compositor thread using transform and opacity.

Anti-Flicker Controller

Veilkit includes an anti-flicker state controller that avoids jarring flashes on fast network responses:

import { AntiFlickerController } from 'veilkit';

const controller = new AntiFlickerController({
  delay: 150,       // Suppress skeleton if request finishes under 150ms
  minVisible: 300,  // Keep loader visible for at least 300ms once rendered
  onShow: () => setVisible(true),
  onHide: () => setVisible(false),
});

Custom Skeleton Builder

Create custom skeletons matching your website’s exact layout with the fluent SkeletonBuilder API:

import { SkeletonBuilder } from 'veilkit';

const myCustomSkeleton = new SkeletonBuilder({ animation: 'shimmer', shape: 'rounded' })
  .card((card) => {
    card.row((row) => {
      row.avatar(48);
      row.col((col) => {
        col.heading('60%');
        col.lines(2);
      });
    });
    card.rect('100%', 150);
    card.button(120, 38);
  })
  .build();

Subpath Framework Exports