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:T1b0e,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { unstable_OneTimePasswordField as OTPPrimitive } from "radix-ui"; import { Fragment, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; const SLOT = { outline: "rounded-xl bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:ring-black/[0.18] focus:ring-2 focus:ring-neutral-950/25 data-filled:ring-black/[0.18] dark:bg-white/[0.03] dark:shadow-none dark:ring-white/[0.12] dark:hover:ring-white/[0.22] dark:focus:ring-white/30 dark:data-filled:ring-white/[0.22]", soft: "rounded-xl bg-neutral-100 hover:bg-neutral-200/60 focus:bg-white focus:ring-2 focus:ring-inset focus:ring-neutral-950/20 dark:bg-white/[0.06] dark:hover:bg-white/[0.08] dark:focus:bg-white/[0.04] dark:focus:ring-white/25", underline: "rounded-none bg-transparent shadow-[inset_0_-1.5px_0_rgb(0_0_0/0.14)] focus:shadow-[inset_0_-2px_0_rgb(10_10_10)] data-filled:shadow-[inset_0_-1.5px_0_rgb(0_0_0/0.4)] dark:shadow-[inset_0_-1.5px_0_rgb(255_255_255/0.16)] dark:focus:shadow-[inset_0_-2px_0_rgb(255_255_255)] dark:data-filled:shadow-[inset_0_-1.5px_0_rgb(255_255_255/0.45)]", joined: "rounded-none bg-transparent focus:z-10 focus:bg-neutral-950/[0.03] focus:shadow-[inset_0_0_0_2px_rgb(10_10_10/0.22)] dark:focus:bg-white/[0.04] dark:focus:shadow-[inset_0_0_0_2px_rgb(255_255_255/0.3)]", } as const; const INVALID = { outline: "ring-red-500/50 hover:ring-red-500/60 focus:ring-red-500/40 data-filled:ring-red-500/50 dark:ring-red-400/50 dark:data-filled:ring-red-400/50", soft: "bg-red-50 ring-1 ring-inset ring-red-500/40 focus:ring-red-500/40 dark:bg-red-500/10 dark:ring-red-400/40", underline: "shadow-[inset_0_-1.5px_0_rgb(239_68_68/0.7)] data-filled:shadow-[inset_0_-1.5px_0_rgb(239_68_68/0.7)] focus:shadow-[inset_0_-2px_0_rgb(239_68_68)]", joined: "focus:shadow-[inset_0_0_0_2px_rgb(239_68_68/0.4)]", } as const; const SIZES = { sm: { slot: "h-9 w-8 text-[15px]", gap: "gap-1.5", radius: "rounded-[10px]" }, md: { slot: "h-12 w-10 text-lg", gap: "gap-2", radius: "rounded-xl" }, lg: { slot: "h-14 w-12 text-2xl", gap: "gap-2.5", radius: "rounded-2xl" }, } as const; export interface InputOTPProps extends Omit, "children"> { /** Number of characters. Ignored when groups is set. */ length?: number; /** Split the slots into groups with a dash between them, e.g. [3, 3]. */ groups?: number[]; /** outline: a bordered box per character · soft: filled boxes · underline: a line under each · joined: one attached field. */ variant?: keyof typeof SLOT; size?: keyof typeof SIZES; invalid?: boolean; /** Classes for each character box. */ slotClassName?: string; } /** A one-time code field: one box per character, arrow keys and backspace move between them, and pasting a code fills every box. */ export function InputOTP({ length = 6, groups, variant = "outline", size = "md", invalid = false, value: valueProp, defaultValue = "", onValueChange, type, className, slotClassName, ...props }: InputOTPProps) { const [uncontrolled, setUncontrolled] = useState(defaultValue); const value = valueProp ?? uncontrolled; const change = (next: string) => { if (valueProp === undefined) setUncontrolled(next); onValueChange?.(next); }; const sets = groups ?? [length]; const s = SIZES[size]; const joined = variant === "joined"; let index = 0; return ( {sets.map((count, g) => ( {g > 0 && }

*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-black/[0.08] dark:[&>*:not(:first-child)]:border-white/[0.1]", invalid ? "ring-red-500/50 dark:ring-red-400/50" : "ring-black/[0.1] dark:ring-white/[0.12]", s.radius, ) : s.gap, )} > {Array.from({ length: count }, () => { const i = index++; const char = value[i] ?? ""; return ( {char && ( {type === "password" ? : char} )} ); })}

))} ); } export default InputOTP; 2e:Tbabb,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { unstable_OneTimePasswordField as OTPPrimitive } from "radix-ui";
import { Fragment, useState, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

const SLOT = {
  outline:
    "rounded-xl bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:ring-black/[0.18] focus:ring-2 focus:ring-neutral-950/25 data-filled:ring-black/[0.18] dark:bg-white/[0.03] dark:shadow-none dark:ring-white/[0.12] dark:hover:ring-white/[0.22] dark:focus:ring-white/30 dark:data-filled:ring-white/[0.22]",
  soft: "rounded-xl bg-neutral-100 hover:bg-neutral-200/60 focus:bg-white focus:ring-2 focus:ring-inset focus:ring-neutral-950/20 dark:bg-white/[0.06] dark:hover:bg-white/[0.08] dark:focus:bg-white/[0.04] dark:focus:ring-white/25",
  underline:
    "rounded-none bg-transparent shadow-[inset_0_-1.5px_0_rgb(0_0_0/0.14)] focus:shadow-[inset_0_-2px_0_rgb(10_10_10)] data-filled:shadow-[inset_0_-1.5px_0_rgb(0_0_0/0.4)] dark:shadow-[inset_0_-1.5px_0_rgb(255_255_255/0.16)] dark:focus:shadow-[inset_0_-2px_0_rgb(255_255_255)] dark:data-filled:shadow-[inset_0_-1.5px_0_rgb(255_255_255/0.45)]",
  joined:
    "rounded-none bg-transparent focus:z-10 focus:bg-neutral-950/[0.03] focus:shadow-[inset_0_0_0_2px_rgb(10_10_10/0.22)] dark:focus:bg-white/[0.04] dark:focus:shadow-[inset_0_0_0_2px_rgb(255_255_255/0.3)]",
} as const;

const INVALID = {
  outline: "ring-red-500/50 hover:ring-red-500/60 focus:ring-red-500/40 data-filled:ring-red-500/50 dark:ring-red-400/50 dark:data-filled:ring-red-400/50",
  soft: "bg-red-50 ring-1 ring-inset ring-red-500/40 focus:ring-red-500/40 dark:bg-red-500/10 dark:ring-red-400/40",
  underline: "shadow-[inset_0_-1.5px_0_rgb(239_68_68/0.7)] data-filled:shadow-[inset_0_-1.5px_0_rgb(239_68_68/0.7)] focus:shadow-[inset_0_-2px_0_rgb(239_68_68)]",
  joined: "focus:shadow-[inset_0_0_0_2px_rgb(239_68_68/0.4)]",
} as const;

const SIZES = {
  sm: { slot: "h-9 w-8 text-[15px]", gap: "gap-1.5", radius: "rounded-[10px]" },
  md: { slot: "h-12 w-10 text-lg", gap: "gap-2", radius: "rounded-xl" },
  lg: { slot: "h-14 w-12 text-2xl", gap: "gap-2.5", radius: "rounded-2xl" },
} as const;

export interface InputOTPProps extends Omit<ComponentProps<typeof OTPPrimitive.Root>, "children"> {
  /** Number of characters. Ignored when groups is set. */
  length?: number;
  /** Split the slots into groups with a dash between them, e.g. [3, 3]. */
  groups?: number[];
  /** outline: a bordered box per character · soft: filled boxes · underline: a line under each · joined: one attached field. */
  variant?: keyof typeof SLOT;
  size?: keyof typeof SIZES;
  invalid?: boolean;
  /** Classes for each character box. */
  slotClassName?: string;
}

/** A one-time code field: one box per character, arrow keys and backspace move between them, and pasting a code fills every box. */
export function InputOTP({
  length = 6,
  groups,
  variant = "outline",
  size = "md",
  invalid = false,
  value: valueProp,
  defaultValue = "",
  onValueChange,
  type,
  className,
  slotClassName,
  ...props
}: InputOTPProps) {
  const [uncontrolled, setUncontrolled] = useState(defaultValue);
  const value = valueProp ?? uncontrolled;
  const change = (next: string) => {
    if (valueProp === undefined) setUncontrolled(next);
    onValueChange?.(next);
  };
  const sets = groups ?? [length];
  const s = SIZES[size];
  const joined = variant === "joined";
  let index = 0;

  return (
    <MotionConfig reducedMotion="user">
      <OTPPrimitive.Root
        value={value}
        onValueChange={change}
        type={type}
        data-invalid={invalid || undefined}
        className={cn("flex w-fit items-center", s.gap, "data-[disabled]:opacity-50", className)}
        {...props}
      >
        {sets.map((count, g) => (
          <Fragment key={g}>
            {g > 0 && <span aria-hidden className="h-[2px] w-2.5 shrink-0 rounded-full bg-neutral-300 dark:bg-white/20" />}
            <div
              className={cn(
                "flex items-center",
                joined
                  ? cn(
                      "overflow-hidden bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset dark:bg-white/[0.03] dark:shadow-none",
                      "[&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-black/[0.08] dark:[&>*:not(:first-child)]:border-white/[0.1]",
                      invalid ? "ring-red-500/50 dark:ring-red-400/50" : "ring-black/[0.1] dark:ring-white/[0.12]",
                      s.radius,
                    )
                  : s.gap,
              )}
            >
              {Array.from({ length: count }, () => {
                const i = index++;
                const char = value[i] ?? "";
                return (
                  <span key={i} className="relative flex">
                    <OTPPrimitive.Input
                      index={i}
                      data-filled={char ? "" : undefined}
                      className={cn(
                        "relative text-center font-medium text-transparent outline-none transition-[box-shadow,background-color] duration-150 selection:bg-transparent disabled:cursor-not-allowed",
                        char ? "caret-transparent" : "caret-neutral-950 dark:caret-white",
                        s.slot,
                        SLOT[variant],
                        variant === "outline" || variant === "soft" ? s.radius : "",
                        invalid && INVALID[variant],
                        slotClassName,
                      )}
                    />
                    <span aria-hidden className={cn("pointer-events-none absolute inset-0 z-10 flex items-center justify-center font-medium text-neutral-950 dark:text-white", s.slot)}>
                      <AnimatePresence initial={false}>
                        {char && (
                          <motion.span
                            key={char}
                            className={cn("absolute", invalid && "text-red-600 dark:text-red-400")}
                            initial={{ opacity: 0, scale: 0.6, y: 4 }}
                            animate={{ opacity: 1, scale: 1, y: 0 }}
                            exit={{ opacity: 0, scale: 0.8, transition: { duration: 0.1 } }}
                            transition={{ type: "spring", bounce: 0.3, duration: 0.3 }}
                          >
                            {type === "password" ? <span className="block size-2.5 rounded-full bg-current" /> : char}
                          </motion.span>
                        )}
                      </AnimatePresence>
                    </span>
                  </span>
                );
              })}
            </div>
          </Fragment>
        ))}
        <OTPPrimitive.HiddenInput />
      </OTPPrimitive.Root>
    </MotionConfig>
  );
}

export default InputOTP;

2f:Td47,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Check, Mail } from "lucide-react"; import { useEffect, useState } from "react"; import { InputOTP } from "@/components/scalar-ui/input-otp"; export default function Demo() { const [code, setCode] = useState(""); const [status, setStatus] = useState<"idle" | "checking" | "invalid" | "done">("idle"); const [wait, setWait] = useState(30); useEffect(() => { if (wait === 0) return; const t = setTimeout(() => setWait((w) => w - 1), 1000); return () => clearTimeout(t); }, [wait]); const verify = (value: string) => { setStatus("checking"); setTimeout(() => setStatus(value === "123456" ? "done" : "invalid"), 900); }; return (

{status === "done" ? : }

{status === "done" ? "You're verified" : "Check your email"}

Enter the code we sent to maya@aurora.app

{ setCode(v); if (status === "invalid") setStatus("idle"); }} autoSubmit onAutoSubmit={verify} invalid={status === "invalid"} disabled={status === "checking" || status === "done"} aria-label="Verification code" />

{status === "checking" && "Checking…"} {status === "invalid" && That code didn't work. Try 123456.} {status === "done" && "Code accepted."} {status === "idle" && (wait > 0 ? ( <>Resend code in 0:{String(wait).padStart(2, "0")} ) : ( ))}

); } 30:T83cb,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Check, Mail } from "lucide-react";
import { useEffect, useState } from "react";
import { InputOTP } from "@/components/scalar-ui/input-otp";

