61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T8a1f,'use client' import * as React from 'react' import { useTheme } from 'next-themes' import { Check, Copy, Download, Monitor, Moon, Palette, Pipette, RotateCcw, Shuffle, Sun, type LucideIcon, } from 'lucide-react' import { Button } from '@/components/ui/button' import { Slider } from '@/components/ui/slider' import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet' type Mode = 'light' | 'dark' | 'system' type PresetKey = | 'neutral' | 'zinc' | 'slate' | 'stone' | 'rose' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'custom' type ThemeKey = | 'newyear' | 'sunset' | 'cyberpunk' | 'forest' | 'ocean' | 'pastel' | 'mono' | 'brutalist' | 'notebook' | 'caffeine' | 'midnight' | 'mocha' | 'retro' | 'tangerine' | 'quartz' | 'cosmic' | 'sage' | 'marble' | 'ember' | 'amethyst' | 'rainfall' | 'peach' | 'tropical' | 'vintage' type FontKey = 'sans' | 'serif' | 'mono' type TintKey = 'pure' | 'cool' | 'warm' interface Preset { key: PresetKey label: string swatch: string light: { primary: string; primaryForeground: string; ring: string } dark: { primary: string; primaryForeground: string; ring: string } } function mkPreset(key: PresetKey, label: string, hue: number, l = 0.6, c = 0.2, fg = 'oklch(0.985 0 0)'): Preset { const swatch = `oklch(${l} ${c} ${hue})` return { key, label, swatch, light: { primary: swatch, primaryForeground: fg, ring: swatch }, dark: { primary: swatch, primaryForeground: fg, ring: swatch }, } } const PRESETS: Preset[] = [ // Greyscale family { key: 'neutral', label: 'Neutral', swatch: 'oklch(0.205 0 0)', light: { primary: 'oklch(0.205 0 0)', primaryForeground: 'oklch(0.985 0 0)', ring: 'oklch(0.708 0 0)' }, dark: { primary: 'oklch(0.922 0 0)', primaryForeground: 'oklch(0.205 0 0)', ring: 'oklch(0.556 0 0)' }, }, { key: 'zinc', label: 'Zinc', swatch: 'oklch(0.21 0.006 285.885)', light: { primary: 'oklch(0.21 0.006 285.885)', primaryForeground: 'oklch(0.985 0 0)', ring: 'oklch(0.705 0.015 286.067)', }, dark: { primary: 'oklch(0.92 0.004 286.32)', primaryForeground: 'oklch(0.21 0.006 285.885)', ring: 'oklch(0.552 0.016 285.938)', }, }, { key: 'slate', label: 'Slate', swatch: 'oklch(0.21 0.034 264.665)', light: { primary: 'oklch(0.21 0.034 264.665)', primaryForeground: 'oklch(0.985 0 0)', ring: 'oklch(0.554 0.046 257.417)', }, dark: { primary: 'oklch(0.929 0.013 255.508)', primaryForeground: 'oklch(0.21 0.034 264.665)', ring: 'oklch(0.554 0.046 257.417)', }, }, { key: 'stone', label: 'Stone', swatch: 'oklch(0.216 0.006 56.043)', light: { primary: 'oklch(0.216 0.006 56.043)', primaryForeground: 'oklch(0.985 0.001 106.423)', ring: 'oklch(0.553 0.013 58.071)', }, dark: { primary: 'oklch(0.923 0.003 48.717)', primaryForeground: 'oklch(0.216 0.006 56.043)', ring: 'oklch(0.553 0.013 58.071)', }, }, // Warm mkPreset('rose', 'Rose', 16.439, 0.645, 0.246), mkPreset('red', 'Red', 27.325, 0.637, 0.237), mkPreset('orange', 'Orange', 47.604, 0.705, 0.213), mkPreset('amber', 'Amber', 70.08, 0.769, 0.188), mkPreset('yellow', 'Yellow', 95.277, 0.795, 0.184, 'oklch(0.286 0.066 53.813)'), // Greens mkPreset('lime', 'Lime', 130.85, 0.768, 0.233, 'oklch(0.274 0.072 132.109)'), mkPreset('emerald', 'Emerald', 162.48, 0.696, 0.17), mkPreset('teal', 'Teal', 184.704, 0.704, 0.14, 'oklch(0.984 0.014 180.72)'), // Cool mkPreset('cyan', 'Cyan', 221.723, 0.715, 0.143, 'oklch(0.302 0.056 229.695)'), mkPreset('sky', 'Sky', 235.711, 0.685, 0.169), mkPreset('blue', 'Blue', 264.376, 0.546, 0.245), mkPreset('indigo', 'Indigo', 277.117, 0.511, 0.262), // Purples mkPreset('violet', 'Violet', 293.009, 0.541, 0.281), mkPreset('purple', 'Purple', 303.9, 0.558, 0.288), mkPreset('fuchsia', 'Fuchsia', 322.16, 0.667, 0.295), mkPreset('pink', 'Pink', 354.308, 0.656, 0.241), ] type CategoryKey = 'featured' | 'editorial' | 'bold' | 'cool' | 'soft' interface ThemePreset { key: ThemeKey label: string category: CategoryKey mode: Mode color: PresetKey tint: TintKey font: FontKey radius: number } const CATEGORY_LABELS: Record = { featured: 'Featured', editorial: 'Editorial', bold: 'Bold', cool: 'Cool', soft: 'Soft', } const THEMES: ThemePreset[] = [ { key: 'newyear', label: 'New Year', category: 'featured', mode: 'dark', color: 'amber', tint: 'warm', font: 'serif', radius: 0.75, }, { key: 'sunset', label: 'Sunset', category: 'featured', mode: 'light', color: 'orange', tint: 'warm', font: 'sans', radius: 0.625, }, { key: 'cyberpunk', label: 'Cyberpunk', category: 'featured', mode: 'dark', color: 'fuchsia', tint: 'cool', font: 'mono', radius: 0.125, }, { key: 'forest', label: 'Forest', category: 'featured', mode: 'light', color: 'emerald', tint: 'warm', font: 'serif', radius: 0.5, }, { key: 'ocean', label: 'Ocean', category: 'featured', mode: 'dark', color: 'cyan', tint: 'cool', font: 'sans', radius: 0.5, }, { key: 'pastel', label: 'Pastel', category: 'featured', mode: 'light', color: 'rose', tint: 'pure', font: 'sans', radius: 0.875, }, { key: 'mono', label: 'Mono', category: 'editorial', mode: 'light', color: 'neutral', tint: 'pure', font: 'mono', radius: 0, }, { key: 'brutalist', label: 'Brutalist', category: 'editorial', mode: 'light', color: 'neutral', tint: 'pure', font: 'mono', radius: 0, }, { key: 'notebook', label: 'Notebook', category: 'editorial', mode: 'light', color: 'stone', tint: 'warm', font: 'serif', radius: 0.25, }, { key: 'vintage', label: 'Vintage', category: 'editorial', mode: 'light', color: 'amber', tint: 'warm', font: 'serif', radius: 0.375, }, { key: 'caffeine', label: 'Caffeine', category: 'editorial', mode: 'light', color: 'orange', tint: 'warm', font: 'serif', radius: 0.5, }, { key: 'marble', label: 'Marble', category: 'editorial', mode: 'light', color: 'stone', tint: 'pure', font: 'serif', radius: 0.25, }, { key: 'retro', label: 'Retro', category: 'bold', mode: 'dark', color: 'lime', tint: 'cool', font: 'mono', radius: 0, }, { key: 'tangerine', label: 'Tangerine', category: 'bold', mode: 'light', color: 'orange', tint: 'pure', font: 'sans', radius: 0.75, }, { key: 'ember', label: 'Ember', category: 'bold', mode: 'dark', color: 'red', tint: 'warm', font: 'sans', radius: 0.375, }, { key: 'tropical', label: 'Tropical', category: 'bold', mode: 'light', color: 'teal', tint: 'cool', font: 'sans', radius: 0.625, }, { key: 'midnight', label: 'Midnight', category: 'cool', mode: 'dark', color: 'indigo', tint: 'cool', font: 'sans', radius: 0.5, }, { key: 'cosmic', label: 'Cosmic', category: 'cool', mode: 'dark', color: 'violet', tint: 'cool', font: 'sans', radius: 0.625, }, { key: 'rainfall', label: 'Rainfall', category: 'cool', mode: 'dark', color: 'sky', tint: 'cool', font: 'sans', radius: 0.5, }, { key: 'amethyst', label: 'Amethyst', category: 'cool', mode: 'dark', color: 'purple', tint: 'cool', font: 'sans', radius: 0.625, }, { key: 'sage', label: 'Sage', category: 'soft', mode: 'light', color: 'emerald', tint: 'warm', font: 'serif', radius: 0.75, }, { key: 'peach', label: 'Peach', category: 'soft', mode: 'light', color: 'amber', tint: 'warm', font: 'sans', radius: 0.875, }, { key: 'quartz', label: 'Quartz', category: 'soft', mode: 'light', color: 'violet', tint: 'cool', font: 'sans', radius: 0.875, }, { key: 'mocha', label: 'Mocha', category: 'soft', mode: 'light', color: 'rose', tint: 'warm', font: 'serif', radius: 0.5, }, ] const FONTS: { key: FontKey; label: string; stack: string }[] = [ { key: 'sans', label: 'Sans', stack: '"DM Sans", ui-sans-serif, system-ui, sans-serif' }, { key: 'serif', label: 'Serif', stack: '"Source Serif Pro", ui-serif, Georgia, serif' }, { key: 'mono', label: 'Mono', stack: '"JetBrains Mono", ui-monospace, monospace' }, ] const TINTS: { key: TintKey; label: string; light: string; dark: string }[] = [ { key: 'pure', label: 'Pure', light: 'oklch(1 0 0)', dark: 'oklch(0.145 0 0)' }, { key: 'cool', label: 'Cool', light: 'oklch(0.99 0.005 240)', dark: 'oklch(0.16 0.008 250)' }, { key: 'warm', label: 'Warm', light: 'oklch(0.99 0.005 70)', dark: 'oklch(0.16 0.008 60)' }, ] const STORAGE_KEY = 'uipkge-theme-customize' const modes: { value: Mode; label: string; icon: LucideIcon }[] = [ { value: 'light', label: 'Light', icon: Sun }, { value: 'dark', label: 'Dark', icon: Moon }, { value: 'system', label: 'System', icon: Monitor }, ] function isDarkActive(): boolean { if (typeof window === 'undefined') return false return document.documentElement.classList.contains('dark') } export function ThemeCustomize() { const { theme, setTheme } = useTheme() const mode = (theme as Mode) ?? 'system' const [preset, setPreset] = React.useState('neutral') const [customColor, setCustomColor] = React.useState('#ec4899') const [font, setFont] = React.useState('sans') const [tint, setTint] = React.useState('pure') const [radius, setRadius] = React.useState(0.3) const [copied, setCopied] = React.useState(false) const [exported, setExported] = React.useState(false) const [themeSearch, setThemeSearch] = React.useState('') const [sheetOpen, setSheetOpen] = React.useState(false) const activeTheme = React.useMemo(() => { // Radius isn't part of the preset signature any more (it stays // user-controlled), so the match only checks the four token axes. return THEMES.find((t) => t.mode === mode && t.color === preset && t.tint === tint && t.font === font) ?? null }, [mode, preset, tint, font]) const filteredThemes = React.useMemo(() => { const q = themeSearch.trim().toLowerCase() if (!q) return THEMES return THEMES.filter((t) => t.label.toLowerCase().includes(q) || t.key.includes(q)) }, [themeSearch]) const themesByCategory = React.useMemo<{ key: CategoryKey; label: string; items: ThemePreset[] }[]>(() => { const order: CategoryKey[] = ['featured', 'editorial', 'bold', 'cool', 'soft'] return order .map((c) => ({ key: c, label: CATEGORY_LABELS[c], items: filteredThemes.filter((t) => t.category === c), })) .filter((g) => g.items.length > 0) }, [filteredThemes]) const applyPreset = React.useCallback( (key: PresetKey) => { if (typeof window === 'undefined') return const root = document.documentElement if (key === 'custom') { root.style.setProperty('--primary', customColor) root.style.setProperty('--primary-foreground', isDarkActive() ? 'oklch(0.985 0 0)' : 'oklch(0.985 0 0)') root.style.setProperty('--ring', customColor) return } const found = PRESETS.find((p) => p.key === key) if (!found) return const tokens = isDarkActive() ? found.dark : found.light root.style.setProperty('--primary', tokens.primary) root.style.setProperty('--primary-foreground', tokens.primaryForeground) root.style.setProperty('--ring', tokens.ring) }, [customColor], ) function applyTint(key: TintKey) { if (typeof window === 'undefined') return const t = TINTS.find((x) => x.key === key) if (!t) return document.documentElement.style.setProperty('--background', isDarkActive() ? t.dark : t.light) } function applyFont(key: FontKey) { if (typeof window === 'undefined') return const f = FONTS.find((x) => x.key === key) if (!f) return document.documentElement.style.setProperty('--font-sans', f.stack) } function applyRadius(rem: number) { if (typeof window === 'undefined') return document.documentElement.style.setProperty('--radius', `${rem}rem`) } const save = React.useCallback(() => { try { localStorage.setItem(STORAGE_KEY, JSON.stringify({ preset, customColor, font, tint, radius })) } catch { // ignore } }, [preset, customColor, font, tint, radius]) function applyTheme(t: ThemePreset) { // Themes drive mode / color / tint / font. Radius is treated as a // user-controlled value (default 0.3) and is not changed by presets. setTheme(t.mode) setPreset(t.color) setTint(t.tint) setFont(t.font) } function applyRandomTheme() { const candidates = THEMES.filter((t) => t.key !== activeTheme?.key) const pick = candidates[Math.floor(Math.random() * candidates.length)] if (pick) applyTheme(pick) } function reset() { setPreset('neutral') setCustomColor('#ec4899') setFont('sans') setTint('pure') setRadius(0.3) const root = document.documentElement ;['--primary', '--primary-foreground', '--ring', '--background', '--font-sans', '--radius'].forEach((p) => root.style.removeProperty(p), ) try { localStorage.removeItem(STORAGE_KEY) } catch { // ignore } } function buildCss(): string { const found = PRESETS.find((p) => p.key === preset) ?? PRESETS[0] const isCustom = preset === 'custom' const tokens = isDarkActive() ? found.dark : found.light const t = TINTS.find((x) => x.key === tint) ?? TINTS[0] const f = FONTS.find((x) => x.key === font) ?? FONTS[0] const primary = isCustom ? customColor : tokens.primary const primaryFg = isCustom ? 'oklch(0.985 0 0)' : tokens.primaryForeground const ring = isCustom ? customColor : tokens.ring return `:root { --background: ${isDarkActive() ? t.dark : t.light}; --primary: ${primary}; --primary-foreground: ${primaryFg}; --ring: ${ring}; --radius: ${radius}rem; --font-sans: ${f.stack}; }` } async function copyCss() { try { await navigator.clipboard.writeText(buildCss()) setCopied(true) setTimeout(() => setCopied(false), 1600) } catch { // ignore } } function exportJson() { const blob = new Blob([JSON.stringify({ preset, customColor, font, tint, radius, css: buildCss() }, null, 2)], { type: 'application/json', }) const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = 'theme.json' a.click() URL.revokeObjectURL(url) setExported(true) setTimeout(() => setExported(false), 1600) } // Smoothly fade color changes on the whole document. Toggled briefly // during apply* so users don't see a hard snap between themes. function pulseTransition() { if (typeof document === 'undefined') return const root = document.documentElement root.style.transition = 'background-color 240ms ease, color 240ms ease' window.setTimeout(() => { root.style.transition = '' }, 300) } // Load persisted state + apply on mount; wire the Cmd/Ctrl+J shortcut. React.useEffect(() => { try { const raw = localStorage.getItem(STORAGE_KEY) if (raw) { const parsed = JSON.parse(raw) if (parsed.preset) setPreset(parsed.preset) if (parsed.customColor) setCustomColor(parsed.customColor) if (parsed.font) setFont(parsed.font) if (parsed.tint) setTint(parsed.tint) if (typeof parsed.radius === 'number') setRadius(parsed.radius) } } catch { // ignore } function onKeydown(e: KeyboardEvent) { // Cmd/Ctrl + J -> toggle the customizer if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'j') { e.preventDefault() setSheetOpen((v) => !v) } } if (typeof window !== 'undefined') window.addEventListener('keydown', onKeydown) return () => { if (typeof window !== 'undefined') window.removeEventListener('keydown', onKeydown) } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) // watch([preset, customColor]) -> applyPreset + save React.useEffect(() => { applyPreset(preset) save() // eslint-disable-next-line react-hooks/exhaustive-deps }, [preset, customColor]) // watch(font) -> applyFont + save React.useEffect(() => { applyFont(font) save() // eslint-disable-next-line react-hooks/exhaustive-deps }, [font]) // watch(tint) -> applyTint + save React.useEffect(() => { applyTint(tint) save() // eslint-disable-next-line react-hooks/exhaustive-deps }, [tint]) // watch(radius) -> applyRadius + save React.useEffect(() => { applyRadius(radius) save() // eslint-disable-next-line react-hooks/exhaustive-deps }, [radius]) // watch(theme) -> re-apply preset + tint on next tick React.useEffect(() => { setTimeout(() => { applyPreset(preset) applyTint(tint) }, 0) // eslint-disable-next-line react-hooks/exhaustive-deps }, [theme]) // watch([preset, customColor, font, tint, radius, theme]) -> pulseTransition React.useEffect(() => { pulseTransition() // eslint-disable-next-line react-hooks/exhaustive-deps }, [preset, customColor, font, tint, radius, theme]) return (

