--- 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: "Forms" tags: ["auth", "blocks", "buttons", "cards", "forms", "hooks", "icons", "loaders", "overlays"] framework: "react" license: "MIT" author: "trivedi-vatsal" website: "https://knock.codes" github: "https://github.com/trivedi-vatsal/knock-codes" registry: "https://knock.codes/r/react/registry.json" pro: false pro_url: null github_stars: 0 component_count: 24 generated_at: "2026-09-05T09:50:59.044Z" --- # @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 - GitHub: https://github.com/trivedi-vatsal/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 # clone the source repo git clone https://github.com/trivedi-vatsal/knock-codes.git # fetch the raw registry index curl -s https://knock.codes/r/react/registry.json ``` ## Components (24) | name | type | description | install | | --- | --- | --- | --- | | knock-codes-core | registry:block | Framework-agnostic hash/session/storage/verify logic. Installed automatically as a dependency of every React block — install directly only if you're building a… | `npx shadcn@latest add https://knock.codes/r/react/knock-codes-core.json` | | knock-codes-types | registry:block | Shared config/defaults/label types used by every React block. Installed automatically — not meant to be added on its own. | `npx shadcn@latest add https://knock.codes/r/react/knock-codes-types.json` | | knock-codes-hook | registry:block | The headless session/verification hook every stateful block is built on. Installed automatically — use it directly only if you're building a fully custom PIN U… | `npx shadcn@latest add https://knock.codes/r/react/knock-codes-hook.json` | | cx-util | registry:block | Tiny local classname joiner used across blocks. Installed automatically. | `npx shadcn@latest add https://knock.codes/r/react/cx-util.json` | | gate-wrapper | registry:block | The shared outer-positioning primitive (full-page centered vs. inline) every visible block composes on. Use it directly to build a fully custom gate layout. | `npx shadcn@latest add https://knock.codes/r/react/gate-wrapper.json` | | pin-input | registry:block | Masked PIN/passphrase input with paste support, show/hide toggle, and accessible loading/error states. No verification logic of its own. | `npx shadcn@latest add https://knock.codes/r/react/pin-input.json` | | knock-codes | registry:block | The main gate: renders children when unlocked, otherwise a PIN prompt. Local SHA-256 verification by default; pass a `verify` function for server-mode protecti… | `npx shadcn@latest add https://knock.codes/r/react/knock-codes.json` | | protected-route | registry:block | `` shaped for route-level guarding (a React Router `element`, a layout redirect guard), with an optional `unauthorizedFallback` for routes that sho… | `npx shadcn@latest add https://knock.codes/r/react/protected-route.json` | | protected-layout | registry:block | `` shaped for a full-page shell (a Next.js layout.tsx): header/footer render even while locked, so persistent site chrome survives the gate. | `npx shadcn@latest add https://knock.codes/r/react/protected-layout.json` | | unlock-dialog | registry:block | A non-dismissable modal PIN prompt — no backdrop click, no Escape-to-close. Composable standalone, or used by Protected Modal. | `npx shadcn@latest add https://knock.codes/r/react/unlock-dialog.json` | | protected-modal | registry:block | Content stays mounted (blurred and inert) behind a modal Unlock Dialog instead of being replaced outright — useful when the protected content's layout should s… | `npx shadcn@latest add https://knock.codes/r/react/protected-modal.json` | | session-provider | registry:block | Shares one useKnockCodes session across a tree, so a gate, a Logout Button, and a Session Timeout Banner all read and act on the same unlock state. | `npx shadcn@latest add https://knock.codes/r/react/session-provider.json` | | session-timeout-banner | registry:block | Warns before the shared session expires, with a one-click way to log out immediately instead of waiting for automatic expiry. Requires a Session Provider. | `npx shadcn@latest add https://knock.codes/r/react/session-timeout-banner.json` | | access-receipt | registry:block | A small session audit strip shown after unlock — timestamp, storage mode, timeout, and verification strategy. Requires a Session Provider. | `npx shadcn@latest add https://knock.codes/r/react/access-receipt.json` | | access-denied-screen | registry:block | A static "you don't have access" view with no PIN form in it at all — distinct from the PIN entry UI. Use it as a custom unauthorizedFallback or any hard denia… | `npx shadcn@latest add https://knock.codes/r/react/access-denied-screen.json` | | verification-loader | registry:block | A small presentational spinner + label for the in-flight verification moment, for a fully custom PIN form built directly on useKnockCodes. | `npx shadcn@latest add https://knock.codes/r/react/verification-loader.json` | | logout-button | registry:block | Reads the shared session from a Session Provider and clears it on click. | `npx shadcn@latest add https://knock.codes/r/react/logout-button.json` | | protected-card | registry:block | A card-shaped gate for protecting one section of a page rather than the whole viewport — locked content stays mounted and blurred behind an Unlock button so th… | `npx shadcn@latest add https://knock.codes/r/react/protected-card.json` | | standalone-gate | registry:block | The fastest path to a working gate: wrap your app, pass a hash, done. A deliberately smaller prop surface than Knock Codes. | `npx shadcn@latest add https://knock.codes/r/react/standalone-gate.json` | | embedded-gate | registry:block | Knock Codes fixed to the inline shell — sits naturally inside an existing layout (a sidebar widget, a section of a longer page) instead of taking over the full… | `npx shadcn@latest add https://knock.codes/r/react/embedded-gate.json` | | knock-codes-template | registry:block | A complete, single-file "restricted access" screen — full-page dark backdrop, centered card, segmented code entry, support link, footer help text. Everything i… | `npx shadcn@latest add https://knock.codes/r/react/knock-codes-template.json` | | minimal-access-template | registry:block | The leanest access screen — a single masked field, a small plain card, no segmented boxes and no default footer copy. Everything in one component. | `npx shadcn@latest add https://knock.codes/r/react/minimal-access-template.json` | | branded-access-template | registry:block | A split-screen, logo-forward access screen — brand panel on one side, code entry on the other. The brand panel collapses on small screens. | `npx shadcn@latest add https://knock.codes/r/react/branded-access-template.json` | | modal-access-template | registry:block | Gates one section of an already-visible page — the content stays mounted and blurred behind a centered dialog instead of disappearing entirely. | `npx shadcn@latest add https://knock.codes/r/react/modal-access-template.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). ```