{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "glasscn", "homepage": "https://glasscn.app", "items": [ { "name": "glass-style", "type": "registry:lib", "title": "Glass style", "description": "The design tokens (frost, rim, highlight, shadow, blur, saturation, fill, aurora), the glass / glass-strong / glass-subtle utilities, aurora and draw keyframes, a no-backdrop-filter fallback, and glassVariants — the cva every surface shares.", "categories": [ "glass", "foundations" ], "dependencies": [ "cn", "class-variance-authority" ], "files": [ { "path": "src/lib/glass-variants.ts", "type": "registry:lib", "target": "@lib/glass-variants.ts" } ], "cssVars": { "theme": { "color-glass": "color-mix(in oklch, var(--glass-tint) var(--glass-opacity), transparent)", "color-glass-strong": "color-mix(in oklch, var(--glass-tint) var(--glass-opacity-strong), transparent)", "color-glass-subtle": "color-mix(in oklch, var(--glass-tint) var(--glass-opacity-subtle), transparent)", "color-glass-border": "color-mix(in oklch, var(--glass-border-color) var(--glass-border-opacity), transparent)", "color-glass-highlight": "color-mix(in oklch, oklch(1 0 0) var(--glass-highlight-opacity), transparent)", "color-glass-shadow": "color-mix(in oklch, var(--glass-shadow-color) var(--glass-shadow-opacity), transparent)", "color-fill": "color-mix(in oklch, var(--glass-fill-tint) var(--glass-fill-opacity), transparent)", "color-fill-strong": "color-mix(in oklch, var(--glass-fill-tint) var(--glass-fill-opacity-strong), transparent)", "color-glass-thumb": "var(--glass-thumb)", "color-aurora-base": "var(--aurora-base)", "color-aurora-1": "var(--aurora-1)", "color-aurora-2": "var(--aurora-2)", "color-aurora-3": "var(--aurora-3)", "radius-surface": "var(--glass-radius-surface)", "radius-surface-sm": "calc(var(--glass-radius-surface) * 0.75)", "radius-control": "var(--glass-radius-control)", "radius-control-sm": "calc(var(--glass-radius-control) * 0.7)", "radius-button": "var(--glass-radius-button)", "radius-badge": "var(--glass-radius-badge)", "spacing-control-xs": "calc(1.75rem * var(--glass-density))", "spacing-control-sm": "calc(2rem * var(--glass-density))", "spacing-control": "calc(2.5rem * var(--glass-density))", "spacing-control-lg": "calc(3rem * var(--glass-density))", "spacing-pad-xs": "calc(0.625rem * var(--glass-density))", "spacing-pad-sm": "calc(0.875rem * var(--glass-density))", "spacing-pad": "calc(1.25rem * var(--glass-density))", "spacing-pad-lg": "calc(1.75rem * var(--glass-density))", "spacing-card": "calc(1.25rem * var(--glass-density))", "spacing-card-sm": "calc(1rem * var(--glass-density))", "ease-glass": "var(--glass-ease)", "font-weight-title": "var(--glass-heading-weight)", "tracking-title": "var(--glass-heading-tracking)" }, "light": { "aurora-1": "oklch(0.829 0.098 37.8)", "aurora-2": "oklch(0.809 0.109 296.4)", "aurora-3": "oklch(0.907 0.07 70.2)", "aurora-base": "oklch(0.955 0.007 268.5)", "glass-tint": "oklch(1 0 0)", "glass-opacity": "52%", "glass-opacity-strong": "74%", "glass-opacity-subtle": "28%", "glass-blur": "28px", "glass-saturate": "180%", "glass-brightness": "100%", "glass-sheen": "10%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.55 0.01 285)", "glass-fill-opacity": "12%", "glass-fill-opacity-strong": "20%", "glass-thumb": "oklch(1 0 0)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "85%", "glass-border-width": "1px", "glass-highlight-opacity": "92%", "glass-shadow-color": "oklch(0.3 0.05 270)", "glass-shadow-opacity": "12%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%", "glass-radius-surface": "1.5rem", "glass-radius-control": "0.75rem", "glass-radius-button": "9999px", "glass-radius-badge": "9999px", "glass-density": "1", "glass-duration": "200ms", "glass-ease": "cubic-bezier(0.2, 0.9, 0.3, 1.12)", "glass-press-scale": "0.97", "aurora-opacity": "100%", "aurora-scale": "1", "aurora-speed": "1", "aurora-blur": "0px", "glass-ring-width": "3px", "glass-text-scale": "1", "glass-type-ratio": "1.25", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "650", "glass-heading-tracking": "-0.015em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.03em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" }, "dark": { "aurora-1": "oklch(0.48 0.132 31.7)", "aurora-2": "oklch(0.401 0.159 289.2)", "aurora-3": "oklch(0.456 0.088 60.9)", "aurora-base": "oklch(0.116 0.006 285.4)", "glass-tint": "oklch(0.24 0.012 285)", "glass-opacity": "45%", "glass-opacity-strong": "72%", "glass-opacity-subtle": "24%", "glass-blur": "28px", "glass-saturate": "180%", "glass-brightness": "100%", "glass-sheen": "5%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.6 0.01 285)", "glass-fill-opacity": "24%", "glass-fill-opacity-strong": "36%", "glass-thumb": "oklch(1 0 0 / 20%)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "12%", "glass-border-width": "1px", "glass-highlight-opacity": "14%", "glass-shadow-color": "oklch(0 0 0)", "glass-shadow-opacity": "45%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%", "glass-radius-surface": "1.5rem", "glass-radius-control": "0.75rem", "glass-radius-button": "9999px", "glass-radius-badge": "9999px", "glass-density": "1", "glass-duration": "200ms", "glass-ease": "cubic-bezier(0.2, 0.9, 0.3, 1.12)", "glass-press-scale": "0.97", "aurora-opacity": "100%", "aurora-scale": "1", "aurora-speed": "1", "aurora-blur": "0px", "glass-ring-width": "3px", "glass-text-scale": "1", "glass-type-ratio": "1.25", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "650", "glass-heading-tracking": "-0.015em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.03em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" } }, "css": { "@utility glass": { "background-color": "var(--glass-bg, color-mix(in oklch, var(--glass-tint) var(--glass-opacity), transparent))", "background-image": "linear-gradient(var(--glass-sheen-angle), color-mix(in oklch, oklch(1 0 0) var(--glass-sheen), transparent), transparent 55%), var(--glass-texture)", "border-width": "var(--glass-border-width)", "border-style": "solid", "border-color": "color-mix(in oklch, var(--glass-border-color) var(--glass-border-opacity), transparent)", "-webkit-backdrop-filter": "blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness))", "backdrop-filter": "blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness))", "box-shadow": "var(--glass-elevation, 0 var(--glass-shadow-y) var(--glass-shadow-blur) color-mix(in oklch, var(--glass-shadow-color) var(--glass-shadow-opacity), transparent)), inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) var(--glass-highlight-opacity), transparent), inset 0 0 calc(var(--glass-shadow-blur) * 0.8) color-mix(in oklch, var(--primary) var(--glass-glow), transparent)" }, "@utility glass-strong": { "background-color": "var(--glass-bg, color-mix(in oklch, var(--glass-tint) var(--glass-opacity-strong), transparent))", "background-image": "linear-gradient(var(--glass-sheen-angle), color-mix(in oklch, oklch(1 0 0) var(--glass-sheen), transparent), transparent 55%), var(--glass-texture)", "border-width": "var(--glass-border-width)", "border-style": "solid", "border-color": "color-mix(in oklch, var(--glass-border-color) var(--glass-border-opacity), transparent)", "-webkit-backdrop-filter": "blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness))", "backdrop-filter": "blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness))", "box-shadow": "var(--glass-elevation, 0 var(--glass-shadow-y) var(--glass-shadow-blur) color-mix(in oklch, var(--glass-shadow-color) var(--glass-shadow-opacity), transparent)), inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) var(--glass-highlight-opacity), transparent), inset 0 0 calc(var(--glass-shadow-blur) * 0.8) color-mix(in oklch, var(--primary) var(--glass-glow), transparent)" }, "@utility glass-subtle": { "background-color": "var(--glass-bg, color-mix(in oklch, var(--glass-tint) var(--glass-opacity-subtle), transparent))", "background-image": "linear-gradient(var(--glass-sheen-angle), color-mix(in oklch, oklch(1 0 0) var(--glass-sheen), transparent), transparent 55%), var(--glass-texture)", "border-width": "var(--glass-border-width)", "border-style": "solid", "border-color": "color-mix(in oklch, var(--glass-border-color) var(--glass-border-opacity), transparent)", "-webkit-backdrop-filter": "blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness))", "backdrop-filter": "blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness))", "box-shadow": "var(--glass-elevation, 0 var(--glass-shadow-y) var(--glass-shadow-blur) color-mix(in oklch, var(--glass-shadow-color) var(--glass-shadow-opacity), transparent)), inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) var(--glass-highlight-opacity), transparent), inset 0 0 calc(var(--glass-shadow-blur) * 0.8) color-mix(in oklch, var(--primary) var(--glass-glow), transparent)" }, "@utility font-glass-sans": { "font-family": "var(--glass-font-sans, --theme(--font-sans, ui-sans-serif, system-ui, sans-serif))" }, "@utility font-glass-heading": { "font-family": "var(--glass-font-heading, --theme(--font-heading, --theme(--font-sans, ui-sans-serif, system-ui, sans-serif)))" }, "@utility font-glass-display": { "font-family": "var(--glass-font-display, var(--glass-font-heading, --theme(--font-heading, --theme(--font-sans, ui-sans-serif, system-ui, sans-serif))))" }, "@utility font-glass-mono": { "font-family": "var(--glass-font-mono, --theme(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace))" }, "@utility type-glass": { "font-family": "var(--glass-font-sans, --theme(--font-sans, ui-sans-serif, system-ui, sans-serif))", "line-height": "var(--glass-leading)", "letter-spacing": "var(--glass-tracking)", "font-weight": "var(--glass-body-weight)", "font-feature-settings": "var(--glass-font-features)" }, "@utility type-glass-heading": { "font-family": "var(--glass-font-heading, --theme(--font-heading, --theme(--font-sans, ui-sans-serif, system-ui, sans-serif)))", "font-weight": "var(--glass-heading-weight)", "letter-spacing": "var(--glass-heading-tracking)", "line-height": "var(--glass-heading-leading)", "text-transform": "var(--glass-heading-case)", "text-wrap": "var(--glass-heading-wrap)", "font-feature-settings": "var(--glass-font-features)" }, "@utility type-glass-display": { "font-family": "var(--glass-font-display, var(--glass-font-heading, --theme(--font-heading, --theme(--font-sans, ui-sans-serif, system-ui, sans-serif))))", "font-weight": "var(--glass-display-weight)", "letter-spacing": "var(--glass-display-tracking)", "font-variant-numeric": "var(--glass-numeric)", "line-height": "1" }, "@utility numeric-glass": { "font-variant-numeric": "var(--glass-numeric)" }, "@utility type-step-n2": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), -2))" }, "@utility type-step-n1": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), -1))" }, "@utility type-step-0": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 0))" }, "@utility type-step-1": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 1))" }, "@utility type-step-2": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 2))" }, "@utility type-step-3": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 3))" }, "@utility type-step-4": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 4))" }, "@utility type-step-5": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 5))" }, "@utility type-step-6": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 6))" }, "@keyframes glass-aurora-1": { "0%, 100%": { "transform": "translate3d(0, 0, 0) scale(1)" }, "50%": { "transform": "translate3d(6%, 4%, 0) scale(1.08)" } }, "@keyframes glass-aurora-2": { "0%, 100%": { "transform": "translate3d(0, 0, 0) scale(1)" }, "50%": { "transform": "translate3d(-5%, 6%, 0) scale(1.06)" } }, "@keyframes glass-aurora-3": { "0%, 100%": { "transform": "translate3d(0, 0, 0) scale(1.04)" }, "50%": { "transform": "translate3d(4%, -6%, 0) scale(1)" } }, "@keyframes glass-draw": { "from": { "stroke-dashoffset": "var(--glass-draw-from, 1)" } }, "@keyframes glass-fade": { "from": { "opacity": "0" } }, "@keyframes glass-grow": { "from": { "transform": "scaleX(0)" } }, "@keyframes glass-pulse": { "0%": { "transform": "scale(1)", "opacity": "0.7" }, "100%": { "transform": "scale(1.7)", "opacity": "0" } }, "@keyframes glass-typing": { "0%, 60%, 100%": { "transform": "translateY(0)", "opacity": "0.45" }, "30%": { "transform": "translateY(-0.25rem)", "opacity": "1" } }, "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))": { ".glass, .glass-strong, .glass-subtle": { "--glass-bg": "color-mix(in oklch, var(--glass-tint) 92%, transparent)" } }, "@media (prefers-reduced-motion: reduce)": { "[data-slot=aurora-blob], [data-glass-motion]": { "animation": "none !important", "transition": "none !important" } } } }, { "name": "glass-theme", "type": "registry:lib", "title": "Theme engine", "description": "The schema of every glass primitive, the palettes and presets, a hue-harmony palette generator, and exports to CSS, inline style, a shadcn theme item and a share code — with value sanitising and a legibility estimate.", "categories": [ "glass", "foundations" ], "files": [ { "path": "src/lib/glass-theme.ts", "type": "registry:lib", "target": "@lib/glass-theme.ts" } ] }, { "name": "use-sliding-indicator", "type": "registry:hook", "title": "useSlidingIndicator", "description": "Exposes the selected child's box as CSS variables so one element can slide between items — the moving thumb in segmented controls, tabs and the dock.", "categories": [ "glass", "foundations" ], "files": [ { "path": "src/hooks/use-sliding-indicator.ts", "type": "registry:hook", "target": "@hooks/use-sliding-indicator.ts" } ] }, { "name": "glass-charts", "type": "registry:lib", "title": "Chart maths", "description": "Pure maths for the data components: ring radii and arcs, scaled series, smooth Catmull-Rom paths and areas, the heatmap week grid, bar shares, gauge arcs and category segments.", "categories": [ "glass", "foundations" ], "files": [ { "path": "src/lib/glass-charts.ts", "type": "registry:lib", "target": "@lib/glass-charts.ts" } ] }, { "name": "theme-dusk", "type": "registry:theme", "title": "Dusk palette", "description": "Coral over violet and peach — the default. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.657 0.19 34.8)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.657 0.19 34.8)", "chart-1": "oklch(0.657 0.19 34.8)", "chart-2": "oklch(0.685 0.189 296.4)", "chart-3": "oklch(0.803 0.159 69.8)", "chart-4": "oklch(0.55 0.128 95)", "chart-5": "oklch(0.85 0.096 335)", "aurora-1": "oklch(0.829 0.098 37.8)", "aurora-2": "oklch(0.809 0.109 296.4)", "aurora-3": "oklch(0.907 0.07 70.2)", "aurora-base": "oklch(0.955 0.007 268.5)" }, "dark": { "primary": "oklch(0.728 0.171 36.5)", "primary-foreground": "oklch(0.18 0.02 30)", "ring": "oklch(0.728 0.171 36.5)", "chart-1": "oklch(0.728 0.171 36.5)", "chart-2": "oklch(0.685 0.189 296.4)", "chart-3": "oklch(0.803 0.159 69.8)", "chart-4": "oklch(0.66 0.128 95)", "chart-5": "oklch(0.86 0.096 335)", "aurora-1": "oklch(0.48 0.132 31.7)", "aurora-2": "oklch(0.401 0.159 289.2)", "aurora-3": "oklch(0.456 0.088 60.9)", "aurora-base": "oklch(0.116 0.006 285.4)" } } }, { "name": "theme-ocean", "type": "registry:theme", "title": "Ocean palette", "description": "Blue, teal and periwinkle. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.583 0.203 259)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.583 0.203 259)", "chart-1": "oklch(0.583 0.203 259)", "chart-2": "oklch(0.773 0.127 186.5)", "chart-3": "oklch(0.665 0.187 286.4)", "chart-4": "oklch(0.55 0.128 319)", "chart-5": "oklch(0.85 0.096 199)", "aurora-1": "oklch(0.817 0.093 256.2)", "aurora-2": "oklch(0.899 0.073 185.2)", "aurora-3": "oklch(0.828 0.094 291.7)", "aurora-base": "oklch(0.955 0.007 268.5)" }, "dark": { "primary": "oklch(0.705 0.159 252.4)", "primary-foreground": "oklch(0.18 0.02 30)", "ring": "oklch(0.705 0.159 252.4)", "chart-1": "oklch(0.705 0.159 252.4)", "chart-2": "oklch(0.773 0.127 186.5)", "chart-3": "oklch(0.665 0.187 286.4)", "chart-4": "oklch(0.66 0.128 319)", "chart-5": "oklch(0.86 0.096 199)", "aurora-1": "oklch(0.389 0.133 260.3)", "aurora-2": "oklch(0.442 0.071 205.5)", "aurora-3": "oklch(0.36 0.154 280)", "aurora-base": "oklch(0.116 0.006 285.4)" } } }, { "name": "theme-rose", "type": "registry:theme", "title": "Rose palette", "description": "Pink over lilac. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.618 0.194 9.9)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.618 0.194 9.9)", "chart-1": "oklch(0.618 0.194 9.9)", "chart-2": "oklch(0.698 0.191 302)", "chart-3": "oklch(0.771 0.143 43.5)", "chart-4": "oklch(0.55 0.128 70)", "chart-5": "oklch(0.85 0.096 310)", "aurora-1": "oklch(0.844 0.092 1.1)", "aurora-2": "oklch(0.843 0.106 311.1)", "aurora-3": "oklch(0.907 0.051 1.4)", "aurora-base": "oklch(0.955 0.007 268.5)" }, "dark": { "primary": "oklch(0.719 0.182 8.2)", "primary-foreground": "oklch(0.18 0.02 30)", "ring": "oklch(0.719 0.182 8.2)", "chart-1": "oklch(0.719 0.182 8.2)", "chart-2": "oklch(0.698 0.191 302)", "chart-3": "oklch(0.771 0.143 43.5)", "chart-4": "oklch(0.66 0.128 70)", "chart-5": "oklch(0.86 0.096 310)", "aurora-1": "oklch(0.431 0.14 4.8)", "aurora-2": "oklch(0.407 0.146 306.5)", "aurora-3": "oklch(0.339 0.122 309.2)", "aurora-base": "oklch(0.116 0.006 285.4)" } } }, { "name": "theme-sage", "type": "registry:theme", "title": "Sage palette", "description": "Green, lime and sea glass. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.589 0.126 157.8)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.589 0.126 157.8)", "chart-1": "oklch(0.589 0.126 157.8)", "chart-2": "oklch(0.779 0.178 129)", "chart-3": "oklch(0.711 0.118 221.5)", "chart-4": "oklch(0.55 0.128 218)", "chart-5": "oklch(0.85 0.096 98)", "aurora-1": "oklch(0.89 0.071 160.3)", "aurora-2": "oklch(0.927 0.098 121.8)", "aurora-3": "oklch(0.87 0.057 211.5)", "aurora-base": "oklch(0.955 0.007 268.5)" }, "dark": { "primary": "oklch(0.769 0.149 158.2)", "primary-foreground": "oklch(0.18 0.02 30)", "ring": "oklch(0.769 0.149 158.2)", "chart-1": "oklch(0.769 0.149 158.2)", "chart-2": "oklch(0.779 0.178 129)", "chart-3": "oklch(0.711 0.118 221.5)", "chart-4": "oklch(0.66 0.128 218)", "chart-5": "oklch(0.86 0.096 98)", "aurora-1": "oklch(0.456 0.091 159.1)", "aurora-2": "oklch(0.47 0.105 130.5)", "aurora-3": "oklch(0.432 0.068 211.9)", "aurora-base": "oklch(0.116 0.006 285.4)" } } }, { "name": "theme-amber", "type": "registry:theme", "title": "Amber palette", "description": "Honey, apricot and lemon. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.65 0.144 65.8)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.65 0.144 65.8)", "chart-1": "oklch(0.65 0.144 65.8)", "chart-2": "oklch(0.712 0.183 34)", "chart-3": "oklch(0.823 0.164 94.1)", "chart-4": "oklch(0.55 0.128 126)", "chart-5": "oklch(0.85 0.096 6)", "aurora-1": "oklch(0.901 0.092 79.5)", "aurora-2": "oklch(0.849 0.086 40.3)", "aurora-3": "oklch(0.953 0.079 95.9)", "aurora-base": "oklch(0.955 0.007 268.5)" }, "dark": { "primary": "oklch(0.82 0.152 73.2)", "primary-foreground": "oklch(0.18 0.02 30)", "ring": "oklch(0.82 0.152 73.2)", "chart-1": "oklch(0.82 0.152 73.2)", "chart-2": "oklch(0.712 0.183 34)", "chart-3": "oklch(0.823 0.164 94.1)", "chart-4": "oklch(0.66 0.128 126)", "chart-5": "oklch(0.86 0.096 6)", "aurora-1": "oklch(0.471 0.094 74)", "aurora-2": "oklch(0.414 0.106 35.8)", "aurora-3": "oklch(0.448 0.085 102.3)", "aurora-base": "oklch(0.116 0.006 285.4)" } } }, { "name": "theme-graphite", "type": "registry:theme", "title": "Graphite palette", "description": "Monochrome — ink on frost. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.227 0.004 286.1)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.227 0.004 286.1)", "chart-1": "oklch(0.227 0.004 286.1)", "chart-2": "oklch(0.589 0.012 286)", "chart-3": "oklch(0.753 0.008 286.2)", "chart-4": "oklch(0.55 0.016 346)", "chart-5": "oklch(0.85 0.012 226)", "aurora-1": "oklch(0.881 0.015 264.5)", "aurora-2": "oklch(0.911 0.025 301.1)", "aurora-3": "oklch(0.892 0.024 227.8)", "aurora-base": "oklch(0.955 0.007 268.5)" }, "dark": { "primary": "oklch(0.963 0.007 286.3)", "primary-foreground": "oklch(0.15 0 0)", "ring": "oklch(0.963 0.007 286.3)", "chart-1": "oklch(0.963 0.007 286.3)", "chart-2": "oklch(0.589 0.012 286)", "chart-3": "oklch(0.753 0.008 286.2)", "chart-4": "oklch(0.66 0.016 346)", "chart-5": "oklch(0.86 0.012 226)", "aurora-1": "oklch(0.326 0.02 269.5)", "aurora-2": "oklch(0.339 0.032 300)", "aurora-3": "oklch(0.315 0.028 236.2)", "aurora-base": "oklch(0.116 0.006 285.4)" } } }, { "name": "theme-lavender", "type": "registry:theme", "title": "Lavender palette", "description": "Soft violet with lilac and periwinkle. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.6 0.15 300)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.6 0.15 300)", "chart-1": "oklch(0.6 0.15 300)", "chart-2": "oklch(0.66 0.15 338)", "chart-3": "oklch(0.78 0.128 266)", "chart-4": "oklch(0.55 0.12 0)", "chart-5": "oklch(0.85 0.09 240)", "aurora-1": "oklch(0.84 0.083 300)", "aurora-2": "oklch(0.83 0.09 338)", "aurora-3": "oklch(0.9 0.063 266)", "aurora-base": "oklch(0.955 0.012 300)" }, "dark": { "primary": "oklch(0.74 0.138 300)", "primary-foreground": "oklch(0.18 0.03 300)", "ring": "oklch(0.74 0.138 300)", "chart-1": "oklch(0.74 0.138 300)", "chart-2": "oklch(0.72 0.15 338)", "chart-3": "oklch(0.82 0.128 266)", "chart-4": "oklch(0.66 0.12 0)", "chart-5": "oklch(0.86 0.09 240)", "aurora-1": "oklch(0.44 0.117 300)", "aurora-2": "oklch(0.38 0.135 338)", "aurora-3": "oklch(0.42 0.09 266)", "aurora-base": "oklch(0.12 0.012 300)" } } }, { "name": "theme-mint", "type": "registry:theme", "title": "Mint palette", "description": "Fresh green against blue sky. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.6 0.13 165)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.6 0.13 165)", "chart-1": "oklch(0.6 0.13 165)", "chart-2": "oklch(0.66 0.13 315)", "chart-3": "oklch(0.78 0.111 15)", "chart-4": "oklch(0.55 0.104 225)", "chart-5": "oklch(0.85 0.078 105)", "aurora-1": "oklch(0.84 0.072 165)", "aurora-2": "oklch(0.83 0.078 315)", "aurora-3": "oklch(0.9 0.055 15)", "aurora-base": "oklch(0.955 0.012 165)" }, "dark": { "primary": "oklch(0.74 0.12 165)", "primary-foreground": "oklch(0.18 0.03 165)", "ring": "oklch(0.74 0.12 165)", "chart-1": "oklch(0.74 0.12 165)", "chart-2": "oklch(0.72 0.13 315)", "chart-3": "oklch(0.82 0.111 15)", "chart-4": "oklch(0.66 0.104 225)", "chart-5": "oklch(0.86 0.078 105)", "aurora-1": "oklch(0.44 0.101 165)", "aurora-2": "oklch(0.38 0.117 315)", "aurora-3": "oklch(0.42 0.078 15)", "aurora-base": "oklch(0.12 0.012 165)" } } }, { "name": "theme-cherry", "type": "registry:theme", "title": "Cherry palette", "description": "Red with a cool complement. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.6 0.2 22)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.6 0.2 22)", "chart-1": "oklch(0.6 0.2 22)", "chart-2": "oklch(0.66 0.2 202)", "chart-3": "oklch(0.78 0.17 46)", "chart-4": "oklch(0.55 0.16 82)", "chart-5": "oklch(0.85 0.12 322)", "aurora-1": "oklch(0.84 0.11 22)", "aurora-2": "oklch(0.83 0.12 202)", "aurora-3": "oklch(0.9 0.084 46)", "aurora-base": "oklch(0.955 0.012 22)" }, "dark": { "primary": "oklch(0.74 0.184 22)", "primary-foreground": "oklch(0.18 0.03 22)", "ring": "oklch(0.74 0.184 22)", "chart-1": "oklch(0.74 0.184 22)", "chart-2": "oklch(0.72 0.2 202)", "chart-3": "oklch(0.82 0.17 46)", "chart-4": "oklch(0.66 0.16 82)", "chart-5": "oklch(0.86 0.12 322)", "aurora-1": "oklch(0.44 0.156 22)", "aurora-2": "oklch(0.38 0.18 202)", "aurora-3": "oklch(0.42 0.12 46)", "aurora-base": "oklch(0.12 0.012 22)" } } }, { "name": "theme-lagoon", "type": "registry:theme", "title": "Lagoon palette", "description": "Teal, aqua and deep blue. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.6 0.14 200)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.6 0.14 200)", "chart-1": "oklch(0.6 0.14 200)", "chart-2": "oklch(0.66 0.14 238)", "chart-3": "oklch(0.78 0.119 166)", "chart-4": "oklch(0.55 0.112 260)", "chart-5": "oklch(0.85 0.084 140)", "aurora-1": "oklch(0.84 0.077 200)", "aurora-2": "oklch(0.83 0.084 238)", "aurora-3": "oklch(0.9 0.059 166)", "aurora-base": "oklch(0.955 0.012 200)" }, "dark": { "primary": "oklch(0.74 0.129 200)", "primary-foreground": "oklch(0.18 0.03 200)", "ring": "oklch(0.74 0.129 200)", "chart-1": "oklch(0.74 0.129 200)", "chart-2": "oklch(0.72 0.14 238)", "chart-3": "oklch(0.82 0.119 166)", "chart-4": "oklch(0.66 0.112 260)", "chart-5": "oklch(0.86 0.084 140)", "aurora-1": "oklch(0.44 0.109 200)", "aurora-2": "oklch(0.38 0.126 238)", "aurora-3": "oklch(0.42 0.084 166)", "aurora-base": "oklch(0.12 0.012 200)" } } }, { "name": "theme-sand", "type": "registry:theme", "title": "Sand palette", "description": "Warm neutrals, barely tinted. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.6 0.07 70)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.6 0.07 70)", "chart-1": "oklch(0.6 0.07 70)", "chart-2": "oklch(0.66 0.07 78)", "chart-3": "oklch(0.78 0.06 62)", "chart-4": "oklch(0.55 0.056 130)", "chart-5": "oklch(0.85 0.042 10)", "aurora-1": "oklch(0.8 0.039 70)", "aurora-2": "oklch(0.88 0.042 78)", "aurora-3": "oklch(0.92 0.029 62)", "aurora-base": "oklch(0.955 0.012 70)" }, "dark": { "primary": "oklch(0.74 0.064 70)", "primary-foreground": "oklch(0.18 0.03 70)", "ring": "oklch(0.74 0.064 70)", "chart-1": "oklch(0.74 0.064 70)", "chart-2": "oklch(0.72 0.07 78)", "chart-3": "oklch(0.82 0.06 62)", "chart-4": "oklch(0.66 0.056 130)", "chart-5": "oklch(0.86 0.042 10)", "aurora-1": "oklch(0.44 0.055 70)", "aurora-2": "oklch(0.38 0.063 78)", "aurora-3": "oklch(0.42 0.042 62)", "aurora-base": "oklch(0.12 0.012 70)" } } }, { "name": "theme-midnight", "type": "registry:theme", "title": "Midnight palette", "description": "Indigo, magenta and cyan — made for dark. Sets the accent, ring, five chart colours, the aurora and the ground for light and dark.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "primary": "oklch(0.6 0.19 275)", "primary-foreground": "oklch(0.99 0 0)", "ring": "oklch(0.6 0.19 275)", "chart-1": "oklch(0.6 0.19 275)", "chart-2": "oklch(0.66 0.19 35)", "chart-3": "oklch(0.78 0.162 155)", "chart-4": "oklch(0.55 0.152 335)", "chart-5": "oklch(0.85 0.114 215)", "aurora-1": "oklch(0.84 0.105 275)", "aurora-2": "oklch(0.83 0.114 35)", "aurora-3": "oklch(0.9 0.08 155)", "aurora-base": "oklch(0.955 0.012 275)" }, "dark": { "primary": "oklch(0.74 0.175 275)", "primary-foreground": "oklch(0.18 0.03 275)", "ring": "oklch(0.74 0.175 275)", "chart-1": "oklch(0.74 0.175 275)", "chart-2": "oklch(0.72 0.19 35)", "chart-3": "oklch(0.82 0.162 155)", "chart-4": "oklch(0.66 0.152 335)", "chart-5": "oklch(0.86 0.114 215)", "aurora-1": "oklch(0.44 0.148 275)", "aurora-2": "oklch(0.38 0.171 35)", "aurora-3": "oklch(0.42 0.114 155)", "aurora-base": "oklch(0.12 0.012 275)" } } }, { "name": "material-frosted", "type": "registry:theme", "title": "Frosted material", "description": "Soft frost, a light rim — the default. Sets frost, blur, saturation, sheen, grain, rim and depth.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-tint": "oklch(1 0 0)", "glass-opacity": "52%", "glass-opacity-strong": "74%", "glass-opacity-subtle": "28%", "glass-blur": "28px", "glass-saturate": "180%", "glass-brightness": "100%", "glass-sheen": "10%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.55 0.01 285)", "glass-fill-opacity": "12%", "glass-fill-opacity-strong": "20%", "glass-thumb": "oklch(1 0 0)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "85%", "glass-border-width": "1px", "glass-highlight-opacity": "92%", "glass-shadow-color": "oklch(0.3 0.05 270)", "glass-shadow-opacity": "12%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" }, "dark": { "glass-tint": "oklch(0.24 0.012 285)", "glass-opacity": "45%", "glass-opacity-strong": "72%", "glass-opacity-subtle": "24%", "glass-blur": "28px", "glass-saturate": "180%", "glass-brightness": "100%", "glass-sheen": "5%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.6 0.01 285)", "glass-fill-opacity": "24%", "glass-fill-opacity-strong": "36%", "glass-thumb": "oklch(1 0 0 / 20%)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "12%", "glass-border-width": "1px", "glass-highlight-opacity": "14%", "glass-shadow-color": "oklch(0 0 0)", "glass-shadow-opacity": "45%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" } } }, { "name": "material-liquid", "type": "registry:theme", "title": "Liquid material", "description": "Clear and vivid: little frost, strong saturation, a bright sheen. Sets frost, blur, saturation, sheen, grain, rim and depth.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-tint": "oklch(1 0 0)", "glass-opacity": "28%", "glass-opacity-strong": "55%", "glass-opacity-subtle": "14%", "glass-blur": "16px", "glass-saturate": "240%", "glass-brightness": "100%", "glass-sheen": "22%", "glass-sheen-angle": "135deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.55 0.01 285)", "glass-fill-opacity": "12%", "glass-fill-opacity-strong": "20%", "glass-thumb": "oklch(1 0 0)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "85%", "glass-border-width": "1px", "glass-highlight-opacity": "92%", "glass-shadow-color": "oklch(0.3 0.05 270)", "glass-shadow-opacity": "12%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" }, "dark": { "glass-tint": "oklch(0.24 0.012 285)", "glass-opacity": "26%", "glass-opacity-strong": "55%", "glass-opacity-subtle": "12%", "glass-blur": "16px", "glass-saturate": "240%", "glass-brightness": "100%", "glass-sheen": "10%", "glass-sheen-angle": "135deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.6 0.01 285)", "glass-fill-opacity": "24%", "glass-fill-opacity-strong": "36%", "glass-thumb": "oklch(1 0 0 / 20%)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "12%", "glass-border-width": "1px", "glass-highlight-opacity": "14%", "glass-shadow-color": "oklch(0 0 0)", "glass-shadow-opacity": "45%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" } } }, { "name": "material-crystal", "type": "registry:theme", "title": "Crystal material", "description": "Little blur, a crisp double-strength rim and a hard highlight. Sets frost, blur, saturation, sheen, grain, rim and depth.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-tint": "oklch(1 0 0)", "glass-opacity": "38%", "glass-opacity-strong": "74%", "glass-opacity-subtle": "28%", "glass-blur": "10px", "glass-saturate": "150%", "glass-brightness": "100%", "glass-sheen": "16%", "glass-sheen-angle": "120deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.55 0.01 285)", "glass-fill-opacity": "12%", "glass-fill-opacity-strong": "20%", "glass-thumb": "oklch(1 0 0)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "100%", "glass-border-width": "1.5px", "glass-highlight-opacity": "100%", "glass-shadow-color": "oklch(0.3 0.05 270)", "glass-shadow-opacity": "12%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" }, "dark": { "glass-tint": "oklch(0.24 0.012 285)", "glass-opacity": "34%", "glass-opacity-strong": "72%", "glass-opacity-subtle": "24%", "glass-blur": "10px", "glass-saturate": "150%", "glass-brightness": "100%", "glass-sheen": "16%", "glass-sheen-angle": "120deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.6 0.01 285)", "glass-fill-opacity": "24%", "glass-fill-opacity-strong": "36%", "glass-thumb": "oklch(1 0 0 / 20%)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "28%", "glass-border-width": "1.5px", "glass-highlight-opacity": "30%", "glass-shadow-color": "oklch(0 0 0)", "glass-shadow-opacity": "45%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" } } }, { "name": "material-smoked", "type": "registry:theme", "title": "Smoked material", "description": "Dark tinted glass in both schemes. Sets frost, blur, saturation, sheen, grain, rim and depth.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-tint": "oklch(0.2 0.01 270)", "glass-opacity": "58%", "glass-opacity-strong": "82%", "glass-opacity-subtle": "40%", "glass-blur": "30px", "glass-saturate": "140%", "glass-brightness": "85%", "glass-sheen": "6%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.55 0.01 285)", "glass-fill-opacity": "12%", "glass-fill-opacity-strong": "20%", "glass-thumb": "oklch(1 0 0)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "16%", "glass-border-width": "1px", "glass-highlight-opacity": "18%", "glass-shadow-color": "oklch(0.3 0.05 270)", "glass-shadow-opacity": "30%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" }, "dark": { "glass-tint": "oklch(0.2 0.01 270)", "glass-opacity": "60%", "glass-opacity-strong": "84%", "glass-opacity-subtle": "24%", "glass-blur": "30px", "glass-saturate": "140%", "glass-brightness": "85%", "glass-sheen": "6%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.6 0.01 285)", "glass-fill-opacity": "24%", "glass-fill-opacity-strong": "36%", "glass-thumb": "oklch(1 0 0 / 20%)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "12%", "glass-border-width": "1px", "glass-highlight-opacity": "14%", "glass-shadow-color": "oklch(0 0 0)", "glass-shadow-opacity": "45%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" } } }, { "name": "material-matte", "type": "registry:theme", "title": "Matte material", "description": "No blur at all — opaque panes. The fastest option on slow devices. Sets frost, blur, saturation, sheen, grain, rim and depth.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-tint": "oklch(1 0 0)", "glass-opacity": "90%", "glass-opacity-strong": "96%", "glass-opacity-subtle": "75%", "glass-blur": "0px", "glass-saturate": "100%", "glass-brightness": "100%", "glass-sheen": "0%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.55 0.01 285)", "glass-fill-opacity": "12%", "glass-fill-opacity-strong": "20%", "glass-thumb": "oklch(1 0 0)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "85%", "glass-border-width": "1px", "glass-highlight-opacity": "92%", "glass-shadow-color": "oklch(0.3 0.05 270)", "glass-shadow-opacity": "12%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" }, "dark": { "glass-tint": "oklch(0.24 0.012 285)", "glass-opacity": "90%", "glass-opacity-strong": "96%", "glass-opacity-subtle": "75%", "glass-blur": "0px", "glass-saturate": "100%", "glass-brightness": "100%", "glass-sheen": "0%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.6 0.01 285)", "glass-fill-opacity": "24%", "glass-fill-opacity-strong": "36%", "glass-thumb": "oklch(1 0 0 / 20%)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "12%", "glass-border-width": "1px", "glass-highlight-opacity": "14%", "glass-shadow-color": "oklch(0 0 0)", "glass-shadow-opacity": "45%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "0%" } } }, { "name": "material-vapor", "type": "registry:theme", "title": "Vapor material", "description": "Heavy, misty blur with almost no edge. Sets frost, blur, saturation, sheen, grain, rim and depth.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-tint": "oklch(1 0 0)", "glass-opacity": "40%", "glass-opacity-strong": "74%", "glass-opacity-subtle": "28%", "glass-blur": "56px", "glass-saturate": "200%", "glass-brightness": "100%", "glass-sheen": "0%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.55 0.01 285)", "glass-fill-opacity": "12%", "glass-fill-opacity-strong": "20%", "glass-thumb": "oklch(1 0 0)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "35%", "glass-border-width": "1px", "glass-highlight-opacity": "50%", "glass-shadow-color": "oklch(0.3 0.05 270)", "glass-shadow-opacity": "12%", "glass-shadow-y": "10px", "glass-shadow-blur": "60px", "glass-glow": "0%" }, "dark": { "glass-tint": "oklch(0.24 0.012 285)", "glass-opacity": "35%", "glass-opacity-strong": "72%", "glass-opacity-subtle": "24%", "glass-blur": "56px", "glass-saturate": "200%", "glass-brightness": "100%", "glass-sheen": "0%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.6 0.01 285)", "glass-fill-opacity": "24%", "glass-fill-opacity-strong": "36%", "glass-thumb": "oklch(1 0 0 / 20%)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "6%", "glass-border-width": "1px", "glass-highlight-opacity": "8%", "glass-shadow-color": "oklch(0 0 0)", "glass-shadow-opacity": "45%", "glass-shadow-y": "10px", "glass-shadow-blur": "60px", "glass-glow": "0%" } } }, { "name": "material-neon", "type": "registry:theme", "title": "Neon material", "description": "Dark frost lit from inside by the accent. Sets frost, blur, saturation, sheen, grain, rim and depth.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-tint": "oklch(1 0 0)", "glass-opacity": "48%", "glass-opacity-strong": "74%", "glass-opacity-subtle": "28%", "glass-blur": "24px", "glass-saturate": "220%", "glass-brightness": "100%", "glass-sheen": "8%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.55 0.01 285)", "glass-fill-opacity": "12%", "glass-fill-opacity-strong": "20%", "glass-thumb": "oklch(1 0 0)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "70%", "glass-border-width": "1px", "glass-highlight-opacity": "92%", "glass-shadow-color": "oklch(0.3 0.05 270)", "glass-shadow-opacity": "12%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "38%" }, "dark": { "glass-tint": "oklch(0.24 0.012 285)", "glass-opacity": "40%", "glass-opacity-strong": "72%", "glass-opacity-subtle": "24%", "glass-blur": "24px", "glass-saturate": "220%", "glass-brightness": "100%", "glass-sheen": "8%", "glass-sheen-angle": "160deg", "glass-texture": "none", "glass-fill-tint": "oklch(0.6 0.01 285)", "glass-fill-opacity": "24%", "glass-fill-opacity-strong": "36%", "glass-thumb": "oklch(1 0 0 / 20%)", "glass-border-color": "oklch(1 0 0)", "glass-border-opacity": "22%", "glass-border-width": "1px", "glass-highlight-opacity": "14%", "glass-shadow-color": "oklch(0 0 0)", "glass-shadow-opacity": "45%", "glass-shadow-y": "10px", "glass-shadow-blur": "30px", "glass-glow": "38%" } } }, { "name": "shape-round", "type": "registry:theme", "title": "Round shape", "description": "Capsule buttons, generous corners — the default. Sets every corner radius.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-radius-surface": "1.5rem", "glass-radius-control": "0.75rem", "glass-radius-button": "9999px", "glass-radius-badge": "9999px", "glass-ring-width": "3px" }, "dark": { "glass-radius-surface": "1.5rem", "glass-radius-control": "0.75rem", "glass-radius-button": "9999px", "glass-radius-badge": "9999px", "glass-ring-width": "3px" } } }, { "name": "shape-soft", "type": "registry:theme", "title": "Soft shape", "description": "Rounded rectangles everywhere. Sets every corner radius.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-radius-surface": "1rem", "glass-radius-control": "0.625rem", "glass-radius-button": "0.75rem", "glass-radius-badge": "0.5rem", "glass-ring-width": "3px" }, "dark": { "glass-radius-surface": "1rem", "glass-radius-control": "0.625rem", "glass-radius-button": "0.75rem", "glass-radius-badge": "0.5rem", "glass-ring-width": "3px" } } }, { "name": "shape-sharp", "type": "registry:theme", "title": "Sharp shape", "description": "Tight corners, still not square. Sets every corner radius.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-radius-surface": "0.5rem", "glass-radius-control": "0.375rem", "glass-radius-button": "0.375rem", "glass-radius-badge": "0.25rem", "glass-ring-width": "3px" }, "dark": { "glass-radius-surface": "0.5rem", "glass-radius-control": "0.375rem", "glass-radius-button": "0.375rem", "glass-radius-badge": "0.25rem", "glass-ring-width": "3px" } } }, { "name": "shape-square", "type": "registry:theme", "title": "Square shape", "description": "No rounding at all. Sets every corner radius.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-radius-surface": "0rem", "glass-radius-control": "0rem", "glass-radius-button": "0rem", "glass-radius-badge": "0rem", "glass-ring-width": "3px" }, "dark": { "glass-radius-surface": "0rem", "glass-radius-control": "0rem", "glass-radius-button": "0rem", "glass-radius-badge": "0rem", "glass-ring-width": "3px" } } }, { "name": "motion-spring", "type": "registry:theme", "title": "Spring motion", "description": "A little overshoot — the default. Sets duration, easing, press and aurora speed.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-duration": "200ms", "glass-ease": "cubic-bezier(0.2, 0.9, 0.3, 1.12)", "glass-press-scale": "0.97", "aurora-speed": "1" }, "dark": { "glass-duration": "200ms", "glass-ease": "cubic-bezier(0.2, 0.9, 0.3, 1.12)", "glass-press-scale": "0.97", "aurora-speed": "1" } } }, { "name": "motion-smooth", "type": "registry:theme", "title": "Smooth motion", "description": "Material-style easing, no overshoot. Sets duration, easing, press and aurora speed.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-duration": "220ms", "glass-ease": "cubic-bezier(0.4, 0, 0.2, 1)", "glass-press-scale": "0.98", "aurora-speed": "1" }, "dark": { "glass-duration": "220ms", "glass-ease": "cubic-bezier(0.4, 0, 0.2, 1)", "glass-press-scale": "0.98", "aurora-speed": "1" } } }, { "name": "motion-snappy", "type": "registry:theme", "title": "Snappy motion", "description": "Quick with a bounce. Sets duration, easing, press and aurora speed.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-duration": "160ms", "glass-ease": "cubic-bezier(0.3, 1.4, 0.5, 1)", "glass-press-scale": "0.94", "aurora-speed": "1" }, "dark": { "glass-duration": "160ms", "glass-ease": "cubic-bezier(0.3, 1.4, 0.5, 1)", "glass-press-scale": "0.94", "aurora-speed": "1" } } }, { "name": "motion-still", "type": "registry:theme", "title": "Still motion", "description": "No transitions, no press squash, a frozen aurora. Sets duration, easing, press and aurora speed.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-duration": "0ms", "glass-ease": "cubic-bezier(0.2, 0.9, 0.3, 1.12)", "glass-press-scale": "1", "aurora-speed": "0.0001" }, "dark": { "glass-duration": "0ms", "glass-ease": "cubic-bezier(0.2, 0.9, 0.3, 1.12)", "glass-press-scale": "1", "aurora-speed": "0.0001" } } }, { "name": "type-default", "type": "registry:theme", "title": "Default type", "description": "Your app's fonts on a major-third scale. Sets the type scale, leading, weights, case and numerals.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-text-scale": "1", "glass-type-ratio": "1.25", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "650", "glass-heading-tracking": "-0.015em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.03em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" }, "dark": { "glass-text-scale": "1", "glass-type-ratio": "1.25", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "650", "glass-heading-tracking": "-0.015em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.03em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" } } }, { "name": "type-system", "type": "registry:theme", "title": "System type", "description": "San Francisco everywhere, SF Rounded for figures — native and instant, nothing to load. Sets the type scale, leading, weights, case and numerals.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-text-scale": "1", "glass-type-ratio": "1.25", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "700", "glass-heading-tracking": "-0.02em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.03em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em", "glass-font-sans": "system-ui, -apple-system, Segoe UI, Roboto, ui-sans-serif, system-ui, sans-serif", "glass-font-heading": "system-ui, -apple-system, Segoe UI, Roboto, ui-sans-serif, system-ui, sans-serif", "glass-font-display": "ui-rounded, SF Pro Rounded, system-ui, ui-sans-serif, system-ui, sans-serif", "glass-font-mono": "ui-monospace, SFMono-Regular, Menlo, monospace" }, "dark": { "glass-text-scale": "1", "glass-type-ratio": "1.25", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "700", "glass-heading-tracking": "-0.02em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.03em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em", "glass-font-sans": "system-ui, -apple-system, Segoe UI, Roboto, ui-sans-serif, system-ui, sans-serif", "glass-font-heading": "system-ui, -apple-system, Segoe UI, Roboto, ui-sans-serif, system-ui, sans-serif", "glass-font-display": "ui-rounded, SF Pro Rounded, system-ui, ui-sans-serif, system-ui, sans-serif", "glass-font-mono": "ui-monospace, SFMono-Regular, Menlo, monospace" } } }, { "name": "type-modern", "type": "registry:theme", "title": "Modern type", "description": "Geist and Geist Mono, tight and precise. Sets the type scale, leading, weights, case and numerals.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-text-scale": "1", "glass-type-ratio": "1.2", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "600", "glass-heading-tracking": "-0.025em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.04em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" }, "dark": { "glass-text-scale": "1", "glass-type-ratio": "1.2", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "600", "glass-heading-tracking": "-0.025em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.04em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" } }, "registryDependencies": [ "https://glasscn.app/r/font-geist.json", "https://glasscn.app/r/font-heading-geist.json", "https://glasscn.app/r/font-mono-geist-mono.json" ] }, { "name": "type-editorial", "type": "registry:theme", "title": "Editorial type", "description": "Instrument Serif headlines over Inter, generous leading — for reading. Sets the type scale, leading, weights, case and numerals.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-text-scale": "1", "glass-type-ratio": "1.333", "glass-leading": "1.7", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "400", "glass-heading-tracking": "-0.01em", "glass-heading-leading": "1.05", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "400", "glass-display-tracking": "-0.02em", "glass-numeric": "oldstyle-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" }, "dark": { "glass-text-scale": "1", "glass-type-ratio": "1.333", "glass-leading": "1.7", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "400", "glass-heading-tracking": "-0.01em", "glass-heading-leading": "1.05", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "400", "glass-display-tracking": "-0.02em", "glass-numeric": "oldstyle-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" } }, "registryDependencies": [ "https://glasscn.app/r/font-inter.json", "https://glasscn.app/r/font-heading-instrument-serif.json", "https://glasscn.app/r/font-mono-jetbrains-mono.json" ] }, { "name": "type-friendly", "type": "registry:theme", "title": "Friendly type", "description": "Rounded Nunito throughout, heavy titles. Sets the type scale, leading, weights, case and numerals.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-text-scale": "1", "glass-type-ratio": "1.25", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "500", "glass-heading-weight": "800", "glass-heading-tracking": "-0.01em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "900", "glass-display-tracking": "-0.03em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" }, "dark": { "glass-text-scale": "1", "glass-type-ratio": "1.25", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "500", "glass-heading-weight": "800", "glass-heading-tracking": "-0.01em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "900", "glass-display-tracking": "-0.03em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" } }, "registryDependencies": [ "https://glasscn.app/r/font-nunito.json", "https://glasscn.app/r/font-heading-nunito.json" ] }, { "name": "type-technical", "type": "registry:theme", "title": "Technical type", "description": "IBM Plex Sans, Space Grotesk caps titles, JetBrains Mono figures. Sets the type scale, leading, weights, case and numerals.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-text-scale": "1", "glass-type-ratio": "1.2", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "600", "glass-heading-tracking": "0.04em", "glass-heading-leading": "1.15", "glass-heading-case": "uppercase", "glass-heading-wrap": "balance", "glass-display-weight": "500", "glass-display-tracking": "-0.02em", "glass-numeric": "tabular-nums slashed-zero", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" }, "dark": { "glass-text-scale": "1", "glass-type-ratio": "1.2", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "600", "glass-heading-tracking": "0.04em", "glass-heading-leading": "1.15", "glass-heading-case": "uppercase", "glass-heading-wrap": "balance", "glass-display-weight": "500", "glass-display-tracking": "-0.02em", "glass-numeric": "tabular-nums slashed-zero", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" } }, "registryDependencies": [ "https://glasscn.app/r/font-ibm-plex-sans.json", "https://glasscn.app/r/font-heading-space-grotesk.json", "https://glasscn.app/r/font-mono-jetbrains-mono.json" ] }, { "name": "type-classic", "type": "registry:theme", "title": "Classic type", "description": "Playfair Display over Newsreader — a book page. Sets the type scale, leading, weights, case and numerals.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-text-scale": "1.06", "glass-type-ratio": "1.414", "glass-leading": "1.75", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "700", "glass-heading-tracking": "0em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.03em", "glass-numeric": "oldstyle-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" }, "dark": { "glass-text-scale": "1.06", "glass-type-ratio": "1.414", "glass-leading": "1.75", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "700", "glass-heading-tracking": "0em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "700", "glass-display-tracking": "-0.03em", "glass-numeric": "oldstyle-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" } }, "registryDependencies": [ "https://glasscn.app/r/font-newsreader.json", "https://glasscn.app/r/font-heading-playfair-display.json", "https://glasscn.app/r/font-mono-ibm-plex-mono.json" ] }, { "name": "type-grotesk", "type": "registry:theme", "title": "Grotesk type", "description": "Bricolage Grotesque headlines, DM Sans body — loud and confident. Sets the type scale, leading, weights, case and numerals.", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-text-scale": "1", "glass-type-ratio": "1.333", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "750", "glass-heading-tracking": "-0.035em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "800", "glass-display-tracking": "-0.05em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" }, "dark": { "glass-text-scale": "1", "glass-type-ratio": "1.333", "glass-leading": "1.6", "glass-tracking": "0em", "glass-body-weight": "400", "glass-heading-weight": "750", "glass-heading-tracking": "-0.035em", "glass-heading-leading": "1.15", "glass-heading-case": "none", "glass-heading-wrap": "balance", "glass-display-weight": "800", "glass-display-tracking": "-0.05em", "glass-numeric": "tabular-nums", "glass-font-features": "normal", "glass-measure": "68ch", "glass-underline-offset": "0.22em" } }, "registryDependencies": [ "https://glasscn.app/r/font-dm-sans.json", "https://glasscn.app/r/font-heading-bricolage-grotesque.json", "https://glasscn.app/r/font-mono-dm-mono.json" ] }, { "name": "density-compact", "type": "registry:theme", "title": "Compact density", "description": "Scales control heights, paddings and card spacing (×0.85).", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-density": "0.85" }, "dark": { "glass-density": "0.85" } } }, { "name": "density-default", "type": "registry:theme", "title": "Default density", "description": "Scales control heights, paddings and card spacing (×1).", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-density": "1" }, "dark": { "glass-density": "1" } } }, { "name": "density-comfortable", "type": "registry:theme", "title": "Comfortable density", "description": "Scales control heights, paddings and card spacing (×1.15).", "categories": [ "glass", "themes" ], "cssVars": { "light": { "glass-density": "1.15" }, "dark": { "glass-density": "1.15" } } }, { "name": "font-geist", "type": "registry:font", "title": "Geist", "description": "Geist as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Geist Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Geist", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/geist" } }, { "name": "font-heading-geist", "type": "registry:font", "title": "Geist (headings)", "description": "Geist as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Geist Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Geist", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/geist" } }, { "name": "font-inter", "type": "registry:font", "title": "Inter", "description": "Inter as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Inter Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Inter", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/inter" } }, { "name": "font-heading-inter", "type": "registry:font", "title": "Inter (headings)", "description": "Inter as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Inter Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Inter", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/inter" } }, { "name": "font-figtree", "type": "registry:font", "title": "Figtree", "description": "Figtree as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Figtree Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Figtree", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/figtree" } }, { "name": "font-heading-figtree", "type": "registry:font", "title": "Figtree (headings)", "description": "Figtree as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Figtree Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Figtree", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/figtree" } }, { "name": "font-manrope", "type": "registry:font", "title": "Manrope", "description": "Manrope as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Manrope", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/manrope" } }, { "name": "font-heading-manrope", "type": "registry:font", "title": "Manrope (headings)", "description": "Manrope as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Manrope", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/manrope" } }, { "name": "font-dm-sans", "type": "registry:font", "title": "DM Sans", "description": "DM Sans as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"DM Sans Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "DM_Sans", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/dm-sans" } }, { "name": "font-heading-dm-sans", "type": "registry:font", "title": "DM Sans (headings)", "description": "DM Sans as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"DM Sans Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "DM_Sans", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/dm-sans" } }, { "name": "font-plus-jakarta-sans", "type": "registry:font", "title": "Plus Jakarta Sans", "description": "Plus Jakarta Sans as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Plus Jakarta Sans Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Plus_Jakarta_Sans", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/plus-jakarta-sans" } }, { "name": "font-heading-plus-jakarta-sans", "type": "registry:font", "title": "Plus Jakarta Sans (headings)", "description": "Plus Jakarta Sans as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Plus Jakarta Sans Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Plus_Jakarta_Sans", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/plus-jakarta-sans" } }, { "name": "font-outfit", "type": "registry:font", "title": "Outfit", "description": "Outfit as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Outfit Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Outfit", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/outfit" } }, { "name": "font-heading-outfit", "type": "registry:font", "title": "Outfit (headings)", "description": "Outfit as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Outfit Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Outfit", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/outfit" } }, { "name": "font-sora", "type": "registry:font", "title": "Sora", "description": "Sora as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Sora Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Sora", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/sora" } }, { "name": "font-heading-sora", "type": "registry:font", "title": "Sora (headings)", "description": "Sora as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Sora Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Sora", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/sora" } }, { "name": "font-onest", "type": "registry:font", "title": "Onest", "description": "Onest as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Onest Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Onest", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/onest" } }, { "name": "font-heading-onest", "type": "registry:font", "title": "Onest (headings)", "description": "Onest as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Onest Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Onest", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/onest" } }, { "name": "font-ibm-plex-sans", "type": "registry:font", "title": "IBM Plex Sans", "description": "IBM Plex Sans as your app's body font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"IBM Plex Sans Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "IBM_Plex_Sans", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/ibm-plex-sans" } }, { "name": "font-heading-ibm-plex-sans", "type": "registry:font", "title": "IBM Plex Sans (headings)", "description": "IBM Plex Sans as your app's heading font (sans).", "categories": [ "glass", "fonts" ], "font": { "family": "\"IBM Plex Sans Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "IBM_Plex_Sans", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/ibm-plex-sans" } }, { "name": "font-nunito", "type": "registry:font", "title": "Nunito", "description": "Nunito as your app's body font (rounded).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Nunito Variable\", ui-rounded, ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Nunito", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/nunito" } }, { "name": "font-heading-nunito", "type": "registry:font", "title": "Nunito (headings)", "description": "Nunito as your app's heading font (rounded).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Nunito Variable\", ui-rounded, ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Nunito", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/nunito" } }, { "name": "font-heading-space-grotesk", "type": "registry:font", "title": "Space Grotesk (headings)", "description": "Space Grotesk as your app's heading font (display).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Space Grotesk Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Space_Grotesk", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/space-grotesk" } }, { "name": "font-space-grotesk", "type": "registry:font", "title": "Space Grotesk", "description": "Space Grotesk as your app's body font (display).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Space Grotesk Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Space_Grotesk", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/space-grotesk" } }, { "name": "font-heading-bricolage-grotesque", "type": "registry:font", "title": "Bricolage Grotesque (headings)", "description": "Bricolage Grotesque as your app's heading font (display).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Bricolage Grotesque Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Bricolage_Grotesque", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/bricolage-grotesque" } }, { "name": "font-bricolage-grotesque", "type": "registry:font", "title": "Bricolage Grotesque", "description": "Bricolage Grotesque as your app's body font (display).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Bricolage Grotesque Variable\", ui-sans-serif, system-ui, sans-serif", "provider": "google", "import": "Bricolage_Grotesque", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/bricolage-grotesque" } }, { "name": "font-heading-fraunces", "type": "registry:font", "title": "Fraunces (headings)", "description": "Fraunces as your app's heading font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Fraunces Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Fraunces", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/fraunces" } }, { "name": "font-fraunces", "type": "registry:font", "title": "Fraunces", "description": "Fraunces as your app's body font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Fraunces Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Fraunces", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/fraunces" } }, { "name": "font-heading-instrument-serif", "type": "registry:font", "title": "Instrument Serif (headings)", "description": "Instrument Serif as your app's heading font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Instrument Serif\", ui-serif, Georgia, serif", "provider": "google", "import": "Instrument_Serif", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "weight": [ "400" ], "subsets": [ "latin" ], "dependency": "@fontsource/instrument-serif" } }, { "name": "font-instrument-serif", "type": "registry:font", "title": "Instrument Serif", "description": "Instrument Serif as your app's body font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Instrument Serif\", ui-serif, Georgia, serif", "provider": "google", "import": "Instrument_Serif", "variable": "--font-sans", "weight": [ "400" ], "subsets": [ "latin" ], "dependency": "@fontsource/instrument-serif" } }, { "name": "font-heading-newsreader", "type": "registry:font", "title": "Newsreader (headings)", "description": "Newsreader as your app's heading font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Newsreader Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Newsreader", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/newsreader" } }, { "name": "font-newsreader", "type": "registry:font", "title": "Newsreader", "description": "Newsreader as your app's body font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Newsreader Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Newsreader", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/newsreader" } }, { "name": "font-heading-playfair-display", "type": "registry:font", "title": "Playfair Display (headings)", "description": "Playfair Display as your app's heading font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Playfair Display Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Playfair_Display", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/playfair-display" } }, { "name": "font-playfair-display", "type": "registry:font", "title": "Playfair Display", "description": "Playfair Display as your app's body font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Playfair Display Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Playfair_Display", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/playfair-display" } }, { "name": "font-heading-lora", "type": "registry:font", "title": "Lora (headings)", "description": "Lora as your app's heading font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Lora Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Lora", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/lora" } }, { "name": "font-lora", "type": "registry:font", "title": "Lora", "description": "Lora as your app's body font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Lora Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Lora", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/lora" } }, { "name": "font-heading-source-serif-4", "type": "registry:font", "title": "Source Serif 4 (headings)", "description": "Source Serif 4 as your app's heading font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Source Serif 4 Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Source_Serif_4", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "subsets": [ "latin" ], "dependency": "@fontsource-variable/source-serif-4" } }, { "name": "font-source-serif-4", "type": "registry:font", "title": "Source Serif 4", "description": "Source Serif 4 as your app's body font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Source Serif 4 Variable\", ui-serif, Georgia, serif", "provider": "google", "import": "Source_Serif_4", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "@fontsource-variable/source-serif-4" } }, { "name": "font-heading-ibm-plex-serif", "type": "registry:font", "title": "IBM Plex Serif (headings)", "description": "IBM Plex Serif as your app's heading font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"IBM Plex Serif\", ui-serif, Georgia, serif", "provider": "google", "import": "IBM_Plex_Serif", "variable": "--font-heading", "selector": "h1, h2, h3, h4, h5, h6", "weight": [ "400", "500", "600", "700" ], "subsets": [ "latin" ], "dependency": "@fontsource/ibm-plex-serif" } }, { "name": "font-ibm-plex-serif", "type": "registry:font", "title": "IBM Plex Serif", "description": "IBM Plex Serif as your app's body font (serif).", "categories": [ "glass", "fonts" ], "font": { "family": "\"IBM Plex Serif\", ui-serif, Georgia, serif", "provider": "google", "import": "IBM_Plex_Serif", "variable": "--font-sans", "weight": [ "400", "500", "600", "700" ], "subsets": [ "latin" ], "dependency": "@fontsource/ibm-plex-serif" } }, { "name": "font-mono-geist-mono", "type": "registry:font", "title": "Geist Mono (mono)", "description": "Geist Mono as your app's monospace font (mono).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Geist Mono Variable\", ui-monospace, SFMono-Regular, Menlo, monospace", "provider": "google", "import": "Geist_Mono", "variable": "--font-mono", "selector": "code, kbd, samp, pre", "subsets": [ "latin" ], "dependency": "@fontsource-variable/geist-mono" } }, { "name": "font-mono-jetbrains-mono", "type": "registry:font", "title": "JetBrains Mono (mono)", "description": "JetBrains Mono as your app's monospace font (mono).", "categories": [ "glass", "fonts" ], "font": { "family": "\"JetBrains Mono Variable\", ui-monospace, SFMono-Regular, Menlo, monospace", "provider": "google", "import": "JetBrains_Mono", "variable": "--font-mono", "selector": "code, kbd, samp, pre", "subsets": [ "latin" ], "dependency": "@fontsource-variable/jetbrains-mono" } }, { "name": "font-mono-ibm-plex-mono", "type": "registry:font", "title": "IBM Plex Mono (mono)", "description": "IBM Plex Mono as your app's monospace font (mono).", "categories": [ "glass", "fonts" ], "font": { "family": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace", "provider": "google", "import": "IBM_Plex_Mono", "variable": "--font-mono", "selector": "code, kbd, samp, pre", "weight": [ "400", "500", "600" ], "subsets": [ "latin" ], "dependency": "@fontsource/ibm-plex-mono" } }, { "name": "font-mono-dm-mono", "type": "registry:font", "title": "DM Mono (mono)", "description": "DM Mono as your app's monospace font (mono).", "categories": [ "glass", "fonts" ], "font": { "family": "\"DM Mono\", ui-monospace, SFMono-Regular, Menlo, monospace", "provider": "google", "import": "DM_Mono", "variable": "--font-mono", "selector": "code, kbd, samp, pre", "weight": [ "400", "500" ], "subsets": [ "latin" ], "dependency": "@fontsource/dm-mono" } }, { "name": "font-mono-space-mono", "type": "registry:font", "title": "Space Mono (mono)", "description": "Space Mono as your app's monospace font (mono).", "categories": [ "glass", "fonts" ], "font": { "family": "\"Space Mono\", ui-monospace, SFMono-Regular, Menlo, monospace", "provider": "google", "import": "Space_Mono", "variable": "--font-mono", "selector": "code, kbd, samp, pre", "weight": [ "400", "700" ], "subsets": [ "latin" ], "dependency": "@fontsource/space-mono" } }, { "name": "aurora", "type": "registry:ui", "title": "Aurora", "description": "The living ground: three palette blobs drifting over the base colour. Pure CSS, reduced-motion aware.", "categories": [ "glass", "surfaces" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/aurora.tsx", "type": "registry:ui", "target": "@components/glass/aurora.tsx" } ] }, { "name": "glass", "type": "registry:ui", "title": "Glass", "description": "A frosted pane — the base every surface is made from. Intensity, tint and elevation variants; asChild.", "categories": [ "glass", "surfaces" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/glass.tsx", "type": "registry:ui", "target": "@components/glass/glass.tsx" } ] }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "shadcn's Card API on glass: header, title, description, action, content, footer.", "categories": [ "glass", "surfaces" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/card.tsx", "type": "registry:ui", "target": "@components/glass/card.tsx" } ] }, { "name": "theme-scope", "type": "registry:ui", "title": "Theme scope", "description": "Re-theme a subtree at runtime: a different palette, material, shape or scheme for one card, section or preview.", "categories": [ "glass", "surfaces" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/glass-theme.json" ], "files": [ { "path": "src/components/glass/theme-scope.tsx", "type": "registry:ui", "target": "@components/glass/theme-scope.tsx" } ] }, { "name": "typography", "type": "registry:ui", "title": "Typography", "description": "Heading, Text, Display, Blockquote, InlineCode, List and TextLink on the theme's modular scale — fonts, weights, case and numerals from the type tokens.", "categories": [ "glass", "typography" ], "dependencies": [ "cn", "radix-ui", "class-variance-authority" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/typography.tsx", "type": "registry:ui", "target": "@components/glass/typography.tsx" } ] }, { "name": "prose", "type": "registry:ui", "title": "Prose", "description": "Rich text (Markdown, MDX, CMS) set in the theme's type: headings, links, lists, quotes, code, tables.", "categories": [ "glass", "typography" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/prose.tsx", "type": "registry:ui", "target": "@components/glass/prose.tsx" } ], "css": { "@utility glass-prose": { "font-family": "var(--glass-font-sans, --theme(--font-sans, ui-sans-serif, system-ui, sans-serif))", "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 0))", "line-height": "var(--glass-leading)", "letter-spacing": "var(--glass-tracking)", "font-weight": "var(--glass-body-weight)", "font-feature-settings": "var(--glass-font-features)", "max-width": "var(--glass-measure)", "width": "100%", "min-width": "0", "overflow-wrap": "break-word", "color": "var(--foreground)", "& :where(h1, h2, h3, h4, h5, h6)": { "font-family": "var(--glass-font-heading, --theme(--font-heading, --theme(--font-sans, ui-sans-serif, system-ui, sans-serif)))", "font-weight": "var(--glass-heading-weight)", "letter-spacing": "var(--glass-heading-tracking)", "line-height": "var(--glass-heading-leading)", "text-transform": "var(--glass-heading-case)", "text-wrap": "var(--glass-heading-wrap)", "margin-top": "1.7em", "margin-bottom": "0.55em" }, "& :where(h1)": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 4))" }, "& :where(h2)": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 3))" }, "& :where(h3)": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 2))" }, "& :where(h4)": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 1))" }, "& :where(h5, h6)": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 0))" }, "& :where(p, ul, ol, blockquote, pre, table, figure)": { "margin-block": "0.9em" }, "& :where(a)": { "color": "var(--primary)", "text-decoration-line": "underline", "text-underline-offset": "var(--glass-underline-offset)", "text-decoration-color": "color-mix(in oklch, var(--primary) 40%, transparent)" }, "& :where(a:hover)": { "text-decoration-color": "var(--primary)" }, "& :where(strong)": { "font-weight": "650" }, "& :where(ul)": { "list-style-type": "disc", "padding-left": "1.4em" }, "& :where(ol)": { "list-style-type": "decimal", "padding-left": "1.4em", "font-variant-numeric": "var(--glass-numeric)" }, "& :where(li)": { "margin-block": "0.3em" }, "& :where(li)::marker": { "color": "var(--primary)" }, "& :where(blockquote)": { "border-left": "3px solid var(--primary)", "padding-left": "1em", "font-family": "var(--glass-font-heading, --theme(--font-heading, --theme(--font-sans, ui-sans-serif, system-ui, sans-serif)))", "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), 1))", "line-height": "var(--glass-heading-leading)", "color": "var(--muted-foreground)" }, "& :where(code)": { "font-family": "var(--glass-font-mono, --theme(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace))", "font-size": "0.88em", "background-color": "color-mix(in oklch, var(--glass-fill-tint) var(--glass-fill-opacity), transparent)", "border-radius": "calc(var(--glass-radius-control) * 0.5)", "padding": "0.15em 0.4em" }, "& :where(pre)": { "font-family": "var(--glass-font-mono, --theme(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace))", "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), -1))", "line-height": "1.6", "background-color": "color-mix(in oklch, var(--glass-tint) var(--glass-opacity-subtle), transparent)", "border": "var(--glass-border-width) solid color-mix(in oklch, var(--glass-border-color) var(--glass-border-opacity), transparent)", "border-radius": "var(--glass-radius-control)", "padding": "1em 1.2em", "overflow-x": "auto" }, "& :where(pre code)": { "background-color": "transparent", "padding": "0", "font-size": "inherit" }, "& :where(hr)": { "border": "0", "border-top": "1px solid color-mix(in oklch, var(--foreground) 10%, transparent)", "margin-block": "2em" }, "& :where(table)": { "width": "100%", "border-collapse": "collapse", "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), -1))", "font-variant-numeric": "var(--glass-numeric)" }, "& :where(th, td)": { "padding": "0.55em 0.75em", "border-bottom": "1px solid color-mix(in oklch, var(--foreground) 10%, transparent)", "text-align": "left" }, "& :where(th)": { "font-weight": "600" }, "& :where(img, video)": { "border-radius": "var(--glass-radius-control)" }, "& :where(figcaption)": { "font-size": "calc(1rem * var(--glass-text-scale) * pow(var(--glass-type-ratio), -1))", "color": "var(--muted-foreground)", "margin-top": "0.5em" }, "& > :first-child": { "margin-top": "0" }, "& > :last-child": { "margin-bottom": "0" } } } }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "shadcn's Button with glass, tinted and secondary variants, capsule or rounded, squash on press.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui", "class-variance-authority" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/button.tsx", "type": "registry:ui", "target": "@components/glass/button.tsx" } ] }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Small capsule labels: solid, tinted, glass, secondary, outline, destructive.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui", "class-variance-authority" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/badge.tsx", "type": "registry:ui", "target": "@components/glass/badge.tsx" } ] }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "A filled field for glass: soft fill, accent caret and focus ring.", "categories": [ "glass", "controls" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/input.tsx", "type": "registry:ui", "target": "@components/glass/input.tsx" } ] }, { "name": "textarea", "type": "registry:ui", "title": "Textarea", "description": "A filled, auto-growing text area for glass.", "categories": [ "glass", "controls" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/textarea.tsx", "type": "registry:ui", "target": "@components/glass/textarea.tsx" } ] }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "An accessible label.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/label.tsx", "type": "registry:ui", "target": "@components/glass/label.tsx" } ] }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "The iOS switch: capsule track fills with the accent, white knob springs across.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/switch.tsx", "type": "registry:ui", "target": "@components/glass/switch.tsx" } ] }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "shadcn's Checkbox on glass: a soft box that fills with the accent, with an indeterminate dash.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui", "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/checkbox.tsx", "type": "registry:ui", "target": "@components/glass/checkbox.tsx" } ] }, { "name": "segmented-control", "type": "registry:ui", "title": "Segmented control", "description": "The iOS segmented control: one raised thumb slides to the chosen segment; always has a selection.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/use-sliding-indicator.json" ], "files": [ { "path": "src/components/glass/segmented-control.tsx", "type": "registry:ui", "target": "@components/glass/segmented-control.tsx" } ] }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Tabs with a sliding pill (glass capsule, plain) or a sliding underline.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui", "class-variance-authority" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/use-sliding-indicator.json" ], "files": [ { "path": "src/components/glass/tabs.tsx", "type": "registry:ui", "target": "@components/glass/tabs.tsx" } ] }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "A soft track, accent range and white glass knobs. Ranges supported.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/slider.tsx", "type": "registry:ui", "target": "@components/glass/slider.tsx" } ] }, { "name": "progress", "type": "registry:ui", "title": "Progress", "description": "A capsule bar filling from the second chart colour into the accent.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/progress.tsx", "type": "registry:ui", "target": "@components/glass/progress.tsx" } ] }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "Keycaps on glass, singly or grouped.", "categories": [ "glass", "controls" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/kbd.tsx", "type": "registry:ui", "target": "@components/glass/kbd.tsx" } ] }, { "name": "separator", "type": "registry:ui", "title": "Separator", "description": "A hairline that reads on glass.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/separator.tsx", "type": "registry:ui", "target": "@components/glass/separator.tsx" } ] }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "shadcn's Avatar on glass: a round photo with a hairline rim, initials on a soft fill, and overlapping groups.", "categories": [ "glass", "controls" ], "dependencies": [ "cn", "radix-ui", "class-variance-authority" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/avatar.tsx", "type": "registry:ui", "target": "@components/glass/avatar.tsx" } ] }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "A strong-glass modal over a dimmed, softened page.", "categories": [ "glass", "overlays" ], "dependencies": [ "cn", "radix-ui", "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/button.json" ], "files": [ { "path": "src/components/glass/dialog.tsx", "type": "registry:ui", "target": "@components/glass/dialog.tsx" } ] }, { "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "A floating glass panel that slides in from any edge, inset like an iPad sheet.", "categories": [ "glass", "overlays" ], "dependencies": [ "cn", "radix-ui", "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/button.json" ], "files": [ { "path": "src/components/glass/sheet.tsx", "type": "registry:ui", "target": "@components/glass/sheet.tsx" } ] }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "Floating glass content anchored to a trigger.", "categories": [ "glass", "overlays" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/popover.tsx", "type": "registry:ui", "target": "@components/glass/popover.tsx" } ] }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "A small glass capsule on hover and focus.", "categories": [ "glass", "overlays" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/tooltip.tsx", "type": "registry:ui", "target": "@components/glass/tooltip.tsx" } ] }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown menu", "description": "A glass menu: items, checkbox and radio items, labels, shortcuts, submenus.", "categories": [ "glass", "overlays" ], "dependencies": [ "cn", "radix-ui", "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/dropdown-menu.tsx", "type": "registry:ui", "target": "@components/glass/dropdown-menu.tsx" } ] }, { "name": "toaster", "type": "registry:ui", "title": "Toaster", "description": "Sonner toasts dressed in glass.", "categories": [ "glass", "overlays" ], "dependencies": [ "cn", "sonner", "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/toaster.tsx", "type": "registry:ui", "target": "@components/glass/toaster.tsx" } ] }, { "name": "dock", "type": "registry:ui", "title": "Dock", "description": "The floating tab bar: a glass capsule of destinations with a sliding pill, plus a round action button.", "categories": [ "glass", "navigation" ], "dependencies": [ "cn", "radix-ui" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/use-sliding-indicator.json" ], "files": [ { "path": "src/components/glass/dock.tsx", "type": "registry:ui", "target": "@components/glass/dock.tsx" } ] }, { "name": "grouped-list", "type": "registry:ui", "title": "Grouped list", "description": "iOS Settings-style inset grouped rows on glass: headers, footers, icon tiles, values, chevrons.", "categories": [ "glass", "navigation" ], "dependencies": [ "cn", "radix-ui", "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/grouped-list.tsx", "type": "registry:ui", "target": "@components/glass/grouped-list.tsx" } ] }, { "name": "activity-rings", "type": "registry:ui", "title": "Activity rings", "description": "Concentric Activity-style rings that sweep in and lap past 100%. Server-component safe.", "categories": [ "glass", "data" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/activity-rings.tsx", "type": "registry:ui", "target": "@components/glass/activity-rings.tsx" } ] }, { "name": "progress-ring", "type": "registry:ui", "title": "Progress ring", "description": "One ring that closes around its content — a goal, a countdown, a seal.", "categories": [ "glass", "data" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/progress-ring.tsx", "type": "registry:ui", "target": "@components/glass/progress-ring.tsx" } ] }, { "name": "sparkline", "type": "registry:ui", "title": "Sparkline", "description": "A smooth measure over time that draws itself, with a soft area and the latest point lit.", "categories": [ "glass", "data" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/sparkline.tsx", "type": "registry:ui", "target": "@components/glass/sparkline.tsx" } ] }, { "name": "stat", "type": "registry:ui", "title": "Stat", "description": "A figure on a glass tile: icon, value, label, trend.", "categories": [ "glass", "data" ], "dependencies": [ "cn", "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/stat.tsx", "type": "registry:ui", "target": "@components/glass/stat.tsx" } ] }, { "name": "bar-list", "type": "registry:ui", "title": "Bar list", "description": "Ranked horizontal bars with the label inside and the value at the end — top habits, sources, pages.", "categories": [ "glass", "data" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/bar-list.tsx", "type": "registry:ui", "target": "@components/glass/bar-list.tsx" } ] }, { "name": "gauge", "type": "registry:ui", "title": "Gauge", "description": "A three-quarter meter with an optional target tick and the figure in its bowl. Server-component safe.", "categories": [ "glass", "data" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/gauge.tsx", "type": "registry:ui", "target": "@components/glass/gauge.tsx" } ] }, { "name": "tracker", "type": "registry:ui", "title": "Tracker", "description": "A row of status blocks — uptime, or a habit's last 30 days.", "categories": [ "glass", "data" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/tracker.tsx", "type": "registry:ui", "target": "@components/glass/tracker.tsx" } ] }, { "name": "category-bar", "type": "registry:ui", "title": "Category bar", "description": "A range split into coloured bands with a marker — a readiness score, a budget.", "categories": [ "glass", "data" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/category-bar.tsx", "type": "registry:ui", "target": "@components/glass/category-bar.tsx" } ] }, { "name": "heatmap", "type": "registry:ui", "title": "Heatmap", "description": "Days in week columns coloured by intensity — a contribution graph with month and weekday labels and a legend.", "categories": [ "glass", "data" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/heatmap.tsx", "type": "registry:ui", "target": "@components/glass/heatmap.tsx" } ] }, { "name": "chart", "type": "registry:ui", "title": "Chart", "description": "The chart host: TanStack Charts in a container that maps glass tokens — series colours from --chart-*, a glass-strong tooltip, inherited type — plus an HTML legend and chartColor().", "categories": [ "glass", "data" ], "dependencies": [ "cn", "@tanstack/charts", "d3-scale" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/chart.tsx", "type": "registry:ui", "target": "@components/glass/chart.tsx" } ] }, { "name": "area-chart", "type": "registry:ui", "title": "Area chart", "description": "Volume over time: gradient areas under a line per series, optionally stacked, with a grouped glass tooltip.", "categories": [ "glass", "data" ], "dependencies": [ "cn", "@tanstack/charts" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/chart.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/area-chart.tsx", "type": "registry:ui", "target": "@components/glass/area-chart.tsx" } ] }, { "name": "bar-chart", "type": "registry:ui", "title": "Bar chart", "description": "Amounts per category, grouped or stacked, vertical or horizontal, with theme-rounded bar ends.", "categories": [ "glass", "data" ], "dependencies": [ "cn", "@tanstack/charts" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/chart.json" ], "files": [ { "path": "src/components/glass/bar-chart.tsx", "type": "registry:ui", "target": "@components/glass/bar-chart.tsx" } ] }, { "name": "line-chart", "type": "registry:ui", "title": "Line chart", "description": "Measures over time, one smooth line per series, with a grouped glass tooltip and a crosshair.", "categories": [ "glass", "data" ], "dependencies": [ "cn", "@tanstack/charts" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/chart.json", "https://glasscn.app/r/glass-charts.json" ], "files": [ { "path": "src/components/glass/line-chart.tsx", "type": "registry:ui", "target": "@components/glass/line-chart.tsx" } ] }, { "name": "donut-chart", "type": "registry:ui", "title": "Donut chart", "description": "Parts of a whole as a ring of rounded slices, with content in the hole and a legend.", "categories": [ "glass", "data" ], "dependencies": [ "cn", "@tanstack/charts" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/chart.json" ], "files": [ { "path": "src/components/glass/donut-chart.tsx", "type": "registry:ui", "target": "@components/glass/donut-chart.tsx" } ] }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "shadcn's Table for glass: hairline rows, fill on hover and selection, muted headers, density-aware cells.", "categories": [ "glass", "data" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json" ], "files": [ { "path": "src/components/glass/table.tsx", "type": "registry:ui", "target": "@components/glass/table.tsx" } ] }, { "name": "data-table", "type": "registry:ui", "title": "Data table", "description": "A sortable, searchable, paginated table with row selection — TanStack Table v9 on the glass table.", "categories": [ "glass", "data" ], "dependencies": [ "cn", "@tanstack/react-table", "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/table.json", "https://glasscn.app/r/input.json", "https://glasscn.app/r/button.json", "https://glasscn.app/r/checkbox.json" ], "files": [ { "path": "src/components/glass/data-table.tsx", "type": "registry:ui", "target": "@components/glass/data-table.tsx" } ] }, { "name": "chat", "type": "registry:ui", "title": "Chat", "description": "A conversation in parts: a thread that sticks to the latest message, user and assistant bubbles that group into runs, receipts, day dividers, typing dots, quick replies and a composer where Enter sends.", "categories": [ "glass", "chat" ], "dependencies": [ "cn", "lucide-react", "class-variance-authority" ], "registryDependencies": [ "https://glasscn.app/r/glass-style.json", "https://glasscn.app/r/button.json" ], "files": [ { "path": "src/components/glass/chat.tsx", "type": "registry:ui", "target": "@components/glass/chat.tsx" } ] }, { "name": "dashboard-01", "type": "registry:block", "title": "Dashboard", "description": "Activity rings, stat tiles, a ranged sparkline and a 39-week heatmap.", "categories": [ "glass", "blocks" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/activity-rings.json", "https://glasscn.app/r/button.json", "https://glasscn.app/r/card.json", "https://glasscn.app/r/dropdown-menu.json", "https://glasscn.app/r/heatmap.json", "https://glasscn.app/r/segmented-control.json", "https://glasscn.app/r/sparkline.json", "https://glasscn.app/r/stat.json" ], "files": [ { "path": "src/components/blocks/dashboard-01.tsx", "type": "registry:component", "target": "@components/glass-blocks/dashboard-01.tsx" } ] }, { "name": "analytics-01", "type": "registry:block", "title": "Analytics", "description": "Stacked active minutes over a range, the training mix as a donut, a recovery gauge, top habits and a sortable table of recent sessions.", "categories": [ "glass", "blocks" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/area-chart.json", "https://glasscn.app/r/bar-list.json", "https://glasscn.app/r/card.json", "https://glasscn.app/r/data-table.json", "https://glasscn.app/r/donut-chart.json", "https://glasscn.app/r/gauge.json", "https://glasscn.app/r/segmented-control.json" ], "files": [ { "path": "src/components/blocks/analytics-01.tsx", "type": "registry:component", "target": "@components/glass-blocks/analytics-01.tsx" } ] }, { "name": "settings-01", "type": "registry:block", "title": "Settings", "description": "iOS Settings in glass: grouped rows, icon tiles, a switch, a segmented control and a slider.", "categories": [ "glass", "blocks" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/grouped-list.json", "https://glasscn.app/r/segmented-control.json", "https://glasscn.app/r/slider.json", "https://glasscn.app/r/switch.json" ], "files": [ { "path": "src/components/blocks/settings-01.tsx", "type": "registry:component", "target": "@components/glass-blocks/settings-01.tsx" } ] }, { "name": "auth-01", "type": "registry:block", "title": "Sign in", "description": "A strong-glass sign-in card with email, password and a passkey option.", "categories": [ "glass", "blocks" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/button.json", "https://glasscn.app/r/card.json", "https://glasscn.app/r/input.json", "https://glasscn.app/r/label.json", "https://glasscn.app/r/separator.json" ], "files": [ { "path": "src/components/blocks/auth-01.tsx", "type": "registry:component", "target": "@components/glass-blocks/auth-01.tsx" } ] }, { "name": "chat-01", "type": "registry:block", "title": "Chat", "description": "A conversation on glass: grouped turns with avatars, a read receipt, typing that resolves into a reply, quick replies and a floating composer.", "categories": [ "glass", "blocks" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://glasscn.app/r/avatar.json", "https://glasscn.app/r/button.json", "https://glasscn.app/r/card.json", "https://glasscn.app/r/chat.json" ], "files": [ { "path": "src/components/blocks/chat-01.tsx", "type": "registry:component", "target": "@components/glass-blocks/chat-01.tsx" } ] }, { "name": "native-tokens", "type": "registry:ui", "title": "Native tokens", "description": "The glasscn palettes and tokens for React Native, a GlassThemeProvider and useGlassTheme().", "categories": [ "glass", "native" ], "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/native/tokens.tsx", "type": "registry:ui", "target": "@components/glass/native/tokens.tsx" } ] }, { "name": "native-glass", "type": "registry:ui", "title": "Native glass", "description": "Frosted glass for Expo: Liquid Glass on iOS 26, blur on older iOS, backdrop-filter on web, a fill on Android.", "categories": [ "glass", "native" ], "dependencies": [ "expo-blur", "expo-glass-effect" ], "registryDependencies": [ "https://glasscn.app/r/native-tokens.json" ], "files": [ { "path": "registry/native/glass.tsx", "type": "registry:ui", "target": "@components/glass/native/glass.tsx" } ] }, { "name": "native-aurora", "type": "registry:ui", "title": "Native aurora", "description": "The drifting aurora for React Native, drawn with react-native-svg on the native driver.", "categories": [ "glass", "native" ], "dependencies": [ "react-native-svg" ], "registryDependencies": [ "https://glasscn.app/r/native-tokens.json" ], "files": [ { "path": "registry/native/aurora.tsx", "type": "registry:ui", "target": "@components/glass/native/aurora.tsx" } ] }, { "name": "native-press", "type": "registry:ui", "title": "Native press", "description": "The pressable everything is built on: spring squash, dim, haptic, hover lift.", "categories": [ "glass", "native" ], "dependencies": [ "expo-haptics" ], "registryDependencies": [], "files": [ { "path": "registry/native/press.tsx", "type": "registry:ui", "target": "@components/glass/native/press.tsx" } ] } ] }