--- name: "@knock-codes" slug: "knock-codes" description: "Copy-paste, session-gated access blocks for React — PIN/Knock Code unlock screens, protected routes/layouts/modals, a headless useKnockCodes hook, and full-page templates." category: "Blocks & sections (marketing/SaaS)" tags: ["auth", "blocks", "hooks", "overlays"] framework: "react" license: null author: null website: "https://knock.codes" github: null registry: "https://knock.codes/r/react/registry.json" pro: false pro_url: null github_stars: null component_count: 19 generated_at: "2026-09-21T01:50:16.753Z" --- # @knock-codes Copy-paste, session-gated access blocks for React — PIN/Knock Code unlock screens, protected routes/layouts/modals, a headless useKnockCodes hook, and full-page templates. ## Links - Website: https://knock.codes - Registry JSON: https://knock.codes/r/react/registry.json - Directory page: https://sh4dcn.vercel.app/registry/knock-codes - This file: https://sh4dcn.vercel.app/md/knock-codes.md ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://knock.codes/r/react/registry.json pnpm dlx shadcn@latest add https://knock.codes/r/react/registry.json bunx shadcn@latest add https://knock.codes/r/react/registry.json # fetch the raw registry index curl -s https://knock.codes/r/react/registry.json ``` ## Components (19) | name | type | description | install | | --- | --- | --- | --- | | blur-veil | registry:component | Shows an inert blurred teaser beneath a prompt; blur is presentation, not security. Does not verify codes, persist state, or grant or revoke access. Contract: … | `npx shadcn@latest add https://knock.codes/r/react/blur-veil.json` | | code-field | registry:component | Displays controlled demo-code entry, normalizing pasted message artifacts. Does not verify codes, unlock content, store values, or make network requests. Contr… | `npx shadcn@latest add https://knock.codes/r/react/code-field.json` | | cooldown-notice | registry:component | Displays a calm countdown without enforcing a retry policy. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecy… | `npx shadcn@latest add https://knock.codes/r/react/cooldown-notice.json` | | expiry-pill | registry:component | Shows a preview lifetime as fine, expiring soon, or expired. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifec… | `npx shadcn@latest add https://knock.codes/r/react/expiry-pill.json` | | preview-bar | registry:component | Keeps build identity, expiry, feedback and relocking available after unlock. Does not verify codes, persist state, or grant or revoke access. Contract: the con… | `npx shadcn@latest add https://knock.codes/r/react/preview-bar.json` | | preview-ribbon | registry:component | Keeps a draft label visible within preview screenshots. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle … | `npx shadcn@latest add https://knock.codes/r/react/preview-ribbon.json` | | preview-watermark | registry:component | Marks unlocked work with a light recipient or build overlay for screenshots. Does not verify codes, persist state, or grant or revoke access. Contract: the con… | `npx shadcn@latest add https://knock.codes/r/react/preview-watermark.json` | | recipient-line | registry:component | Addresses a private preview to its intended recipient. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle t… | `npx shadcn@latest add https://knock.codes/r/react/recipient-line.json` | | relock-control | registry:component | Lets the consumer hide a preview on a shared screen. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle tim… | `npx shadcn@latest add https://knock.codes/r/react/relock-control.json` | | request-access | registry:component | Routes a recipient without a code to the preview owner. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle … | `npx shadcn@latest add https://knock.codes/r/react/request-access.json` | | client-preview-gate | registry:block | Your next chapter is ready for a first look. Enter the code from your invitation. Does not verify codes, persist state, or grant or revoke access. Contract: al… | `npx shadcn@latest add https://knock.codes/r/react/client-preview-gate.json` | | cooldown-screen | registry:block | Your preview is still here. Give it a moment before your next try. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share … | `npx shadcn@latest add https://knock.codes/r/react/cooldown-screen.json` | | expired-notice | registry:block | The invitation window has ended. Ask the studio for a fresh link. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share c… | `npx shadcn@latest add https://knock.codes/r/react/expired-notice.json` | | gated-section | registry:block | This part of the preview was prepared for invited reviewers. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share contro… | `npx shadcn@latest add https://knock.codes/r/react/gated-section.json` | | open-invitation | registry:block | This look is for you. Continue when you are ready. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share controlled input… | `npx shadcn@latest add https://knock.codes/r/react/open-invitation.json` | | preview-chrome | registry:block | Enter your invitation code to see the draft. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share controlled input and v… | `npx shadcn@latest add https://knock.codes/r/react/preview-chrome.json` | | quick-gate | registry:block | Enter your preview code to continue. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share controlled input and visibilit… | `npx shadcn@latest add https://knock.codes/r/react/quick-gate.json` | | revoked-notice | registry:block | The owner has withdrawn access. Contact them if you need another look. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks sh… | `npx shadcn@latest add https://knock.codes/r/react/revoked-notice.json` | | teaser-gate | registry:block | Your private preview is just one invitation away. Does not verify codes, persist state, or grant or revoke access. Contract: all blocks share controlled input … | `npx shadcn@latest add https://knock.codes/r/react/teaser-gate.json` | ## For AI agents ```text You are adding components from @knock-codes to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/knock-codes.md) for the component list. 2. Fetch the machine-readable index: https://knock.codes/r/react/registry.json 3. Install a single component with its install command from the table above. 4. Full structured record: https://sh4dcn.vercel.app/json (library slug: knock-codes). ```