{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "strict", "homepage": "https://strictthemes.com", "items": [ { "name": "strict-one", "type": "registry:theme", "title": "Strict One", "description": "A disciplined, Swiss-grid editorial theme. One accent, hard edges, no decoration.", "cssVars": { "theme": { "text-display": "56px", "text-display--line-height": "1.05", "text-display--font-weight": "700", "text-display--letter-spacing": "-0.02em", "text-h1": "36px", "text-h1--line-height": "1.15", "text-h1--font-weight": "700", "text-h1--letter-spacing": "-0.01em", "text-h2": "24px", "text-h2--line-height": "1.25", "text-h2--font-weight": "600", "text-body": "16px", "text-body--line-height": "1.6", "text-body--font-weight": "400", "text-label": "12px", "text-label--line-height": "1.3", "text-label--font-weight": "500", "text-label--letter-spacing": "0.08em", "radius-sm": "2px", "radius-md": "4px", "color-tertiary": "var(--tertiary)", "color-tertiary-foreground": "var(--tertiary-foreground)" }, "light": { "background": "#FFFFFF", "foreground": "#111111", "card": "#F5F5F4", "card-foreground": "#111111", "popover": "#F5F5F4", "popover-foreground": "#111111", "primary": "#1F3BFF", "primary-foreground": "#FFFFFF", "secondary": "#111111", "secondary-foreground": "#FFFFFF", "muted": "#f3f3f3", "muted-foreground": "#6B6B6B", "accent": "#e3e3e2", "accent-foreground": "#111111", "destructive": "#C62828", "border": "#E2E2E0", "input": "#E2E2E0", "ring": "#1F3BFF", "chart-1": "#a9c3ff", "chart-2": "#7aa0ff", "chart-3": "#517eff", "chart-4": "#2b54ff", "chart-5": "#1f3bff", "sidebar": "#F5F5F4", "sidebar-foreground": "#111111", "sidebar-primary": "#1F3BFF", "sidebar-primary-foreground": "#FFFFFF", "sidebar-accent": "#e3e3e2", "sidebar-accent-foreground": "#111111", "sidebar-border": "#E2E2E0", "sidebar-ring": "#1F3BFF", "tertiary": "#FF4F00", "tertiary-foreground": "#111111", "radius": "4px" }, "dark": { "background": "#0B0B0C", "foreground": "#F5F5F4", "card": "#161618", "card-foreground": "#F5F5F4", "popover": "#161618", "popover-foreground": "#F5F5F4", "primary": "#8091FF", "primary-foreground": "#0B0B0C", "secondary": "#F5F5F4", "secondary-foreground": "#111111", "muted": "#171718", "muted-foreground": "#A3A3A0", "accent": "#28282a", "accent-foreground": "#F5F5F4", "destructive": "#FF6B5E", "border": "#2A2A2E", "input": "#2A2A2E", "ring": "#8091FF", "chart-1": "#b2c0ff", "chart-2": "#8091ff", "chart-3": "#6c7bf3", "chart-4": "#545ed4", "chart-5": "#4148b2", "sidebar": "#161618", "sidebar-foreground": "#F5F5F4", "sidebar-primary": "#8091FF", "sidebar-primary-foreground": "#0B0B0C", "sidebar-accent": "#28282a", "sidebar-accent-foreground": "#F5F5F4", "sidebar-border": "#2A2A2E", "sidebar-ring": "#8091FF", "tertiary": "#FF4F00", "tertiary-foreground": "#111111" } }, "dependencies": [ "@fontsource/ibm-plex-mono" ], "css": { "@import \"@fontsource/ibm-plex-mono/500.css\"": {} }, "registryDependencies": [ "https://strictthemes.com/r/font-ibm-plex-sans-sans.json", "https://strictthemes.com/r/font-ibm-plex-mono-mono.json", "https://strictthemes.com/r/font-archivo-heading.json" ], "docs": "Strict One adds type classes: text-display, text-h1, text-h2, text-body, text-label. shadcn's cn() takes them for colors and drops them next to a text color. To fix that, set lib/utils.ts to the code below, and in components/ui import cn from that file instead of from \"cn\":\n\nimport { createCn } from \"cn/config\"\n\n// The theme's type classes are font sizes, not colors.\nexport const cn = createCn({\n extend: {\n classGroups: {\n \"font-size\": [{ text: [\"display\", \"h1\", \"h2\", \"body\", \"label\"] }],\n },\n },\n})\n\nStrict One brings its own fonts. If your global CSS still imports another font (a new shadcn project imports Geist), remove that import and its package unless you use the font elsewhere." }, { "name": "recital", "type": "registry:theme", "title": "Recital", "description": "A warm, literary theme for long reading. Paper tones, a serif voice, and one oxblood accent.", "cssVars": { "theme": { "text-display": "60px", "text-display--line-height": "1.05", "text-display--font-weight": "600", "text-display--letter-spacing": "-0.02em", "text-h1": "40px", "text-h1--line-height": "1.15", "text-h1--font-weight": "600", "text-h1--letter-spacing": "-0.01em", "text-h2": "28px", "text-h2--line-height": "1.25", "text-h2--font-weight": "500", "text-body": "18px", "text-body--line-height": "1.65", "text-body--font-weight": "400", "text-label": "13px", "text-label--line-height": "1.4", "text-label--font-weight": "500", "text-label--letter-spacing": "0.04em", "radius-sm": "3px", "radius-md": "6px", "color-tertiary": "var(--tertiary)", "color-tertiary-foreground": "var(--tertiary-foreground)" }, "light": { "background": "#FBF7F0", "foreground": "#1F1B18", "card": "#F3ECE1", "card-foreground": "#1F1B18", "popover": "#F3ECE1", "popover-foreground": "#1F1B18", "primary": "#7B2D26", "primary-foreground": "#FFF9F0", "secondary": "#2B2622", "secondary-foreground": "#FFF9F0", "muted": "#f0ece5", "muted-foreground": "#6F665E", "accent": "#e2dbd1", "accent-foreground": "#1F1B18", "destructive": "#A3261C", "border": "#DDD3C4", "input": "#DDD3C4", "ring": "#7B2D26", "chart-1": "#fdaca1", "chart-2": "#e88578", "chart-3": "#cf6458", "chart-4": "#b1493f", "chart-5": "#92352d", "sidebar": "#F3ECE1", "sidebar-foreground": "#1F1B18", "sidebar-primary": "#7B2D26", "sidebar-primary-foreground": "#FFF9F0", "sidebar-accent": "#e2dbd1", "sidebar-accent-foreground": "#1F1B18", "sidebar-border": "#DDD3C4", "sidebar-ring": "#7B2D26", "tertiary": "#B8892B", "tertiary-foreground": "#1F1B18", "radius": "6px" }, "dark": { "background": "#191614", "foreground": "#F2EADD", "card": "#231F1C", "card-foreground": "#F2EADD", "popover": "#231F1C", "popover-foreground": "#F2EADD", "primary": "#E39A7B", "primary-foreground": "#1F1410", "secondary": "#F2EADD", "secondary-foreground": "#1F1B18", "muted": "#24211e", "muted-foreground": "#A99F94", "accent": "#342f2b", "accent-foreground": "#F2EADD", "destructive": "#EF8A7E", "border": "#3A332D", "input": "#3A332D", "ring": "#E39A7B", "chart-1": "#efb59c", "chart-2": "#e39a7b", "chart-3": "#c07251", "chart-4": "#a25736", "chart-5": "#854325", "sidebar": "#231F1C", "sidebar-foreground": "#F2EADD", "sidebar-primary": "#E39A7B", "sidebar-primary-foreground": "#1F1410", "sidebar-accent": "#342f2b", "sidebar-accent-foreground": "#F2EADD", "sidebar-border": "#3A332D", "sidebar-ring": "#E39A7B", "tertiary": "#D4A94A", "tertiary-foreground": "#1F1B18" } }, "registryDependencies": [ "https://strictthemes.com/r/font-source-sans-3-sans.json", "https://strictthemes.com/r/font-source-code-pro-mono.json", "https://strictthemes.com/r/font-fraunces-heading.json" ], "docs": "Recital adds type classes: text-display, text-h1, text-h2, text-body, text-label. shadcn's cn() takes them for colors and drops them next to a text color. To fix that, set lib/utils.ts to the code below, and in components/ui import cn from that file instead of from \"cn\":\n\nimport { createCn } from \"cn/config\"\n\n// The theme's type classes are font sizes, not colors.\nexport const cn = createCn({\n extend: {\n classGroups: {\n \"font-size\": [{ text: [\"display\", \"h1\", \"h2\", \"body\", \"label\"] }],\n },\n },\n})\n\nRecital brings its own fonts. If your global CSS still imports another font (a new shadcn project imports Geist), remove that import and its package unless you use the font elsewhere." }, { "name": "avion", "type": "registry:theme", "title": "Avion", "description": "A calm, precise theme for dashboards and tools. Cool greys, clear numbers, and one teal signal.", "cssVars": { "theme": { "text-display": "52px", "text-display--line-height": "1.05", "text-display--font-weight": "800", "text-display--letter-spacing": "-0.02em", "text-h1": "34px", "text-h1--line-height": "1.15", "text-h1--font-weight": "700", "text-h1--letter-spacing": "-0.01em", "text-h2": "22px", "text-h2--line-height": "1.3", "text-h2--font-weight": "700", "text-body": "15px", "text-body--line-height": "1.55", "text-body--font-weight": "400", "text-label": "12px", "text-label--line-height": "1.3", "text-label--font-weight": "500", "text-label--letter-spacing": "0.06em", "radius-sm": "4px", "radius-md": "8px", "color-tertiary": "var(--tertiary)", "color-tertiary-foreground": "var(--tertiary-foreground)" }, "light": { "background": "#F3F6F8", "foreground": "#16242E", "card": "#FFFFFF", "card-foreground": "#16242E", "popover": "#FFFFFF", "popover-foreground": "#16242E", "primary": "#085F66", "primary-foreground": "#FFFFFF", "secondary": "#16242E", "secondary-foreground": "#FFFFFF", "muted": "#e8ecee", "muted-foreground": "#5B6B76", "accent": "#ecedee", "accent-foreground": "#16242E", "destructive": "#C2362B", "border": "#D5DDE3", "input": "#D5DDE3", "ring": "#085F66", "chart-1": "#9acfd5", "chart-2": "#6bb2b9", "chart-3": "#46979f", "chart-4": "#267c84", "chart-5": "#085f66", "sidebar": "#FFFFFF", "sidebar-foreground": "#16242E", "sidebar-primary": "#085F66", "sidebar-primary-foreground": "#FFFFFF", "sidebar-accent": "#ecedee", "sidebar-accent-foreground": "#16242E", "sidebar-border": "#D5DDE3", "sidebar-ring": "#085F66", "tertiary": "#F2A900", "tertiary-foreground": "#16242E", "radius": "8px" }, "dark": { "background": "#0C151B", "foreground": "#E7EEF2", "card": "#14212A", "card-foreground": "#E7EEF2", "popover": "#14212A", "popover-foreground": "#E7EEF2", "primary": "#3FC1CC", "primary-foreground": "#06262B", "secondary": "#E7EEF2", "secondary-foreground": "#16242E", "muted": "#172026", "muted-foreground": "#93A4AF", "accent": "#25313a", "accent-foreground": "#E7EEF2", "destructive": "#FF7A6B", "border": "#243540", "input": "#243540", "ring": "#3FC1CC", "chart-1": "#7cd5dd", "chart-2": "#3fc1cc", "chart-3": "#009ca6", "chart-4": "#007e87", "chart-5": "#00646c", "sidebar": "#14212A", "sidebar-foreground": "#E7EEF2", "sidebar-primary": "#3FC1CC", "sidebar-primary-foreground": "#06262B", "sidebar-accent": "#25313a", "sidebar-accent-foreground": "#E7EEF2", "sidebar-border": "#243540", "sidebar-ring": "#3FC1CC", "tertiary": "#F2A900", "tertiary-foreground": "#16242E" } }, "registryDependencies": [ "https://strictthemes.com/r/font-red-hat-text-sans.json", "https://strictthemes.com/r/font-red-hat-mono-mono.json", "https://strictthemes.com/r/font-red-hat-display-heading.json" ], "docs": "Avion adds type classes: text-display, text-h1, text-h2, text-body, text-label. shadcn's cn() takes them for colors and drops them next to a text color. To fix that, set lib/utils.ts to the code below, and in components/ui import cn from that file instead of from \"cn\":\n\nimport { createCn } from \"cn/config\"\n\n// The theme's type classes are font sizes, not colors.\nexport const cn = createCn({\n extend: {\n classGroups: {\n \"font-size\": [{ text: [\"display\", \"h1\", \"h2\", \"body\", \"label\"] }],\n },\n },\n})\n\nAvion brings its own fonts. If your global CSS still imports another font (a new shadcn project imports Geist), remove that import and its package unless you use the font elsewhere." }, { "name": "font-archivo-heading", "type": "registry:font", "title": "Archivo", "font": { "family": "'Archivo Variable', sans-serif", "provider": "google", "import": "Archivo", "variable": "--font-heading", "subsets": [ "latin" ], "selector": "h1, h2, h3, h4, h5, h6", "dependency": "@fontsource-variable/archivo" } }, { "name": "font-fraunces-heading", "type": "registry:font", "title": "Fraunces", "font": { "family": "'Fraunces Variable', serif", "provider": "google", "import": "Fraunces", "variable": "--font-heading", "subsets": [ "latin" ], "selector": "h1, h2, h3, h4, h5, h6", "dependency": "@fontsource-variable/fraunces" } }, { "name": "font-ibm-plex-mono-mono", "type": "registry:font", "title": "IBM Plex Mono", "font": { "family": "'IBM Plex Mono', monospace", "provider": "google", "import": "IBM_Plex_Mono", "variable": "--font-mono", "weight": [ "400", "500" ], "subsets": [ "latin" ], "selector": "code, kbd, pre, samp", "dependency": "@fontsource/ibm-plex-mono" } }, { "name": "font-ibm-plex-sans-sans", "type": "registry:font", "title": "IBM Plex Sans", "font": { "family": "'IBM Plex Sans Variable', sans-serif", "provider": "google", "import": "IBM_Plex_Sans", "variable": "--font-sans", "subsets": [ "latin" ], "selector": "html", "dependency": "@fontsource-variable/ibm-plex-sans" } }, { "name": "font-red-hat-display-heading", "type": "registry:font", "title": "Red Hat Display", "font": { "family": "'Red Hat Display Variable', sans-serif", "provider": "google", "import": "Red_Hat_Display", "variable": "--font-heading", "subsets": [ "latin" ], "selector": "h1, h2, h3, h4, h5, h6", "dependency": "@fontsource-variable/red-hat-display" } }, { "name": "font-red-hat-mono-mono", "type": "registry:font", "title": "Red Hat Mono", "font": { "family": "'Red Hat Mono Variable', monospace", "provider": "google", "import": "Red_Hat_Mono", "variable": "--font-mono", "subsets": [ "latin" ], "selector": "code, kbd, pre, samp", "dependency": "@fontsource-variable/red-hat-mono" } }, { "name": "font-red-hat-text-sans", "type": "registry:font", "title": "Red Hat Text", "font": { "family": "'Red Hat Text Variable', sans-serif", "provider": "google", "import": "Red_Hat_Text", "variable": "--font-sans", "subsets": [ "latin" ], "selector": "html", "dependency": "@fontsource-variable/red-hat-text" } }, { "name": "font-source-code-pro-mono", "type": "registry:font", "title": "Source Code Pro", "font": { "family": "'Source Code Pro Variable', monospace", "provider": "google", "import": "Source_Code_Pro", "variable": "--font-mono", "subsets": [ "latin" ], "selector": "code, kbd, pre, samp", "dependency": "@fontsource-variable/source-code-pro" } }, { "name": "font-source-sans-3-sans", "type": "registry:font", "title": "Source Sans 3", "font": { "family": "'Source Sans 3 Variable', sans-serif", "provider": "google", "import": "Source_Sans_3", "variable": "--font-sans", "subsets": [ "latin" ], "selector": "html", "dependency": "@fontsource-variable/source-sans-3" } } ] }