GLASS // NEXT
Setup Guide
One-time setup for using GLASS // NEXT components. Add these to your project, then copy any component from the theme.
1
Install dependencies
The cn() utility combines clsx and tailwind-merge for conditional class names. Install both packages.
BASH
npm install clsx tailwind-merge2
Add utility function
Create lib/utils.ts with the cn() helper. Every component imports this for class name merging.
TS
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]): string {
return twMerge(clsx(inputs))
}3
Add design tokens
Add the GLASS // NEXT design tokens to your globals.css. These define colors, fonts, and animation tokens used by every component in the theme.
CSS
@theme {
/* ── Colors ─────────────────────────────────────────── */
--color-glass-deep: #020617;
--color-glass-navy: #0f172a;
--color-glass-navy-mid: #1e293b;
--color-glass-navy-light: #334155;
--color-glass-sky: #38bdf8;
--color-glass-sky-dim: #0ea5e9;
--color-glass-sky-dark: #0284c7;
--color-glass-indigo: #818cf8;
--color-glass-indigo-dim: #6366f1;
--color-glass-indigo-dark: #4f46e5;
--color-glass-cyan: #22d3ee;
--color-glass-cyan-dim: #06b6d4;
--color-glass-cyan-dark: #0891b2;
--color-glass-violet: #a78bfa;
--color-glass-violet-dim: #8b5cf6;
--color-glass-violet-dark: #7c3aed;
--color-glass-emerald: #34d399;
--color-glass-emerald-dim: #10b981;
--color-glass-emerald-dark: #059669;
--color-glass-text: #f8fafc;
--color-glass-text-muted: #94a3b8;
--color-glass-text-faint: #475569;
--color-glass-panel: rgba(255, 255, 255, 0.06);
--color-glass-panel-hover: rgba(255, 255, 255, 0.09);
--color-glass-border: rgba(255, 255, 255, 0.10);
--color-glass-border-bright: rgba(255, 255, 255, 0.18);
/* ── Fonts ───────────────────────────────────────────── */
--font-display: var(--font-space-grotesk);
--font-body: var(--font-inter);
/* ── Animations ──────────────────────────────────────── */
--animate-float-slow: float-slow 8s ease-in-out infinite;
--animate-float-mid: float-mid 6s ease-in-out infinite 1.5s;
--animate-float-fast: float-fast 5s ease-in-out infinite 0.8s;
--animate-glow-pulse: glow-pulse 3s ease-in-out infinite;
--animate-shimmer: shimmer 2.5s linear infinite;
}4
Add component styles
Each component may need its own CSS classes in your globals.css. Copy the styles for the components you use.
CSS
/* ─── Buttons ────────────────────────────────────────── */
.btn-base {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
line-height: 1;
letter-spacing: 0.01em;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
white-space: nowrap;
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
.btn-base:hover { transform: translateY(-1px); text-decoration: none; }
.btn-base:active { transform: translateY(0px) !important; }
.btn-sm { font-size: 0.8rem; padding: 8px 16px; }
.btn-md { font-size: 0.875rem; padding: 10px 22px; }
.btn-lg { font-size: 0.95rem; padding: 14px 30px; }
.btn-primary {
background: linear-gradient(135deg, var(--color-glass-sky-dim), var(--color-glass-indigo-dim));
color: white;
box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
border-color: rgba(56, 189, 248, 0.3);
}
.btn-primary:hover {
box-shadow: 0 0 32px rgba(56, 189, 248, 0.4);
color: white;
}
.btn-secondary {
background: var(--color-glass-panel);
color: var(--color-glass-sky);
border-color: var(--color-glass-border-bright);
backdrop-filter: blur(8px);
}
.btn-secondary:hover {
background: var(--color-glass-panel-hover);
color: var(--color-glass-sky);
box-shadow: 0 0 16px rgba(56, 189, 248, 0.12);
}
.btn-ghost {
background: transparent;
color: var(--color-glass-text-muted);
border-color: var(--color-glass-border);
}
.btn-ghost:hover { background: var(--color-glass-panel); color: var(--color-glass-text); }CSS
/* ─── Badges ─────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 600;
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 99px;
border: 1px solid transparent;
}
.badge--sky { background: rgba(56,189,248,0.10); color: var(--color-glass-sky); border-color: rgba(56,189,248,0.25); }
.badge--indigo { background: rgba(129,140,248,0.10); color: var(--color-glass-indigo); border-color: rgba(129,140,248,0.25); }
.badge--cyan { background: rgba(34,211,238,0.10); color: var(--color-glass-cyan); border-color: rgba(34,211,238,0.25); }
.badge--violet { background: rgba(167,139,250,0.10); color: var(--color-glass-violet); border-color: rgba(167,139,250,0.25); }
.badge--emerald { background: rgba(52,211,153,0.10); color: var(--color-glass-emerald); border-color: rgba(52,211,153,0.25); }CSS
/* ─── Features Section ───────────────────────────────── */
.glass-card {
background: var(--color-glass-panel);
border: 1px solid var(--color-glass-border);
border-radius: 20px;
padding: 28px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
position: relative;
overflow: hidden;
}
.glass-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%);
pointer-events: none;
}
.glass-card:hover {
background: var(--color-glass-panel-hover);
border-color: var(--color-glass-border-bright);
box-shadow: 0 0 30px rgba(56, 189, 248, 0.06), 0 8px 32px rgba(0,0,0,0.3);
}
.card-title {
font-weight: 600;
font-size: 1rem;
color: var(--color-glass-text);
margin-bottom: 8px;
line-height: 1.3;
font-family: var(--font-display);
}
.card-description {
font-size: 0.875rem;
font-weight: 400;
color: var(--color-glass-text-muted);
line-height: 1.65;
}CSS
/* ─── Text Variants ──────────────────────────────────── */
.text-body { font-size: 0.95rem; line-height: 1.75; font-weight: 400; color: var(--color-glass-text-muted); }
.text-caption { font-size: 0.8rem; font-weight: 400; color: var(--color-glass-text-muted); }
.text-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-glass-text-muted); }
.text-code { font-family: monospace; font-size: 0.85rem; color: var(--color-glass-sky); }GLASS // NEXT Components
Button
Glassmorphism button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Frosted-glass badge with sky, indigo, cyan, violet, and emerald variants for tags and status indicators.
Card
Composable glassmorphism card container with frosted-glass surface and header, body, and footer sub-components.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the GLASS dark glassmorphism palette.