export default function Demo() {
  const [code, setCode] = useState("");
  const [status, setStatus] = useState<"idle" | "checking" | "invalid" | "done">("idle");
  const [wait, setWait] = useState(30);

  useEffect(() => {
    if (wait === 0) return;
    const t = setTimeout(() => setWait((w) => w - 1), 1000);
    return () => clearTimeout(t);
  }, [wait]);

  const verify = (value: string) => {
    setStatus("checking");
    setTimeout(() => setStatus(value === "123456" ? "done" : "invalid"), 900);
  };

  return (
    <div className="w-full max-w-[380px] rounded-[22px] bg-white p-6 text-center 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]">
      <span className="mx-auto mb-4 flex size-11 items-center justify-center rounded-2xl bg-white text-neutral-700 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-neutral-200 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)]">
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.span key={status === "done" ? "done" : "mail"} initial={{ opacity: 0, scale: 0.6 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.6 }} transition={{ type: "spring", bounce: 0.3, duration: 0.35 }}>
            {status === "done" ? <Check className="size-5 text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} /> : <Mail className="size-5" />}
          </motion.span>
        </AnimatePresence>
      </span>
      <p className="text-[16px] font-semibold tracking-[-0.015em] text-neutral-950 dark:text-white">{status === "done" ? "You're verified" : "Check your email"}</p>
      <p className="mt-1 text-[13.5px] text-neutral-500 dark:text-neutral-400">
        Enter the code we sent to <span className="font-medium text-neutral-800 dark:text-neutral-200">maya@aurora.app</span>
      </p>
      <InputOTP
        className="mx-auto mt-5"
        groups={[3, 3]}
        value={code}
        onValueChange={(v) => {
          setCode(v);
          if (status === "invalid") setStatus("idle");
        }}
        autoSubmit
        onAutoSubmit={verify}
        invalid={status === "invalid"}
        disabled={status === "checking" || status === "done"}
        aria-label="Verification code"
      />
      <p className="mt-4 h-5 text-[12.5px] text-neutral-500 dark:text-neutral-400">
        {status === "checking" && "Checking…"}
        {status === "invalid" && <span className="text-red-600 dark:text-red-400">That code didn't work. Try 123456.</span>}
        {status === "done" && "Code accepted."}
        {status === "idle" &&
          (wait > 0 ? (
            <>Resend code in <span className="tabular-nums">0:{String(wait).padStart(2, "0")}</span></>
          ) : (
            <button onClick={() => setWait(30)} className="font-medium text-neutral-900 underline-offset-2 outline-none hover:underline focus-visible:underline dark:text-white">
              Resend code
            </button>
          ))}
      </p>
    </div>
  );
}

31:T804,

import { InputOTP } from "@/components/scalar-ui/input-otp";

export default function Example() {
  return <InputOTP length={6} aria-label="One-time code" />;
}

32:T12c9,

import { InputOTP } from "@/components/scalar-ui/input-otp";

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-6">
      <InputOTP groups={[3, 3]} defaultValue="482" aria-label="Verification code" />
      <InputOTP groups={[2, 2, 2]} size="sm" aria-label="Pairing code" />
    </div>
  );
}

