→ Feedback
Verification Loader
A small presentational spinner + label for the in-flight verification moment.
Best used for Composing a fully custom verification UI that still needs the standard in-flight spinner/label.
A tiny, focused component — reach for it when composing your own verification UI from scratch.
- components
- knock-codes
- react
import { cx } from "./cx.ts";
export interface VerificationLoaderProps {
label?: string;
className?: string;
}
/**
* A small presentational spinner + label for the in-flight verification
* moment — the same visual `<PinInput>` shows inline via its `submitting`
* state, exposed standalone for a fully custom PIN form built directly on
* `useKnockCodes`.
*/
export function VerificationLoader({ label = "Checking...", className }: VerificationLoaderProps) {
return (
<div
role="status"
aria-live="polite"
className={cx("flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", className)}
>
<span
aria-hidden="true"
className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600 dark:border-gray-700 dark:border-t-gray-300"
/>
{label}
</div>
);
}
Add this block to your project
CLI
npx shadcn@latest add http://localhost:3000/r/react/verification-loader.jsonRunning this site somewhere other than localhost? Set NEXT_PUBLIC_SITE_URL and this command switches to that host automatically.
Also installs
- cx (classname helper)
Files created (2)
- components/knock-codes/react/cx.ts
- components/knock-codes/react/VerificationLoader.tsx
No CLI? Copy the files by hand
- Open the Code tab in the preview above.
- Create each path listed below in your project and paste its contents in.
- Do the same for anything listed under “Also installs”, if present.
→ Props
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Checking..." | Text next to the spinner. |
| className | string | — | Extra classes on the container. |
Accessibility
role="status" + aria-live="polite", with the spinner itself marked aria-hidden so screen readers announce the text label once, not a decorative glyph.
Customization
The same visual `<PinInput>` shows inline via its `submitting` state, exposed standalone for a fully custom access-code form built directly on `useKnockCodes` where you're not using `<PinInput>` at all.
→ Compose with
Blocks that pair well with this one
These combine naturally with this block, whether as a shared shell, a shared session, or a common fallback.