→ Routing & Layout
Embedded Gate
Knock Codes fixed to the inline shell — sits naturally inside an existing layout.
Best used for Gating one section of a longer page — a sidebar widget or a mid-page panel.
The section-level counterpart to Standalone Gate's whole-app usage — same component, contained footprint.
- components
- knock-codes
- core
- react
"use client";
import { KnockCodes, type KnockCodesProps } from "./KnockCodes.tsx";
export type EmbeddedGateProps = Omit<KnockCodesProps, "variant">;
/**
* `<KnockCodes>` 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 viewport like the page-variant default.
*/
export function EmbeddedGate(props: EmbeddedGateProps) {
return <KnockCodes {...props} variant="inline" />;
}
Add this block to your project
CLI
npx shadcn@latest add http://localhost:3000/r/react/embedded-gate.jsonRunning 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/EmbeddedGate.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 |
|---|---|---|---|
| expectedHash | string | — | SHA-256 hex hash to verify against, for local mode. |
| verify | VerifyFn | — | Custom async verification function, for server mode. |
| storage | "localStorage" | "sessionStorage" | "memory" | "localStorage" | Where the unlocked session persists. |
| timeout | number | 1800000 | Session lifetime in milliseconds. |
| children * | ReactNode | — | Rendered once unlocked. |
| labels | KnockCodesLabels | — | Overrides for every user-facing string. |
Accessibility
Identical to Knock Codes — only the outer positioning changes, not the semantics or keyboard flow.
Customization
Same full prop surface as Knock Codes, minus `variant` (fixed to "inline"). Use it for a sidebar widget or a gated section partway down a longer page, where a full-viewport takeover would be wrong.
→ 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.