33:T1e5b,

import { InputOTP } from "@/components/scalar-ui/input-otp";

const variants = ["outline", "soft", "underline", "joined"] as const;

export default function Example() {
  return (
    <div className="grid gap-5">
      {variants.map((variant) => (
        <div key={variant} className="flex items-center gap-6">
          <span className="w-20 font-mono text-[12px] text-neutral-500 dark:text-neutral-400">{variant}</span>
          <InputOTP variant={variant} groups={[3, 3]} defaultValue="19" aria-label={`${variant} code`} />
        </div>
      ))}
    </div>
  );
}

34:T709,"use client"; import { Check, Copy } from "lucide-react"; import { useState } from "react"; import { InputOTP } from "@/components/scalar-ui/input-otp"; const CODE = "731905"; export default function Example() { const [copied, setCopied] = useState(false); const [value, setValue] = useState(""); const copy = async () => { try { await navigator.clipboard.writeText(CODE); } catch {} setCopied(true); setTimeout(() => setCopied(false), 1500); }; return (

Aurora · sign-in code

{CODE}

{value.length === 6 ? (value === CODE ? "Pasted all six digits." : "Code entered.") : "Click a box and paste: every box fills at once."}

); } 35:T4396,

"use client";

import { Check, Copy } from "lucide-react";
import { useState } from "react";
import { InputOTP } from "@/components/scalar-ui/input-otp";

