BJORK Morph loader

Component

About

Morph loader is a production-ready feedback component from BJORK UI, packaged for shadcn registries.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds BJORK Morph loader to your project and fits it to your theme.

Code

How BJORK Morph loader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useEffect, useState, type ReactNode } from "react";
import { MorphLoader, type MorphState, type MorphTarget } from "@/components/ui/bjork-morph-loader";

type DeployPhase = "idle" | "deploying" | "deployed";

const DEFAULT_TARGET: MorphTarget = "check";

const DEFAULT_ROW_STATE: MorphState = "done";

function Caption({ children }: { children: ReactNode }) {
  return (
    <span className="font-mono text-[11px] tabular-nums tracking-[0.02em] text-[color:var(--bjork-text-soft,rgba(237,237,237,0.4))]">
      {children}
    </span>
  );
}
function SourceDemo(){
const preview = false;
const [target, setTarget] = useState<MorphTarget>(DEFAULT_TARGET);
const [rowState, setRowState] = useState<MorphState>(DEFAULT_ROW_STATE);
const [deployPhase, setDeployPhase] = useState<DeployPhase>("idle");
useEffect(() => {
    if (deployPhase !== "deploying") return;
    const id = window.setTimeout(() => setDeployPhase("deployed"), 1800);
    return () => window.clearTimeout(id);
  }, [deployPhase]);
const deployLabel =
    deployPhase === "idle" ? "Deploy" : deployPhase === "deploying" ? "Deploying…" : "Deployed";
const reset = () => {
    setTarget(DEFAULT_TARGET);
    setRowState(DEFAULT_ROW_STATE);
    setDeployPhase("idle");
  };
return <>

      <div className="flex w-[min(640px,calc(100vw-56px))] flex-col items-center gap-12 py-6">
        <div className="flex items-end justify-center gap-12">
          <div className="flex flex-col items-center gap-3">
            <MorphLoader size={24} state="loading" />
            <Caption>24 · loading</Caption>
          </div>
          <div className="flex flex-col items-center gap-3">
            <MorphLoader size={40} state="done" />
            <Caption>40 · done</Caption>
          </div>
          <div className="flex flex-col items-center gap-3">
            <MorphLoader size={64} state="error" />
            <Caption>64 · error</Caption>
          </div>
        </div>

        <div className="flex flex-col items-center gap-6">
          <MorphLoader size={preview ? 112 : 64} state={rowState} target={target} progress={preview ? 0.75 : undefined} />
        </div>
      </div>
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}