/* For-agents page — shadcn/ui theme distribution. Lets any agent (or human) pull the Nexus ReGen brand theme into a shadcn-based project in seconds. The theme.css and registry.json live under /shadcn at the brand site root and are the single source of truth — this section fetches and surfaces them. */ /* Mapping table — drives the "Mappings" Block. Order matches the logical groups in theme.css so a human reading the table sees the same shape they'll see in the file. `why` is non-null when the choice is not obvious; the cell renders a small explainer beneath the value so an agent (or designer) can tell mapping-from-tokens apart from mapping-by-decision. */ const SHADCN_MAPPINGS = [ { group: 'Surfaces', rows: [ { v: '--background', light: 'Paper #FFFFFF', dark: 'brand-950 #03040E', why: null }, { v: '--foreground', light: 'neutral-900 #101828', dark: 'brand-50 #F1F2F9', why: null }, { v: '--card', light: 'Paper #FFFFFF', dark: 'brand-900 #06081C', why: 'Cards lift one step out of the canvas — paper on white, brand-900 on brand-950.' }, { v: '--popover', light: 'Paper #FFFFFF', dark: 'brand-900 #06081C', why: null }, ]}, { group: 'Brand', rows: [ { v: '--primary', light: 'brand-600 #121541', dark: 'brand-200 #B4B7D4', why: 'Penn Blue is the primary on light. On dark we step up to brand-200 so the button reads as a confident lighter shape.' }, { v: '--primary-foreground', light: 'neutral-25 #FCFCFD', dark: 'brand-700 #0E1034', why: 'Inverts with --primary so contrast stays AA in both modes.' }, { v: '--accent', light: 'accent-50 #FEF8B8', dark: 'accent-400 #F7EC33', why: 'Pure aureolin fails contrast on light surfaces, so the accent surface uses the soft accent-50 wash. Real aureolin returns on dark, where the navy canvas provides the contrast it needs.' }, { v: '--accent-foreground', light: 'brand-700 #0E1034', dark: 'brand-900 #06081C', why: null }, { v: '--ring', light: 'accent-400 #F7EC33', dark: 'accent-400 #F7EC33', why: 'Aureolin focus ring keeps accessibility high-visibility AND on-brand, distinct from the destructive red.' }, ]}, { group: 'Status', rows: [ { v: '--destructive', light: 'signal-red #FF331F', dark: 'signal-red #FF331F', why: 'Single value across modes — the brand\'s designated alert red.' }, ]}, { group: 'Low-emphasis', rows: [ { v: '--secondary', light: 'neutral-100 #F2F4F7', dark: 'brand-800 #0A0C28', why: null }, { v: '--muted', light: 'neutral-100 #F2F4F7', dark: 'brand-800 #0A0C28', why: null }, { v: '--muted-foreground', light: 'neutral-600 #475467', dark: 'brand-200 #B4B7D4', why: 'Sits AA on the muted surface — verified manually, not just stepped.' }, ]}, { group: 'Borders / inputs', rows: [ { v: '--border', light: 'neutral-200 #EAECF0', dark: 'brand-700 #0E1034', why: null }, { v: '--input', light: 'neutral-200 #EAECF0', dark: 'brand-700 #0E1034', why: null }, ]}, { group: 'Charts', rows: [ { v: '--chart-1', light: 'brand-600 #121541', dark: 'brand-200 #B4B7D4', why: 'Brand series is always the headline; lifted on dark.' }, { v: '--chart-2', light: 'accent-400 #F7EC33', dark: 'accent-400 #F7EC33', why: null }, { v: '--chart-3', light: 'dodger-blue #1E96FC', dark: 'dodger-blue #1E96FC', why: null }, { v: '--chart-4', light: 'success-500 #17B26A', dark: 'success-500 #17B26A', why: null }, { v: '--chart-5', light: 'warning-500 #F79009', dark: 'warning-500 #F79009', why: null }, ]}, { group: 'Sidebar (app shell)', rows: [ { v: '--sidebar', light: 'brand-600 #121541', dark: 'brand-900 #06081C', why: 'Canonical Nexus chrome — navy chrome with paper text. Use as-is for product navigation.' }, { v: '--sidebar-foreground', light: 'brand-100 #DDDFE9', dark: 'brand-100 #DDDFE9', why: null }, { v: '--sidebar-primary', light: 'accent-400 #F7EC33', dark: 'accent-400 #F7EC33', why: 'Active nav item glows aureolin — matches the marketing site.' }, ]}, { group: 'Radius', rows: [ { v: '--radius', light: '0.5rem (8px)', dark: '0.5rem (8px)', why: 'Matches `--r-lg` — the default Card / Button / Input radius across the design system.' }, ]}, ]; /* Single mapping row with three copy targets: the variable name, the light value and the dark value. Hover-reveal the copy buttons so the table reads cleanly when scanning. */ function ShadcnMappingRow({ v, light, dark, why }) { const [copied, setCopied] = useState(null); const onCopy = (text, key) => { copy(text); setCopied(key); setTimeout(() => setCopied(null), 1100); }; const cell = (label, key, mono = false) => ( ); return (
{cell(v, `${v}:name`, true)} {why && (
{why}
)}
{cell(light, `${v}:light`)} {cell(dark, `${v}:dark`)}
); } function S_Shadcn() { const [themeCss, setThemeCss] = useState(null); const [loadError, setLoadError] = useState(false); const [copied, setCopied] = useState(false); useEffect(() => { let cancelled = false; fetch('/shadcn/theme.css', { cache: 'no-store' }) .then(r => r.ok ? r.text() : Promise.reject(new Error('not ok'))) .then(t => { if (!cancelled) setThemeCss(t); }) .catch(() => { if (!cancelled) setLoadError(true); }); return () => { cancelled = true; }; }, []); const onCopyTheme = () => { if (!themeCss) return; copy(themeCss); setCopied(true); setTimeout(() => setCopied(false), 1400); }; const stats = useMemo(() => { if (!themeCss) return null; return `${themeCss.split('\n').length} lines · ${themeCss.length.toLocaleString()} chars`; }, [themeCss]); /* Stable canonical URL agents will paste into install commands. Hardcoded to the production host so copy-paste from the page always points at brand.nexusregen.com regardless of env. */ const REGISTRY_URL = 'https://brand.nexusregen.com/shadcn/registry.json'; const manualInstall = `/* app/globals.css — replace your :root and .dark blocks with the ones from https://brand.nexusregen.com/shadcn/theme.css. Or, simpler, paste the whole file in. */ @import "tailwindcss"; @import "tw-animate-css"; @import url("https://brand.nexusregen.com/shadcn/theme.css"); /* …rest of your @theme inline { … } block stays as shadcn shipped it. */`; const registryInstall = `# One command — adds Nexus ReGen brand variables to your shadcn project npx shadcn@latest add ${REGISTRY_URL} # That's it. Light + dark CSS variables are written into # app/globals.css; toggle .dark on to switch.`; return (

shadcn/ui ships components by copy-paste, not by package; the theme is just CSS variables on :root and .dark in your app/globals.css. Components consume them through Tailwind via an @theme inline block (e.g. --color-primary: var(--primary)), which means swapping a theme is a single CSS change — no rebuild of components.

In mid-2025 shadcn switched colour values from raw HSL triples to oklch() for perceptually-uniform light/dark interpolation. The full surface area is ~30 variables: background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, chart-1…5, sidebar (8 tokens) and radius. Themes can now be distributed as registry items — type: "registry:theme" with a cssVars { ' ' }block — and installed via npx shadcn add <url>. That's the path we ship below.

CANONICAL · REGISTRY:THEME
brand.nexusregen.com/shadcn/theme.css
{loadError ? 'Couldn\'t load the live file. Try the View raw link.' : (stats || 'Loading…')}
View raw ↗ Download ↓
RECOMMENDED

Registry — one command

The shadcn CLI pulls our registry.json, merges the CSS variables into your existing globals.css, and you're done. Works on any shadcn project (Next.js, Remix, Vite, Astro).

{registryInstall}
FALLBACK

Manual — paste theme.css

For projects that don't use the shadcn CLI, or when you want to vendor the theme. Paste the file into your app/globals.css — or import it remotely as below.

{manualInstall}
{/* Header row */}
Variable
Light
Dark
{SHADCN_MAPPINGS.map(group => (
{group.group}
{group.rows.map(row => ( ))}
))} 
{themeCss || 'Loading…'}
); } window.S_Shadcn = S_Shadcn;