const CODE = "731905";

export default function Example() {
  const [copied, setCopied] = useState(false);
  const [value, setValue] = useState("");
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(CODE);
    } catch {}
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };
  return (
    <div className="flex flex-col items-center gap-5">
      <div className="flex items-center gap-3 rounded-2xl bg-neutral-100 py-2 pl-4 pr-2 dark:bg-white/[0.06]">
        <div className="text-left">
          <p className="text-[11.5px] text-neutral-500 dark:text-neutral-400">Aurora · sign-in code</p>
          <p className="font-mono text-[15px] font-medium tracking-[0.2em] text-neutral-900 dark:text-white">{CODE}</p>
        </div>
        <button
          onClick={copy}
          className="flex h-8 items-center gap-1.5 rounded-[10px] bg-white px-2.5 text-[12.5px] font-medium text-neutral-700 shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.06] outline-none transition-colors hover:bg-neutral-50 focus-visible:bg-neutral-50 dark:bg-white/[0.08] dark:text-neutral-200 dark:ring-white/[0.08]"
        >
          {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
          {copied ? "Copied" : "Copy"}
        </button>
      </div>
      <InputOTP groups={[3, 3]} value={value} onValueChange={setValue} aria-label="Sign-in code" />
      <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">{value.length === 6 ? (value === CODE ? "Pasted all six digits." : "Code entered.") : "Click a box and paste: every box fills at once."}</p>
    </div>
  );
}

