Routing & Layout

Standalone Gate

The fastest path to a working gate: wrap your app, pass a hash, done.

quickstart

Best used for The fastest possible integration — wrapping an entire app with minimal configuration.

For the two-line integration: generate a hash, wrap your app, ship it. No config to reason about.

Loading preview…
Installation

Add this block to your project

CLI

npx shadcn@latest add http://localhost:3000/r/react/standalone-gate.json

Running this site somewhere other than localhost? Set NEXT_PUBLIC_SITE_URL and this command switches to that host automatically.

Also installs

  • Knock Codes Core
  • Knock Codes Types
  • useKnockCodes
  • cx (classname helper)
  • Gate Wrapper
  • PIN Input
  • Knock Codes

Files created (11)

  • components/knock-codes/core/hash.ts
  • components/knock-codes/core/verify.ts
  • components/knock-codes/core/session.ts
  • components/knock-codes/core/storage.ts
  • components/knock-codes/react/types.ts
  • components/knock-codes/react/useKnockCodes.ts
  • components/knock-codes/react/cx.ts
  • components/knock-codes/react/GateWrapper.tsx
  • components/knock-codes/react/PinInput.tsx
  • components/knock-codes/react/KnockCodes.tsx
  • components/knock-codes/react/StandaloneGate.tsx

No CLI? Copy the files by hand

  1. Open the Code tab in the preview above.
  2. Create each path listed below in your project and paste its contents in.
  3. Do the same for anything listed under “Also installs”, if present.

Props

API reference

PropTypeDefaultDescription
expectedHashstringSHA-256 hex hash to verify against, for local mode.
verifyVerifyFnCustom async verification function, for server mode.
children *ReactNodeRendered once unlocked.
headingstring"This page is protected"Overrides just the heading — for everything else, use Knock Codes directly.
variant"page" | "inline""page"Escape hatch for embedding a demo somewhere other than a real app root — a docs page, this gallery's own preview.
Notes

Accessibility

Same access-code entry UI as Knock Codes — full keyboard and screen-reader support inherited, none of it re-implemented.

Customization

Deliberately a smaller prop surface than Knock Codes — just `expectedHash`/`verify`, `children`, and an optional `heading`. Reach for `<KnockCodes>` directly the moment you need storage/timeout/activity-tracking control.

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.