{' '} Customize{' '} {/* Active theme chip */} {activeTheme ? ( p.key === activeTheme.color)?.swatch }} /> {activeTheme.label} ) : ( Custom )}

Live-edit tokens. Changes write to :root and persist locally. {/* Quick actions */}

{/* Curated themes */}

Themes {filteredThemes.length} {themeSearch && / {THEMES.length}} presets

{/* Search */}

setThemeSearch(e.target.value)} type="search" placeholder="Search themes..." className="border-input bg-background focus-visible:ring-ring h-8 w-full rounded-md border pr-2 pl-7 text-xs outline-none focus-visible:ring-2" />

{/* Categorized groups */}

{themesByCategory.map((group) => (

{group.label}

{group.items.map((t) => ( ))}

))} {filteredThemes.length === 0 && (

No themes match "{themeSearch}"

)}

{/* Mode */}

Mode

{modes.map((m) => { const Icon = m.icon return ( ) })}

{/* Color */}

Color {PRESETS.length} options

{PRESETS.map((p) => ( ))} {/* Custom color slot */} { setCustomColor(e.target.value) setPreset('custom') }} /> {preset !== 'custom' ? ( ) : ( )}

{/* Surface tint */}

Surface

{TINTS.map((t) => ( ))}

{/* Font */}

Font

{FONTS.map((f) => ( ))}

{/* Radius */}

Radius {radius.toFixed(2)}rem

setRadius(v)} />

0 0.5 1

{/* Live preview */}

Preview

Badge

Input sample

The quick brown fox jumps over the lazy dog.

{/* Footer actions (sticky bottom) */}

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","next-themes",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next-themes","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"next-themes"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/slider.json","https://uipkge.dev/r/react/sheet.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/theme-customize/ThemeCustomize.tsx","content":"$63","type":"registry:page","target":"~/components/blocks/ThemeCustomize.tsx"},{"path":"packages/registry-react/blocks/theme-customize/page.tsx","content":"// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/theme-customize.json`.\n// Visit /theme-customize-demo after install.\nimport { ThemeCustomize } from '@/components/blocks/ThemeCustomize'\n\nexport default function Page() {\n return (\n

theme-customize demo

\n \n

\n )\n}\n","type":"registry:page","target":"~/app/theme-customize-demo/page.tsx"}],"className":"h-[70svh] min-h-80"}]]}]