Building something custom?
A Template gets you shipped in one file. If you'd rather assemble your own layout, these are the 16 tested React blocks our templates are built from — preview live, copy source, or install via shadcn CLI.
16 building blocks
From access screens and PIN inputs to layout wrappers, modals, and session indicators — built on the same tiny core as the templates, installable via the shadcn CLI or copy-paste.
Core Blocks, Template Cores, and category views overlap — a block can match more than one.
Access Denied Screen
A copy-paste React denial screen for a hard-locked route or a custom Protected Route fallback — no access-code form, no retry. Zero dependencies.
Access Receipt
A copy-paste React session receipt for Knock Codes access screens — unlock time, storage mode, timeout. Zero dependencies.
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.
Knock Codes
A 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.
Logout Button
A copy-paste React logout control for Knock Codes access screens — clears the shared session on click. Zero dependencies.
PIN Input
A copy-paste React access-code field for building a custom gate on useKnockCodes — masked field or segmented boxes, paste support, accessible errors. Zero dependencies.
Protected Card
A copy-paste React access screen for gating one card in a dashboard grid — blurred preview, inline unlock. Zero dependencies.
Protected Layout
A copy-paste React access screen for a Next.js layout or app root — header and footer stay visible while locked. Zero dependencies.
Protected Modal
A copy-paste React access screen for a paywall-style preview — content stays mounted and blurred behind a modal prompt. Zero dependencies.
Protected Route
A copy-paste React access screen for route-level guarding — React Router or similar, with an optional custom denial state. Zero dependencies.
Session Provider
A copy-paste React session provider for Knock Codes access screens — shares one unlock state across a gate, a logout button, and a timeout banner. Zero dependencies.
Session Timeout Banner
A copy-paste React warning banner for Knock Codes access screens — alerts before a shared session expires, with a one-click logout. Zero dependencies.
Unlock Dialog
A copy-paste React unlock dialog for triggering an access-code prompt from a custom button or menu item. Zero dependencies.
Verification Loader
A copy-paste React loading indicator for a custom access-code form built on useKnockCodes. Zero dependencies.