2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tab1,"use client"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; const SIZES = { xs: 12, sm: 16, md: 20, lg: 28, xl: 40 } as const; export interface SpinnerProps extends Omit, "children"> { /** ring: an arc on a faint track · lines: eight spokes that fade around · dots: three dots that pulse in turn. */ variant?: "ring" | "lines" | "dots"; size?: keyof typeof SIZES; /** Read out by screen readers. Pass "" when visible text next to it already says what's loading. */ label?: string; } /** A loading indicator that takes the colour of the text around it. */ export function Spinner({ variant = "ring", size = "md", label = "Loading", className, ...props }: SpinnerProps) { const px = SIZES[size]; const stroke = px <= 16 ? 2.75 : px >= 40 ? 1.75 : 2.25; return ( {variant === "ring" && ( )} {variant === "lines" && ( )} {variant === "dots" && ( )} ); } export default Spinner; 2e:T8513,

"use client";

import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

const SIZES = { xs: 12, sm: 16, md: 20, lg: 28, xl: 40 } as const;

export interface SpinnerProps extends Omit<ComponentProps<"span">, "children"> {
  /** ring: an arc on a faint track · lines: eight spokes that fade around · dots: three dots that pulse in turn. */
  variant?: "ring" | "lines" | "dots";
  size?: keyof typeof SIZES;
  /** Read out by screen readers. Pass "" when visible text next to it already says what's loading. */
  label?: string;
}

/** A loading indicator that takes the colour of the text around it. */
export function Spinner({ variant = "ring", size = "md", label = "Loading", className, ...props }: SpinnerProps) {
  const px = SIZES[size];
  const stroke = px <= 16 ? 2.75 : px >= 40 ? 1.75 : 2.25;
  return (
    <span
      role={label ? "status" : undefined}
      aria-label={label || undefined}
      aria-hidden={label ? undefined : true}
      className={cn("inline-flex shrink-0 items-center justify-center", className)}
      style={{ width: px, height: px }}
      {...props}
    >
      {variant === "ring" && (
        <svg viewBox="0 0 24 24" fill="none" className="size-full animate-spin" style={{ animationDuration: "750ms" }}>
          <circle cx="12" cy="12" r="9.5" stroke="currentColor" strokeOpacity="0.18" strokeWidth={stroke} />
          <circle cx="12" cy="12" r="9.5" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeDasharray="17 60" />
        </svg>
      )}
      {variant === "lines" && (
        <svg viewBox="0 0 24 24" fill="none" className="size-full animate-spin" style={{ animationDuration: "800ms", animationTimingFunction: "steps(8, end)" }}>
          {Array.from({ length: 8 }, (_, i) => (
            <line
              key={i}
              x1="12"
              y1="2.75"
              x2="12"
              y2="6.75"
              stroke="currentColor"
              strokeWidth={stroke}
              strokeLinecap="round"
              strokeOpacity={0.16 + (i / 7) * 0.84}
              transform={`rotate(${i * 45} 12 12)`}
            />
          ))}
        </svg>
      )}
      {variant === "dots" && (
        <svg viewBox="0 0 24 24" fill="currentColor" className="size-full">
          {[5, 12, 19].map((cx, i) => (
            <circle key={cx} cx={cx} cy="12" r="2.4">
              <animate attributeName="opacity" values="1;0.25;1" dur="1s" begin={`${i * 0.16 - 1}s`} repeatCount="indefinite" />
              <animate attributeName="r" values="2.4;1.7;2.4" dur="1s" begin={`${i * 0.16 - 1}s`} repeatCount="indefinite" />
            </circle>
          ))}
        </svg>
      )}
    </span>
  );
}

export default Spinner;

2f:T951,"use client"; import { Check } from "lucide-react"; import { Spinner } from "@/components/scalar-ui/spinner"; const steps = [ { name: "Install dependencies", detail: "pnpm install · 14s", state: "done" }, { name: "Build", detail: "next build · 41s", state: "done" }, { name: "Run checks", detail: "Type-checking 128 files…", state: "running" }, { name: "Deploy to production", detail: "Waiting for checks", state: "waiting" }, ] as const; export default function Demo() { return (

Deploying aurora-web

In progress

{s.state === "done" && ( )} {s.state === "running" && } {s.state === "waiting" && }

{s.name}

{s.detail}

); } 30:T4b85,

