VAULT // NEXT
Setup Guide
One-time setup for using VAULT // 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 VAULT // NEXT design tokens to your globals.css. These define colors, fonts, and animation tokens used by every component in the theme.
CSS
@theme {
/* Base surfaces */
--color-vault-base: #0D1117;
--color-vault-surface: #161B22;
--color-vault-elevated: #1C2128;
--color-vault-overlay: #21262D;
/* Borders */
--color-vault-border: #30363D;
--color-vault-border-subtle: #21262D;
/* Text */
--color-vault-text: #E6EDF3;
--color-vault-text-sec: #8B949E;
--color-vault-text-muted: #484F58;
/* Accent — green */
--color-vault-accent: #00D97E;
--color-vault-accent-dim: rgba(0, 217, 126, 0.12);
--color-vault-accent-glow: rgba(0, 217, 126, 0.25);
/* Syntax / status colors */
--color-vault-red: #FF7B72;
--color-vault-yellow: #E3B341;
--color-vault-blue: #79C0FF;
--color-vault-purple: #D2A8FF;
--color-vault-green-syn: #7EE787;
/* Fonts */
--font-sans: var(--font-inter), system-ui, sans-serif;
--font-mono: var(--font-jetbrains), 'Fira Code', monospace;
/* Layout */
--vault-sidebar-w: 240px;
--vault-topbar-h: 52px;
--vault-toc-w: 200px;
}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
/* ── BUTTON ───────────────────────────────────────────────────── */
.vault-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
border-radius: 6px;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
.vault-btn--sm { font-size: 12px; padding: 5px 12px; }
.vault-btn--md { font-size: 13px; padding: 7px 16px; }
.vault-btn--lg { font-size: 14px; padding: 10px 22px; }
.vault-btn--primary {
background: #00D97E;
border: 1px solid #00D97E;
color: #0D1117;
}
.vault-btn--primary:hover {
background: #00f090;
border-color: #00f090;
box-shadow: 0 0 12px rgba(0, 217, 126, 0.3);
}
.vault-btn--secondary {
background: #1C2128;
border: 1px solid #30363D;
color: #E6EDF3;
}
.vault-btn--secondary:hover {
background: #21262D;
border-color: #484F58;
}
.vault-btn--ghost {
background: transparent;
border: 1px solid transparent;
color: #8B949E;
}
.vault-btn--ghost:hover {
background: #1C2128;
border-color: #30363D;
color: #E6EDF3;
}
/* ── COMPONENTS PAGE ──────────────────────────────────────────── */
.vault-btn-full {
width: 100%;
justify-content: center;
margin-top: 4px;
}CSS
/* ── BADGE ────────────────────────────────────────────────────── */
.vault-badge {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 4px;
}
.vault-badge--green {
color: #00D97E;
background: rgba(0, 217, 126, 0.12);
border: 1px solid rgba(0, 217, 126, 0.25);
}
.vault-badge--blue {
color: #79C0FF;
background: rgba(121, 192, 255, 0.1);
border: 1px solid rgba(121, 192, 255, 0.25);
}
.vault-badge--yellow {
color: #E3B341;
background: rgba(227, 179, 65, 0.1);
border: 1px solid rgba(227, 179, 65, 0.25);
}
.vault-badge--red {
color: #FF7B72;
background: rgba(255, 123, 114, 0.1);
border: 1px solid rgba(255, 123, 114, 0.25);
}
.vault-badge--purple {
color: #D2A8FF;
background: rgba(210, 168, 255, 0.1);
border: 1px solid rgba(210, 168, 255, 0.25);
}
.vault-badge--muted {
color: #8B949E;
background: #1C2128;
border: 1px solid #30363D;
}CSS
/* ── CALLOUT ──────────────────────────────────────────────────── */
.vault-callout {
display: flex;
gap: 12px;
padding: 14px 16px;
border-radius: 8px;
border: 1px solid;
font-size: 13.5px;
line-height: 1.6;
}
.vault-callout--info {
background: rgba(121, 192, 255, 0.07);
border-color: rgba(121, 192, 255, 0.25);
color: #8B949E;
}
.vault-callout--warn {
background: rgba(227, 179, 65, 0.07);
border-color: rgba(227, 179, 65, 0.25);
color: #8B949E;
}
.vault-callout--tip {
background: rgba(0, 217, 126, 0.07);
border-color: rgba(0, 217, 126, 0.25);
color: #8B949E;
}
.vault-callout--danger {
background: rgba(255, 123, 114, 0.07);
border-color: rgba(255, 123, 114, 0.25);
color: #8B949E;
}
.vault-callout-icon { flex-shrink: 0; margin-top: 1px; }
.vault-callout-icon svg { width: 16px; height: 16px; }
.vault-callout--info .vault-callout-icon svg { color: #79C0FF; }
.vault-callout--warn .vault-callout-icon svg { color: #E3B341; }
.vault-callout--tip .vault-callout-icon svg { color: #00D97E; }
.vault-callout--danger .vault-callout-icon svg { color: #FF7B72; }
.vault-callout strong { color: #E6EDF3; font-weight: 500; }
.vault-callout code {
font-family: var(--font-mono);
font-size: 12px;
background: rgba(255,255,255,0.07);
border-radius: 3px;
padding: 1px 5px;
color: #E6EDF3;
}CSS
/* ── BADGE ────────────────────────────────────────────────────── */
.vault-badge {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 4px;
}
.vault-badge--green {
color: #00D97E;
background: rgba(0, 217, 126, 0.12);
border: 1px solid rgba(0, 217, 126, 0.25);
}
.vault-badge--blue {
color: #79C0FF;
background: rgba(121, 192, 255, 0.1);
border: 1px solid rgba(121, 192, 255, 0.25);
}
.vault-badge--yellow {
color: #E3B341;
background: rgba(227, 179, 65, 0.1);
border: 1px solid rgba(227, 179, 65, 0.25);
}
.vault-badge--red {
color: #FF7B72;
background: rgba(255, 123, 114, 0.1);
border: 1px solid rgba(255, 123, 114, 0.25);
}
.vault-badge--purple {
color: #D2A8FF;
background: rgba(210, 168, 255, 0.1);
border: 1px solid rgba(210, 168, 255, 0.25);
}
.vault-badge--muted {
color: #8B949E;
background: #1C2128;
border: 1px solid #30363D;
}
/* ── CARD ─────────────────────────────────────────────────────── */
.vault-card {
background: #161B22;
border: 1px solid #30363D;
border-radius: 8px;
padding: 20px;
transition: border-color 0.15s, background 0.15s;
}
.vault-card:hover {
border-color: #484F58;
background: #1C2128;
}
.vault-card--accent:hover {
border-color: #00D97E;
}
.vault-card-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.vault-card-icon {
width: 36px;
height: 36px;
background: #21262D;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid #30363D;
}
.vault-card-icon svg { width: 18px; height: 18px; color: #00D97E; }
.vault-card-title {
font-size: 14px;
font-weight: 600;
color: #E6EDF3;
margin-bottom: 4px;
}
.vault-card-desc {
font-size: 13px;
color: #8B949E;
line-height: 1.55;
}
.vault-card-footer {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #21262D;
display: flex;
align-items: center;
justify-content: space-between;
}
.vault-card-arrow {
display: flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: #00D97E;
font-weight: 700;
text-decoration: none;
}
.vault-card-arrow svg { width: 11px; height: 11px; }CSS
/* ── CODE BLOCK ───────────────────────────────────────────────── */
.vault-code-block {
background: #161B22;
border: 1px solid #30363D;
border-radius: 8px;
overflow: hidden;
}
.vault-code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid #21262D;
background: #1C2128;
}
.vault-code-block-lang {
font-family: var(--font-mono);
font-size: 11px;
color: #484F58;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.vault-code-block-title {
font-family: var(--font-mono);
font-size: 11.5px;
color: #8B949E;
}
.vault-copy-btn {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 11px;
color: #484F58;
background: transparent;
border: 1px solid #30363D;
border-radius: 4px;
padding: 3px 8px;
cursor: pointer;
transition: color 0.12s, border-color 0.12s;
}
.vault-copy-btn:hover { color: #8B949E; border-color: #484F58; }
.vault-copy-btn svg { width: 11px; height: 11px; }
.vault-code-block-body {
padding: 16px 18px;
overflow-x: auto;
}
.vault-code-block-body::-webkit-scrollbar { height: 4px; }
.vault-code-block-body::-webkit-scrollbar-track { background: transparent; }
.vault-code-block-body::-webkit-scrollbar-thumb { background: #30363D; border-radius: 2px; }
.vault-code-block pre {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.7;
white-space: pre;
color: #E6EDF3;
}VAULT // NEXT Components
Button
Dark docs-style button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link for internal hrefs and a plain anchor for external links.
Badge
Semantic status badge with six color variants: green, blue, yellow, red, purple, and muted. Suited for version tags, API status labels, and changelog markers.
Callout
Inline callout block with four semantic variants: info, warn, tip, and danger. Each renders a matching icon and left-accent color for inline documentation alerts.
Card
Feature card with icon, title, optional badge, and description. Accepts an accent prop for a highlighted border variant. Icon set: book, code, key, zap, layers, terminal, shield, cpu.
CodeBlock
Syntax-highlighted code block with a header showing the language or file title and a one-click copy button. Client component with clipboard feedback.