Gate Wrapper
A copy-paste React layout primitive for composing a fully custom access-code UI — page-centered or inline positioning, no verification logic. Zero dependencies.
Best used for Composing a fully custom access-code UI that still needs the standard page/inline positioning.
Not a verification strategy — just layout. Every block that renders visible UI (<KnockCodes>,
<ProtectedCard>, <AccessDeniedScreen>, ...) composes on this instead of re-deriving centering/spacing.
Minimal setup
<GateWrapper variant="page">
<YourCustomAccessForm />
</GateWrapper>
- components
- knock-codes
- react
import type { ReactNode } from "react";
import { cx } from "./cx.ts";
/** Outer positioning only — "page" centers full-height, "inline" flows in place. Visual treatment (borders/padding/shadow) is each block's own concern, not this wrapper's. */
export type GateWrapperVariant = "page" | "inline";
export interface GateWrapperProps {
children: ReactNode;
/** @default "page" */
variant?: GateWrapperVariant;
className?: string;
}
const VARIANT_CLASSES: Record<GateWrapperVariant, string> = {
page: "flex min-h-[100dvh] w-full items-center justify-center p-6",
inline: "flex w-full items-start",
};
/**
* The shared outer-positioning primitive every visible block composes on —
* a plain container, not a verification strategy. Kept separate from
* `<KnockCodes>` so blocks like `<ProtectedRoute>`/`<EmbeddedGate>` can reuse
* the same page-vs-inline placement without re-deriving it, while each block
* still owns its own inner card/border/spacing styling.
*/
export function GateWrapper({ children, variant = "page", className }: GateWrapperProps) {
return <div className={cx(VARIANT_CLASSES[variant], className)}>{children}</div>;
}
Add this block to your project
Recommended
npx shadcn@latest add @knock-codes/gate-wrapperAlso installs
- cx (classname helper)
These install together as one atomic unit — even a presentational or read-only piece needs the full verification stack (hook, types, core) behind it to actually run.
Files created (2)
- components/knock-codes/react/cx.ts
- components/knock-codes/react/GateWrapper.tsx
Other ways
GitHub shorthand
npx shadcn@latest add trivedi-vatsal/knock-codes/gate-wrapperCopy 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.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | Content to position. |
| variant | "page" | "inline" | "page" | "page" centers full-height (min-h-100dvh); "inline" flows naturally in place. |
| className | string | — | Extra classes on the wrapper. |
Accessibility
Purely structural — a single div with positioning classes. No semantics of its own to get wrong.
Customization
Use it directly when none of the other blocks' visual shells fit — wrap your own fully custom access-code form in it to get the same full-page-centered or inline placement every other block uses, for free.
Need a hash? Use the hash generator on Getting Started — computed locally, never sent anywhere.
The honest version
Knock Codes stops casual visitors, search engines, and forwarded links. Local mode does not stop anyone who opens DevTools — the hash ships in your client bundle by design. Server mode (swap one prop) hides the hash from the client; children you already bundled are still in the JavaScript, and a forged session works unless you wire validateSession. A velvet rope, with an optional real lock. Never marketed as more than that.
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.
- Knock CodesA copy-paste React access screen for gating a whole page or app root — local hash or server verification, one prop swap between them. Zero dependencies.
- Embedded GateA copy-paste React access screen for gating a widget or section inside an existing layout — Knock Codes, fixed to the inline shell. Zero dependencies.
- Standalone GateA copy-paste React access screen for the fastest possible integration — wrap your app, pass a hash, done. Zero dependencies.