{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "preview-ribbon",
"type": "registry:component",
"title": "Preview ribbon",
"description": "Keeps a draft label visible within preview screenshots. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle timestamps and action callbacks.",
"registryDependencies": [],
"files": [
{
"path": "registry/components/preview-ribbon.tsx",
"type": "registry:component",
"target": "@components/knock/preview-ribbon.tsx",
"content": "/**\n * MIT License — Copyright (c) 2026 Knock contributors.\n * Keeps a draft label visible within preview screenshots.\n * Does not verify codes, persist state, or grant or revoke access.\n * Contract: the consumer owns lifecycle timestamps and action callbacks.\n * @version 0.2.0\n * @minimalExample \n * @fullExample \n * @lifecycle unlocked\n * @whenToUse Draft status should travel with the work, including into the screenshots that leave the review.\n * @notFor A dismissible banner. There is no dismiss action by design: a ribbon that can be closed is absent from the screenshot that needed it.\n * @pitfall Position belongs to you. Without sticky or fixed positioning from your own className, the ribbon scrolls away with the page.\n * @a11y Native controls, visible focus, localized labels; lifecycle messages use polite announcements. No modal dialog is created.\n */\n'use client';\n\nexport interface PreviewRibbonProps {\n /** Localized draft label and supporting context. */\n labels?: {\n /** Localized draft. */\n draft?: string;\n\n /** Localized description. */\n description?: string;\n };\n\n /** Explicit theme; omitted follows the system preference. */\n theme?: 'light' | 'dark';\n /** Additional wrapper classes. */\n className?: string;\n}\nexport function PreviewRibbon({ labels, theme, className = '' }: PreviewRibbonProps) {\n return (\n \n \n \n \n \n \n {labels?.draft ?? 'Work in progress'}\n \n \n {labels?.description ?? 'A private preview, not the finished thing.'}\n \n \n );\n}\n"
}
],
"meta": {
"version": "0.2.0",
"lifecycle": "unlocked",
"whenToUse": "Draft status should travel with the work, including into the screenshots that leave the review.",
"notFor": "A dismissible banner. There is no dismiss action by design: a ribbon that can be closed is absent from the screenshot that needed it.",
"pitfalls": [
"Position belongs to you. Without sticky or fixed positioning from your own className, the ribbon scrolls away with the page."
],
"dependencies": [],
"usedBy": [
"preview-chrome"
],
"sourceHash": "d6f6151e26b1613692ee93fd967d1970ba0a46a034f97476eead3325d50cf25d",
"component": "PreviewRibbon",
"contract": "Keeps a draft label visible within preview screenshots. Does not verify codes, persist state, or grant or revoke access. Contract: the consumer owns lifecycle timestamps and action callbacks.",
"props": [
{
"name": "labels",
"type": "{ draft?: string; description?: string; }",
"required": false,
"default": null,
"description": "Localized draft label and supporting context.",
"properties": [
{
"name": "draft",
"type": "string",
"required": false,
"default": "'Work in progress'"
},
{
"name": "description",
"type": "string",
"required": false,
"default": "'A private preview, not the finished thing.'"
}
]
},
{
"name": "theme",
"type": "'light' | 'dark'",
"required": false,
"default": null,
"description": "Explicit theme; omitted follows the system preference."
},
{
"name": "className",
"type": "string",
"required": false,
"default": "''",
"description": "Additional wrapper classes."
}
],
"defaults": {
"className": "''",
"labels.draft": "'Work in progress'",
"labels.description": "'A private preview, not the finished thing.'"
},
"slots": [],
"a11y": "Native controls, visible focus, localized labels; lifecycle messages use polite announcements. No modal dialog is created.",
"unsupportedProps": [
"onSuccess",
"password",
"correctCode",
"attempts",
"maxAttempts",
"onUnlock"
],
"examples": {
"minimal": "'use client';\nimport { useState } from 'react';\nimport { PreviewRibbon } from '@/components/knock/preview-ribbon';\n\nexport default function Example() {\n const [value, setValue] = useState('');\n const [unlocked, setUnlocked] = useState(false);\n const [message, setMessage] = useState('');\n return \n {/* Demo consumer state only. Integrate your authorization outside this UI. */}\n \n
{message}
\n ;\n}\n",
"full": "'use client';\nimport { useState } from 'react';\nimport { PreviewRibbon } from '@/components/knock/preview-ribbon';\n\nexport default function Example() {\n const [value, setValue] = useState('');\n const [unlocked, setUnlocked] = useState(false);\n const [message, setMessage] = useState('');\n return \n {/* Demo consumer state only. Integrate your authorization outside this UI. */}\n \n