36:T1350,

import { InputOTP } from "@/components/scalar-ui/input-otp";

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-3">
      <InputOTP groups={[4, 4]} size="sm" variant="joined" validationType="alphanumeric" className="uppercase" defaultValue="K7PX" aria-label="Recovery code" />
      <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">Letters and numbers, e.g. a backup recovery code.</p>
    </div>
  );
}

37:T113c,

import { InputOTP } from "@/components/scalar-ui/input-otp";

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-3">
      <p className="text-[13.5px] font-medium text-neutral-900 dark:text-white">Enter your PIN</p>
      <InputOTP length={4} type="password" size="lg" variant="soft" defaultValue="27" aria-label="PIN" />
    </div>
  );
}

38:T1523,

import { InputOTP } from "@/components/scalar-ui/input-otp";

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-5">
      {(["sm", "md", "lg"] as const).map((size) => (
        <InputOTP key={size} size={size} length={4} defaultValue="19" aria-label={`${size} code`} />
      ))}
    </div>
  );
}

39:T183b,

import { InputOTP } from "@/components/scalar-ui/input-otp";

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex flex-col items-center gap-2">
        <InputOTP groups={[3, 3]} defaultValue="902114" invalid aria-label="Invalid code" />
        <p className="text-[12.5px] text-red-600 dark:text-red-400">That code has expired. Request a new one.</p>
      </div>
      <InputOTP groups={[3, 3]} defaultValue="551" disabled aria-label="Disabled code" />
    </div>
  );
}

29:["$","section","input-otp",{"id":"input-otp","aria-labelledby":"input-otp-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":"input-otp-title","className":"sr-only","children":"Input OTP"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"input-otp","gated":{"unlocked":true,"files":[{"name":"input-otp.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"import { InputOTP } from \"@/components/scalar-ui/input-otp\";\n\nexport default function Example() {\n return ;\n}\n","html":"$31"},"grouped":{"name":"grouped.tsx","code":"import { InputOTP } from \"@/components/scalar-ui/input-otp\";\n\nexport default function Example() {\n return (\n

\n \n \n

\n );\n}\n","html":"$32"},"variants":{"name":"variants.tsx","code":"import { InputOTP } from \"@/components/scalar-ui/input-otp\";\n\nconst variants = [\"outline\", \"soft\", \"underline\", \"joined\"] as const;\n\nexport default function Example() {\n return (\n

\n {variants.map((variant) => (\n

\n {variant}\n \n

\n ))}\n

\n );\n}\n","html":"$33"},"with-paste":{"name":"with-paste.tsx","code":"$34","html":"$35"},"alphanumeric":{"name":"alphanumeric.tsx","code":"import { InputOTP } from \"@/components/scalar-ui/input-otp\";\n\nexport default function Example() {\n return (\n

\n \n

Letters and numbers, e.g. a backup recovery code.

\n );\n}\n","html":"$36"},"masked":{"name":"masked.tsx","code":"import { InputOTP } from \"@/components/scalar-ui/input-otp\";\n\nexport default function Example() {\n return (\n

Enter your PIN

\n \n

\n );\n}\n","html":"$37"},"size":{"name":"size.tsx","code":"import { InputOTP } from \"@/components/scalar-ui/input-otp\";\n\nexport default function Example() {\n return (\n

\n {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n \n ))}\n

\n );\n}\n","html":"$38"},"invalid-disabled":{"name":"invalid-disabled.tsx","code":"import { InputOTP } from \"@/components/scalar-ui/input-otp\";\n\nexport default function Example() {\n return (\n

\n \n

That code has expired. Request a new one.

\n \n

\n );\n}\n","html":"$39"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add input-otp","shadcn":"npx shadcn@latest add https://scalarui.com/r/input-otp.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":"npm install radix-ui motion","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L3a","toolbar":"$L3b"}]}],["$L3c","$L3d","$L3e","$L3f","$L40","$L41","$L42","$L43"]]}]