{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "error-404-page-section", "title": "404 Page Section", "description": "A centered \"page not found\" section: a big glitching error code, heading, description and one or two pill buttons. Follows the host site's theme by default (or a fixed dark / light palette with an optional theme toggle) and scales with its own width.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/new-york/error-404-page-section/error-404-page-section.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { MotionConfig, motion } from \"motion/react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nfunction cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport type Error404Theme = \"auto\" | \"dark\" | \"light\";\n\nexport interface Error404PageSectionProps extends Omit, \"children\"> {\n code?: string;\n heading?: string;\n description?: string;\n buttonLabel?: string;\n buttonHref?: string;\n /** Optional second, outlined button (e.g. \"Browse components\"). */\n secondaryLabel?: string;\n secondaryHref?: string;\n glitch?: boolean;\n /** \"auto\" follows the host site's --background / --foreground tokens; \"dark\" / \"light\" use a fixed palette. */\n theme?: Error404Theme;\n /** Small dark/light switch in the corner. Only shown with a fixed palette (not with theme=\"auto\"). */\n showThemeToggle?: boolean;\n /** Desktop sizes in px. Everything scales down with the section's own width. */\n codeSize?: number;\n headingSize?: number;\n descriptionSize?: number;\n}\n\ninterface Palette {\n bg: string;\n code: string;\n title: string;\n description: string;\n buttonBg: string;\n buttonText: string;\n outline: string;\n toggleBg: string;\n toggleBorder: string;\n focus: string;\n}\n\nconst PALETTES: Record = {\n dark: {\n bg: \"#0a0a0a\",\n code: \"rgba(180,180,180,0.72)\",\n title: \"#ffffff\",\n description: \"rgba(255,255,255,0.55)\",\n buttonBg: \"#ffffff\",\n buttonText: \"#111111\",\n outline: \"rgba(255,255,255,0.22)\",\n toggleBg: \"rgba(255,255,255,0.08)\",\n toggleBorder: \"rgba(255,255,255,0.12)\",\n focus: \"rgba(255,255,255,0.35)\",\n },\n light: {\n bg: \"#ffffff\",\n code: \"rgba(40,40,40,0.55)\",\n title: \"#111111\",\n description: \"rgba(0,0,0,0.6)\",\n buttonBg: \"#111111\",\n buttonText: \"#ffffff\",\n outline: \"rgba(0,0,0,0.2)\",\n toggleBg: \"rgba(0,0,0,0.04)\",\n toggleBorder: \"rgba(0,0,0,0.08)\",\n focus: \"rgba(0,0,0,0.28)\",\n },\n // Reads the host site's shadcn-style tokens, so it follows the site theme by itself.\n auto: {\n bg: \"var(--background, #0a0a0a)\",\n code: \"color-mix(in srgb, var(--foreground, #ffffff) 55%, transparent)\",\n title: \"var(--foreground, #ffffff)\",\n description: \"var(--muted-foreground, rgba(255,255,255,0.55))\",\n buttonBg: \"var(--foreground, #ffffff)\",\n buttonText: \"var(--background, #0a0a0a)\",\n outline: \"color-mix(in srgb, var(--foreground, #ffffff) 22%, transparent)\",\n toggleBg: \"color-mix(in srgb, var(--foreground, #ffffff) 6%, transparent)\",\n toggleBorder: \"var(--border, rgba(255,255,255,0.12))\",\n focus: \"color-mix(in srgb, var(--foreground, #ffffff) 35%, transparent)\",\n },\n};\n\nexport function Error404PageSection({\n code = \"404\",\n heading = \"Page not found\",\n description = \"The page you're looking for doesn't exist or may have been moved.\",\n buttonLabel = \"Back to Home\",\n buttonHref = \"/\",\n secondaryLabel,\n secondaryHref = \"#\",\n glitch = true,\n theme = \"auto\",\n showThemeToggle = false,\n codeSize = 168,\n headingSize = 36,\n descriptionSize = 15,\n className,\n style,\n ...props\n}: Error404PageSectionProps) {\n // The toggle overrides the theme prop until the prop itself changes.\n const [state, setState] = React.useState<{ base: Error404Theme; picked: \"dark\" | \"light\" | null }>({ base: theme, picked: null });\n if (state.base !== theme) setState({ base: theme, picked: null });\n const active: Error404Theme = state.picked ?? theme;\n const palette = PALETTES[active];\n const isDark = active === \"dark\";\n const canToggle = showThemeToggle && active !== \"auto\";\n\n const scope = React.useId().replace(/[^a-zA-Z0-9]/g, \"\");\n const headingId = `e404-heading-${scope}`;\n\n // Everything sizes against the section's own width (container query units), so it also works\n // inside narrow previews and columns, not just on narrow viewports.\n const codeFontSize = `min(${codeSize}px, 36cqw)`;\n const headingFontSize = `clamp(24px, 7.5cqw, ${headingSize}px)`;\n const descriptionFontSize = `clamp(14px, 4cqw, ${descriptionSize}px)`;\n const padding = \"clamp(48px, 10cqw, 72px) clamp(20px, 5cqw, 40px)\";\n\n return (\n \n \n {canToggle && (\n setState({ base: theme, picked: isDark ? \"light\" : \"dark\" })}\n aria-label={isDark ? \"Switch to light mode\" : \"Switch to dark mode\"}\n className=\"absolute top-4 left-4 z-50 flex size-10 cursor-pointer items-center justify-center rounded-xl p-0 outline-none focus-visible:outline-2 focus-visible:outline-offset-2\"\n style={{ background: palette.toggleBg, border: `1px solid ${palette.toggleBorder}`, color: palette.title, outlineColor: palette.focus }}\n >\n {isDark ? (\n \n \n \n \n ) : (\n \n \n \n )}\n \n )}\n\n
\n
\n
\n \n {code}\n {glitch && (\n <>\n \n {code}\n \n \n {code}\n \n \n )}\n \n
\n\n

\n {heading}\n

\n\n {description ? (\n

\n {description}\n

\n ) : null}\n\n {(buttonLabel || secondaryLabel) && (\n
\n {buttonLabel ? (\n \n {buttonLabel}\n \n ) : null}\n {secondaryLabel ? (\n \n {secondaryLabel}\n \n ) : null}\n
\n )}\n
\n
\n\n \n \n \n );\n}\n", "type": "registry:component" } ], "type": "registry:component" }