{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "locked-code", "title": "Locked code", "description": "A locked Pro file: a blurred stub, an unlock link with the price, the facts, and the CLI and MCP commands to copy once you have a key.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "@manniche/badge", "@manniche/copy-button" ], "files": [ { "path": "registry/manniche/locked-code/locked-code.tsx", "content": "// LockedCode: the code view of a paid component before it is unlocked. A file header with a lock and the tier badge,\n// a stub of code blurred behind a lock panel (heading, a line of text, the unlock link, a price note and a few facts),\n// and under it a row for people who already have a key: the CLI and MCP commands, each with a copy button.\n//\n// The stub is decoration. It is hidden from screen readers and blurred with `filter`, but it still ships in the page's\n// HTML, so pass placeholder lines that look like code, never the real source.\n//\n// The key slot above the heading lights up while the unlock link is hovered or has keyboard focus, so the panel\n// answers before the click. Under reduced motion it lights at once instead of fading.\n//\n// Every part carries a `data-slot` (`locked-code`, `locked-code-unlock`, `locked-code-light`, …), the shadcn way to\n// style a part from outside without new props.\nimport { Lock } from 'lucide-react'\nimport { Fragment, useId, type MouseEvent, type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/registry/manniche/badge/badge'\nimport { CopyButton } from '@/registry/manniche/copy-button/copy-button'\n\nexport type LockedCodeCommand = {\n /** A short name shown before the command, such as \"CLI\" or \"MCP\". */\n label: string\n /** The whole command, exactly as it lands on the clipboard. */\n value: string\n /** The start of `value` to draw fainter, such as `npx shadcn@latest add`. It must be how `value` begins. */\n prefix?: string\n}\n\nexport type LockedCodeLabels = {\n /** The tier badge in the header. Default \"Pro\". */\n pro?: string\n /** The panel's heading. Default \"The code is locked\". */\n heading?: string\n /** The line under the heading; `{name}` becomes `name`. Default \"{name} is part of Pro. A key opens its source code.\" */\n body?: string\n /** The unlock link, before the price. Default \"Unlock\". */\n unlock?: string\n /** The lead of the key row, set in bold. Default \"Have a key?\". */\n haveKey?: string\n /** The rest of that line. Default \"Get the code with the CLI or MCP.\". */\n haveKeyText?: string\n /** Where the key is kept; `{env}` becomes `envVar` set as code. Default \"The key lives in {env}, never in the code or the URL.\" */\n keyNote?: string\n /** The link to `setupHref`. Default \"How to set it up\". */\n setup?: string\n /** Names each command for screen readers; `{label}` becomes its label. Default \"{label} command\". */\n command?: string\n /** The copy buttons. Defaults \"Copy\", \"Copied\" and \"Not copied\". */\n copy?: string\n copied?: string\n copyFailed?: string\n}\n\nexport type LockedCodeProps = {\n /** The component's name, such as \"flux-image\". Used in the text and, with \".tsx\", as the file name. */\n name: string\n /** The file name in the header. Default `${name}.tsx`. */\n filename?: string\n /**\n * Placeholder lines drawn blurred behind the lock. They ship in the page's HTML, so never pass the real source:\n * a few generic lines (imports, a props type, an empty function) are enough to read as code.\n */\n stub: string\n /** Where the unlock link goes, such as the pricing section. */\n unlockHref: string\n /** Called when the unlock link is clicked, for opening a checkout in place. Call `preventDefault()` to stay. */\n onUnlock?: (event: MouseEvent) => void\n /** The price after the unlock label, such as \"€49\". Leave it out for a plain \"Unlock\". */\n price?: string\n /** One line under the link about the price, such as an introductory offer and when it ends. */\n priceNote?: ReactNode\n /** Short facts in a row under the price, such as \"One-time payment\". */\n facts?: string[]\n /** The commands that fetch the code with a key, each with a copy button. Leave it empty to drop the key row. */\n commands?: LockedCodeCommand[]\n /** The environment variable the key lives in, shown in the key row. */\n envVar?: string\n /** A page that explains how to set the key up, linked from the key row. */\n setupHref?: string\n /** Words for other languages. */\n labels?: LockedCodeLabels\n /** The heading level of \"The code is locked\", to fit the page outline. Default 3. */\n headingLevel?: 2 | 3 | 4 | 5 | 6\n className?: string\n}\n\n// Replaces {key} in a label with a value, keeping the rest of the text as it is.\nfunction fill(template: string, values: Record): ReactNode {\n return template.split(/(\\{\\w+\\})/).map((part, i) => {\n const key = /^\\{(\\w+)\\}$/.exec(part)?.[1]\n return {key && key in values ? values[key] : part}\n })\n}\nconst fillText = (template: string, values: Record) =>\n template.replace(/\\{(\\w+)\\}/g, (m, key: string) => values[key] ?? m)\n\n// A long command breaks between words first, then after a slash. Each piece is kept whole (so flux-image or\n// --header never splits at its hyphen) unless it is wider than the line on its own.\nconst breakable = (s: string) =>\n s.split(/( +)/).map((word, w) =>\n word.trim() ? (\n \n {word.split(/(?<=\\/)(?!\\/)/).map((part, i) => (\n \n {part}\n \n ))}\n \n ) : (\n word\n ),\n )\n\n// A recess in the surface: darker than the card, lit from above.\nconst WELL =\n 'bg-background shadow-[inset_0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_7%,transparent)] dark:shadow-[inset_0_1px_2px_rgb(0_0_0/0.55),inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_6%,transparent)]'\nconst PIT =\n 'bg-background shadow-[inset_0_2px_4px_rgb(0_0_0/0.14),inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_9%,transparent)] dark:shadow-[inset_0_2px_4px_rgb(0_0_0/0.7),inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_8%,transparent)]'\n\n/** The locked code view for a paid component: a blurred stub behind a lock panel, and the commands for key holders. */\nexport function LockedCode({\n name,\n filename,\n stub,\n unlockHref,\n onUnlock,\n price,\n priceNote,\n facts = [],\n commands = [],\n envVar,\n setupHref,\n labels = {},\n headingLevel = 3,\n className,\n}: LockedCodeProps) {\n const {\n pro = 'Pro',\n heading = 'The code is locked',\n body = '{name} is part of Pro. A key opens its source code.',\n unlock = 'Unlock',\n haveKey = 'Have a key?',\n haveKeyText = 'Get the code with the CLI or MCP.',\n keyNote = 'The key lives in {env}, never in the code or the URL.',\n setup = 'How to set it up',\n command = '{label} command',\n copy = 'Copy',\n copied = 'Copied',\n copyFailed = 'Not copied',\n } = labels\n const headingId = useId()\n const fileId = useId()\n const Heading = `h${headingLevel}` as const\n const lines = stub.replace(/\\n+$/, '').split('\\n')\n\n return (\n \n \n \n \n {filename ?? `${name}.tsx`}\n \n \n {pro}\n \n \n\n
\n \n {lines.map((line, i) => (\n \n {i + 1}\n {line}\n \n ))}\n \n\n \n {/* The key slot: a groove that lights while the unlock link is pointed at or focused. */}\n
\n \n \n \n
\n\n \n {heading}\n \n

\n {fill(body, { name })}\n

\n\n \n {unlock}\n {price && (\n <>\n {' '}\n · {price}\n \n )}\n \n {priceNote &&

{priceNote}

}\n {facts.length > 0 && (\n
    \n {facts.map((fact) => (\n \n {fact}\n \n ))}\n
\n )}\n
\n \n\n {commands.length > 0 && (\n \n
\n

\n {haveKey} {haveKeyText}\n

\n {(envVar || setupHref) && (\n

\n {envVar &&\n fill(keyNote, {\n env: {envVar},\n })}\n {envVar && setupHref && ' '}\n {setupHref && (\n \n {setup}\n \n )}\n

\n )}\n
\n
\n {commands.map((c) => {\n const lead = c.prefix && c.value.startsWith(c.prefix) ? c.prefix : ''\n return (\n \n \n {c.label}\n \n \n {lead && {lead}}\n {breakable(c.value.slice(lead.length))}\n \n {/* The copy button's resting fill follows --primary; here it rests muted like a key cap, and\n keeps its green \"copied\" and red \"not copied\" states. */}\n \n \n \n
\n )\n })}\n \n \n )}\n \n )\n}\n", "type": "registry:component" } ], "meta": { "tier": "free", "added": "2026-10-07", "usedIn": [], "props": [ { "name": "name", "type": "string", "default": null, "required": true, "description": "The component's name, such as \"flux-image\". Used in the text and, with \".tsx\", as the file name." }, { "name": "filename", "type": "string", "default": null, "required": false, "description": "The file name in the header. Default `${name}.tsx`." }, { "name": "stub", "type": "string", "default": null, "required": true, "description": "Placeholder lines drawn blurred behind the lock. They ship in the page's HTML, so never pass the real source: a few generic lines (imports, a props type, an empty function) are enough to read as code." }, { "name": "unlockHref", "type": "string", "default": null, "required": true, "description": "Where the unlock link goes, such as the pricing section." }, { "name": "onUnlock", "type": "(event: MouseEvent) => void", "default": null, "required": false, "description": "Called when the unlock link is clicked, for opening a checkout in place. Call `preventDefault()` to stay." }, { "name": "price", "type": "string", "default": null, "required": false, "description": "The price after the unlock label, such as \"€49\". Leave it out for a plain \"Unlock\"." }, { "name": "priceNote", "type": "ReactNode", "default": null, "required": false, "description": "One line under the link about the price, such as an introductory offer and when it ends." }, { "name": "facts", "type": "string[]", "default": "[]", "required": false, "description": "Short facts in a row under the price, such as \"One-time payment\"." }, { "name": "commands", "type": "LockedCodeCommand[]", "default": "[]", "required": false, "description": "The commands that fetch the code with a key, each with a copy button. Leave it empty to drop the key row." }, { "name": "envVar", "type": "string", "default": null, "required": false, "description": "The environment variable the key lives in, shown in the key row." }, { "name": "setupHref", "type": "string", "default": null, "required": false, "description": "A page that explains how to set the key up, linked from the key row." }, { "name": "labels", "type": "LockedCodeLabels", "default": "{}", "required": false, "description": "Words for other languages." }, { "name": "headingLevel", "type": "2 | 3 | 4 | 5 | 6", "default": "3", "required": false, "description": "The heading level of \"The code is locked\", to fit the page outline. Default 3." }, { "name": "className", "type": "string", "default": null, "required": false, "description": null } ], "a11y": [ { "topic": "keyboard", "text": "Tab order: Unlock, How to set it up, Copy CLI, Copy MCP. The key slot lights on hover and on keyboard focus.", "keys": [ "Tab", "Enter" ] }, { "topic": "screen-reader", "text": "A region named by the file name and heading. The stub is aria-hidden: pass placeholder lines, never real source, since it ships in the HTML. Each command row is a group named after its command, so each Copy says what it copies." }, { "topic": "motion", "text": "No transition under reduced motion." } ] }, "categories": [ "surfaces" ], "type": "registry:component" }