"use client";

import { Check } from "lucide-react";
import { Spinner } from "@/components/scalar-ui/spinner";

const steps = [
  { name: "Install dependencies", detail: "pnpm install · 14s", state: "done" },
  { name: "Build", detail: "next build · 41s", state: "done" },
  { name: "Run checks", detail: "Type-checking 128 files…", state: "running" },
  { name: "Deploy to production", detail: "Waiting for checks", state: "waiting" },
] as const;

export default function Demo() {
  return (
    <div className="w-full max-w-[380px] rounded-[22px] bg-white p-2 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="flex items-center justify-between px-3 pb-2 pt-2.5">
        <p className="text-[14px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">Deploying aurora-web</p>
        <span className="flex items-center gap-1.5 rounded-full bg-neutral-100 py-1 pl-1.5 pr-2.5 text-[12px] font-medium text-neutral-600 dark:bg-white/[0.06] dark:text-neutral-300">
          <Spinner size="xs" label="" />
          In progress
        </span>
      </div>
      <ol>
        {steps.map((s) => (
          <li key={s.name} className="flex items-center gap-3 rounded-[14px] px-3 py-2.5">
            <span className="flex size-6 shrink-0 items-center justify-center">
              {s.state === "done" && (
                <span className="flex size-5 items-center justify-center rounded-full bg-neutral-950 text-white dark:bg-white dark:text-neutral-950">
                  <Check className="size-3" strokeWidth={3} />
                </span>
              )}
              {s.state === "running" && <Spinner size="sm" className="text-neutral-950 dark:text-white" label="Running checks" />}
              {s.state === "waiting" && <span className="size-5 rounded-full border-[1.5px] border-dashed border-neutral-300 dark:border-white/20" />}
            </span>
            <div className="min-w-0">
              <p className={s.state === "waiting" ? "text-[13.5px] font-medium text-neutral-400 dark:text-neutral-500" : "text-[13.5px] font-medium text-neutral-900 dark:text-neutral-100"}>{s.name}</p>
              <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">{s.detail}</p>
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}

31:T1ea6,

import { Spinner } from "@/components/scalar-ui/spinner";

const tile =
  "flex size-20 items-center justify-center rounded-[20px] bg-white text-neutral-900 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.07),inset_0_-2px_0_rgb(0_0_0/0.04),0_1px_2px_rgb(0_0_0/0.08),0_2px_6px_-2px_rgb(0_0_0/0.08)] dark:bg-neutral-800 dark:text-white dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.1),0_1px_2px_rgb(0_0_0/0.4)]";

export default function Example() {
  return (
    <div className="flex flex-wrap items-start justify-center gap-6">
      {(["ring", "lines", "dots"] as const).map((variant) => (
        <div key={variant} className="flex flex-col items-center gap-2.5">
          <div className={tile}>
            <Spinner variant={variant} size="lg" />
          </div>
          <span className="font-mono text-[12px] text-neutral-500 dark:text-neutral-400">{variant}</span>
        </div>
      ))}
    </div>
  );
}

32:T2882,

import { Spinner } from "@/components/scalar-ui/spinner";

const sizes = ["xs", "sm", "md", "lg", "xl"] as const;

export default function Example() {
  return (
    <div className="space-y-6 text-neutral-900 dark:text-white">
      {(["ring", "lines"] as const).map((variant) => (
        <div key={variant} className="flex items-end justify-center gap-8">
          {sizes.map((size) => (
            <div key={size} className="flex flex-col items-center gap-2">
              <div className="flex h-10 items-center">
                <Spinner variant={variant} size={size} />
              </div>
              {variant === "lines" && <span className="font-mono text-[11.5px] text-neutral-500 dark:text-neutral-400">{size}</span>}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

33:T8fa,"use client"; import { RefreshCw, Save } from "lucide-react"; import { useState } from "react"; import { Spinner } from "@/components/scalar-ui/spinner"; const base = "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] px-4 text-sm font-medium tracking-[-0.01em] outline-none transition-[background-color,transform] active:scale-[0.97] disabled:pointer-events-none"; function useBusy() { const [busy, setBusy] = useState(false); const run = () => { setBusy(true); setTimeout(() => setBusy(false), 1800); }; return [busy, run] as const; } export default function Example() { const [saving, save] = useBusy(); const [syncing, sync] = useBusy(); const [deleting, remove] = useBusy(); return (

); } 34:T58a7,

"use client";

import { RefreshCw, Save } from "lucide-react";
import { useState } from "react";
import { Spinner } from "@/components/scalar-ui/spinner";

const base =
  "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] px-4 text-sm font-medium tracking-[-0.01em] outline-none transition-[background-color,transform] active:scale-[0.97] disabled:pointer-events-none";

function useBusy() {
  const [busy, setBusy] = useState(false);
  const run = () => {
    setBusy(true);
    setTimeout(() => setBusy(false), 1800);
  };
  return [busy, run] as const;
}

export default function Example() {
  const [saving, save] = useBusy();
  const [syncing, sync] = useBusy();
  const [deleting, remove] = useBusy();
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <button
        onClick={save}
        disabled={saving}
        className={`${base} min-w-[150px] bg-neutral-950 text-white hover:bg-neutral-800 focus-visible:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200`}
      >
        {saving ? <Spinner size="sm" label="" /> : <Save className="size-4" />}
        {saving ? "Saving…" : "Save changes"}
      </button>
      <button
        onClick={sync}
        disabled={syncing}
        className={`${base} bg-white text-neutral-800 ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 focus-visible:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:ring-white/[0.14] dark:hover:bg-white/[0.06]`}
      >
        {syncing ? <Spinner variant="lines" size="sm" label="" /> : <RefreshCw className="size-4" />}
        Sync
      </button>
      <button onClick={remove} disabled={deleting} className={`${base} w-[92px] bg-red-600 text-white hover:bg-red-500 focus-visible:bg-red-500`}>
        {deleting ? <Spinner variant="dots" size="md" label="Deleting" /> : "Delete"}
      </button>
      <button
        onClick={sync}
        disabled={syncing}
        aria-label="Refresh"
        className={`${base} w-10 px-0 text-neutral-600 hover:bg-neutral-100 focus-visible:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-white/[0.08] dark:focus-visible:bg-white/[0.08]`}
      >
        {syncing ? <Spinner size="sm" label="" /> : <RefreshCw className="size-4" />}
      </button>
    </div>
  );
}

35:T21e0,

import { Spinner } from "@/components/scalar-ui/spinner";

export default function Example() {
  return (
    <div className="flex flex-col items-start gap-4 text-[13.5px]">
      <p className="flex items-center gap-2 text-neutral-600 dark:text-neutral-300">
        <Spinner size="sm" label="" />
        Syncing 24 files…
      </p>
      <p className="flex items-center gap-2 font-medium text-neutral-900 dark:text-white">
        <Spinner variant="lines" size="sm" label="" />
        Generating your report
      </p>
      <p className="flex items-center gap-2 rounded-full bg-neutral-100 py-1.5 pl-2 pr-3 text-[12.5px] font-medium text-neutral-600 dark:bg-white/[0.06] dark:text-neutral-300">
        <Spinner size="xs" label="" />
        Connecting to Stripe
      </p>
      <p className="flex items-center gap-1.5 text-neutral-500 dark:text-neutral-400">
        Maya is typing
        <Spinner variant="dots" size="sm" label="" />
      </p>
    </div>
  );
}

36:Ta50,"use client"; import { AnimatePresence, motion } from "motion/react"; import { RefreshCw } from "lucide-react"; import { useState } from "react"; import { Spinner } from "@/components/scalar-ui/spinner"; const rows = [ ["Organic search", "12,480", "+8.2%"], ["Direct", "8,912", "+3.1%"], ["Referral", "4,206", "−1.4%"], ["Social", "2,731", "+12.9%"], ]; export default function Example() { const [loading, setLoading] = useState(false); const reload = () => { setLoading(true); setTimeout(() => setLoading(false), 1600); }; return (

Traffic sources

{rows.map(([name, value, change]) => (

{name} {value} {change}

))}

{loading && ( Loading report… )}

); } 37:T5bf4,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { RefreshCw } from "lucide-react";
import { useState } from "react";
import { Spinner } from "@/components/scalar-ui/spinner";

const rows = [
  ["Organic search", "12,480", "+8.2%"],
  ["Direct", "8,912", "+3.1%"],
  ["Referral", "4,206", "−1.4%"],
  ["Social", "2,731", "+12.9%"],
];

export default function Example() {
  const [loading, setLoading] = useState(false);
  const reload = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 1600);
  };
  return (
    <div className="relative w-full max-w-[360px] overflow-hidden rounded-[22px] bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="flex items-center justify-between">
        <p className="text-[14px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">Traffic sources</p>
        <button
          onClick={reload}
          disabled={loading}
          className="flex h-8 items-center gap-1.5 rounded-[10px] px-2.5 text-[12.5px] font-medium text-neutral-600 outline-none transition-colors hover:bg-neutral-100 focus-visible:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-white/[0.08] dark:focus-visible:bg-white/[0.08]"
        >
          <RefreshCw className="size-3.5" />
          Reload
        </button>
      </div>
      <div className="mt-3 divide-y divide-black/[0.06] dark:divide-white/[0.08]">
        {rows.map(([name, value, change]) => (
          <div key={name} className="flex items-center justify-between py-2.5 text-[13px]">
            <span className="text-neutral-600 dark:text-neutral-300">{name}</span>
            <span className="flex gap-3 tabular-nums">
              <span className="font-medium text-neutral-900 dark:text-white">{value}</span>
              <span className="w-12 text-right text-neutral-500 dark:text-neutral-400">{change}</span>
            </span>
          </div>
        ))}
      </div>
      <AnimatePresence>
        {loading && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.18 }}
            className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-white/75 text-neutral-900 backdrop-blur-[2px] dark:bg-neutral-900/75 dark:text-white"
          >
            <Spinner size="lg" label="" />
            <span className="text-[13px] font-medium">Loading report…</span>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

29:["$","section","spinner",{"id":"spinner","aria-labelledby":"spinner-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"spinner-title","className":"sr-only","children":"Spinner"}],false,false]}],false,false]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"spinner","gated":{"unlocked":true,"files":[{"name":"spinner.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"variants":{"name":"variants.tsx","code":"import { Spinner } from \"@/components/scalar-ui/spinner\";\n\nconst tile =\n \"flex size-20 items-center justify-center rounded-[20px] bg-white text-neutral-900 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.07),inset_0_-2px_0_rgb(0_0_0/0.04),0_1px_2px_rgb(0_0_0/0.08),0_2px_6px_-2px_rgb(0_0_0/0.08)] dark:bg-neutral-800 dark:text-white dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.1),0_1px_2px_rgb(0_0_0/0.4)]\";\n\nexport default function Example() {\n return (\n

\n {([\"ring\", \"lines\", \"dots\"] as const).map((variant) => (\n

\n \n

\n {variant}\n

\n ))}\n

\n );\n}\n","html":"$31"},"size":{"name":"size.tsx","code":"import { Spinner } from \"@/components/scalar-ui/spinner\";\n\nconst sizes = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\n\nexport default function Example() {\n return (\n

\n {([\"ring\", \"lines\"] as const).map((variant) => (\n

\n {sizes.map((size) => (\n

\n \n

\n {variant === \"lines\" && {size}}\n

\n ))}\n

\n );\n}\n","html":"$32"},"in-a-button":{"name":"in-a-button.tsx","code":"$33","html":"$34"},"with-label":{"name":"with-label.tsx","code":"import { Spinner } from \"@/components/scalar-ui/spinner\";\n\nexport default function Example() {\n return (\n

\n \n Syncing 24 files…\n

\n \n Generating your report\n

\n \n Connecting to Stripe\n

\n Maya is typing\n \n

\n );\n}\n","html":"$35"},"overlay":{"name":"overlay.tsx","code":"$36","html":"$37"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add spinner","shadcn":"npx shadcn@latest add https://scalarui.com/r/spinner.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":null,"origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L38","toolbar":"$L39"}]}],["$L3a","$L3b","$L3c","$L3d","$L3e"]]}]

Spinners

Spinners

Variants

Size

In a Button

With Label

Overlay