Knock Codes

Overview

Knock is a set of copy-paste React components for private previews: the access screens, invitations and draft controls that sit in front of work shared with a client or reviewer. It targets React 18 and 19 with Tailwind CSS 4 and installs through the shadcn CLI.

The registry holds 19 items, split into 10 components and 9 full-screen blocks that cover the gate, the unlocked state and the ended state. Knock is deliberately presentation-only: it does no authentication, code verification, storage, fetching or sessions. Each item documents a contract in which the consuming app owns the unlocked state, lifecycle timestamps and action callbacks.

Features

• Gate blocks: Client preview gate, quick gate, teaser gate, gated section and open invitation cover different levels of ceremony.
• Ended states: Expired, revoked and cooldown screens give recipients a clear message and a route back to the owner.
• Unlocked chrome: Preview bar, ribbon and watermark keep build identity, expiry, feedback and draft status visible after unlock.
• Code field: A controlled entry field that tidies codes pasted from email.
• Recipient and expiry details: Recipient line and expiry pill show who a preview is for and how long it lasts.
• Theming: Light, dark or system themes, with CSS variables such as --knock-bg and --knock-accent for overrides.
• Agent docs: An llms.txt and full-library llms-full.txt describe every item's contract.

Tech stack

• React 18/19, Tailwind CSS 4, shadcn CLI registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @knock-codes/component-name