Usage

Install Spinnerkit from the registry

Spinnerkit loaders ship through a shadcn-protocol registry (scoped as @spinnerkit), pulled with the rakibulism-ui CLI — @spinnerkit is wired in as a built-in registry, so there is no config step: pull the items you need, then adapt each loader to your product.

Prerequisites

  • - React app already running
  • - Tailwind CSS configured
  • - a `@/*` path alias pointing at your project root (registry files import via `@/…`)

If your project does not have that alias yet, add it to `tsconfig.json` (or `jsconfig.json`).

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Install a component

Pull any loader into your app with the rakibulism-ui CLI:

Install loader

npx rakibulism-ui@latest add @spinnerkit/sk-square-3

Or install everything in one step:

Install all loaders

npx rakibulism-ui@latest add @spinnerkit/all
  • - `@spinnerkit/sk-square-3`
  • - `@spinnerkit/sk-circular-5`
  • - `@spinnerkit/sk-triangle-2`
  • - `@spinnerkit/all`

Installed files are local. Rename, restyle, and retime motion as needed.

Ensure loader styles are imported

Spinnerkit loaders depend on spinnerkit-loader.css. If your setup does not inject it automatically, add this import in app/globals.css.

globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "../components/spinnerkit-loader.css";
@custom-variant dark (&:is(.dark *));

Use in real UI states

Keep indicators close to the action they describe. Inline usage works well when only part of the interface is pending.

Save button example

import { SkSquare3 } from "@/components/ui/sk-square-3";

export function SaveButton({ isSaving }: { isSaving: boolean }) {
  return (
    <button
      type="button"
      disabled={isSaving}
      className="inline-flex items-center gap-2 rounded-md border px-3 py-2"
    >
      {isSaving ? <SkSquare3 size={18} dotSize={3} aria-label="Saving" /> : null}
      <span>{isSaving ? "Saving..." : "Save changes"}</span>
    </button>
  );
}

Usage guidelines

  • - Use inline loaders when only a local region is pending.
  • - Prefer skeletons when preserving content shape matters most.
  • - Pair motion with accessible text when context is not obvious.
  • - Avoid multiple competing loaders in one viewport.

Next step

Browse the components gallery for specific primitives, or read the introduction for what Spinnerkit is aiming for and its constraints.