HAIKU // NEXT
Setup Guide
One-time setup for using HAIKU // 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 HAIKU // 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-haiku-paper: #F3EFE7;
--color-haiku-paper-2: #EDE8DC;
--color-haiku-paper-3: #E5DFD0;
--color-haiku-ink: #1A1918;
--color-haiku-ink-2: #4A4540;
--color-haiku-ink-3: #8A847A;
--color-haiku-red: #BE3030;
--color-haiku-red-dark: #8C2020;
--color-haiku-border: #CEC8BA;
--color-haiku-border-soft: #E0DAD0;
/* ── Fonts ─────────────────────────────────────────────── */
--font-display: var(--font-cormorant);
--font-body: var(--font-inter);
--font-kana: var(--font-noto-serif-jp);
/* ── Animations ────────────────────────────────────────── */
--animate-ticker: ticker-scroll 22s 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 ────────────────────────────────────────────── */
.haiku-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body), sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.05em;
border: none;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
text-decoration: none;
}
.haiku-btn-sm { height: 32px; padding: 0 18px; font-size: 12px; }
.haiku-btn-md { height: 40px; padding: 0 24px; font-size: 13px; }
.haiku-btn-lg { height: 44px; padding: 0 28px; font-size: 13px; }
.haiku-btn-primary {
background: var(--color-haiku-ink);
color: var(--color-haiku-paper);
}
.haiku-btn-primary:hover { background: var(--color-haiku-red); color: #fff; }
.haiku-btn-secondary {
background: transparent;
color: var(--color-haiku-ink);
border: 1px solid var(--color-haiku-border);
}
.haiku-btn-secondary:hover { border-color: var(--color-haiku-ink); }
.haiku-btn-ghost {
background: transparent;
color: var(--color-haiku-ink-2);
border: 1px solid var(--color-haiku-border);
}
.haiku-btn-ghost:hover { border-color: var(--color-haiku-ink); color: var(--color-haiku-ink); }CSS
/* ── Badges ─────────────────────────────────────────────── */
.haiku-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.haiku-badge-ink { border: 1px solid var(--color-haiku-border); color: var(--color-haiku-ink-3); }
.haiku-badge-red { border: 1px solid var(--color-haiku-red); color: var(--color-haiku-red); }
.haiku-badge-parchment{ background: var(--color-haiku-paper-2); border: 1px solid var(--color-haiku-border); color: var(--color-haiku-ink-2); }
.haiku-badge-ghost { background: transparent; border: 1px solid var(--color-haiku-border-soft); color: var(--color-haiku-ink-3); }CSS
/* ── Cards ──────────────────────────────────────────────── */
.haiku-card {
background: var(--color-haiku-paper);
border: 1px solid var(--color-haiku-border);
}
.haiku-card-header {
padding: 20px 24px;
border-bottom: 1px solid var(--color-haiku-border);
}
.haiku-card-body {
padding: 24px;
}
.haiku-card-footer {
padding: 16px 24px;
border-top: 1px solid var(--color-haiku-border);
}CSS
/* ── Pullquote ──────────────────────────────────────────── */
.haiku-pullquote {
padding: 28px 0;
}
.haiku-pullquote-rule {
height: 1px;
background: var(--color-haiku-border);
margin-bottom: 24px;
}
.haiku-pullquote-quote {
font-family: var(--font-display), serif;
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-weight: 300;
font-style: italic;
color: var(--color-haiku-ink);
line-height: 1.4;
margin-bottom: 16px;
}
.haiku-pullquote-attr {
font-size: 11px;
font-weight: 400;
color: var(--color-haiku-ink-3);
letter-spacing: 0.06em;
}CSS
/* ── Seal Component ─────────────────────────────────────── */
.haiku-seal {
border-radius: 50%;
border: 2px solid var(--color-haiku-red);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
position: relative;
flex-shrink: 0;
}
.haiku-seal::before {
content: '';
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px solid var(--color-haiku-red);
opacity: 0.25;
}
.haiku-seal-neutral {
border-color: var(--color-haiku-border);
}
.haiku-seal-neutral::before { border-color: var(--color-haiku-border); }
.seal-kanji {
font-family: var(--font-kana), serif;
font-weight: 400;
color: var(--color-haiku-red);
line-height: 1;
}
.seal-kanji-neutral { color: var(--color-haiku-ink-3); }
.seal-label {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-haiku-red);
opacity: 0.6;
}
.seal-label-neutral { color: var(--color-haiku-ink-3); }CSS
/* ── Text Variants ──────────────────────────────────────── */
.haiku-text-body { font-size: 14px; font-weight: 300; color: var(--color-haiku-ink-2); line-height: 1.75; }
.haiku-text-caption { font-size: 12px; font-weight: 300; color: var(--color-haiku-ink-3); }
.haiku-text-label { font-size: 10px; font-weight: 600; color: var(--color-haiku-ink-3); letter-spacing: 0.14em; text-transform: uppercase; }
.haiku-text-code { font-family: monospace; font-size: 12px; color: var(--color-haiku-ink-2); }HAIKU // NEXT Components
Button
Japanese-inspired light-mode button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Minimalist badge for tags and labels in the HAIKU Japanese-inspired light palette.
Card
Composable light card with header, body, and footer sub-components in the HAIKU minimal Japanese aesthetic.
Pullquote
Serene editorial blockquote with a ruled left accent, typographic quote marks, and an optional attribution citation.
Seal
Circular hanko-style seal displaying a kanji character with an optional label. Available in red and neutral variants at configurable sizes.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the HAIKU minimal Japanese light palette.