ALOHA // NEXT
Setup Guide
One-time setup for using ALOHA // 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 ALOHA // 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-aloha-sand: #FFF9F0;
--color-aloha-sand-mid: #FFF0D9;
--color-aloha-cream: #FFFBF5;
--color-aloha-dark: #1A2E3B;
--color-aloha-dark-teal: #0D2B36;
--color-aloha-coral: #FF5F40;
--color-aloha-coral-light: #FF8066;
--color-aloha-coral-dark: #D94020;
--color-aloha-turquoise: #14B8C8;
--color-aloha-turquoise-light: #7FDDE8;
--color-aloha-turquoise-dark: #0A8A96;
--color-aloha-yellow: #FFCA3A;
--color-aloha-yellow-dark: #D4A200;
--color-aloha-green: #3DCA7E;
--color-aloha-green-dark: #28A362;
--color-aloha-pink: #FF85B3;
--color-aloha-pink-dark: #C94A88;
--color-aloha-text: #2C3E50;
--color-aloha-text-muted: #6B8299;
--color-aloha-white: #FFFFFF;
/* ── Fonts ───────────────────────────────────────────── */
--font-display: var(--font-pacifico);
--font-body: var(--font-nunito);
/* ── Animations ──────────────────────────────────────── */
--animate-blink: blink-cursor 0.8s step-end infinite;
--animate-wave-sway: wave-sway 5s ease-in-out infinite;
--animate-float: gentle-float 4s ease-in-out infinite;
--animate-pulse-soft: pulse-soft 2.5s ease-in-out 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: 800;
border: 3px solid transparent;
border-radius: 16px;
cursor: pointer;
text-decoration: none;
line-height: 1;
letter-spacing: 0.01em;
transition: transform 0.12s ease, box-shadow 0.12s ease;
white-space: nowrap;
}
.btn-base:hover { transform: translate(-2px, -2px); text-decoration: none; }
.btn-base:active { transform: translate(2px, 2px) !important; }
.btn-sm { font-size: 0.8rem; padding: 8px 16px; }
.btn-md { font-size: 0.9rem; padding: 11px 22px; }
.btn-lg { font-size: 1rem; padding: 15px 32px; }
.btn-primary {
background: var(--color-aloha-coral);
color: white;
border-color: var(--color-aloha-coral-dark);
box-shadow: 4px 4px 0px var(--color-aloha-coral-dark);
}
.btn-primary:hover {
box-shadow: 6px 6px 0px var(--color-aloha-coral-dark);
color: white;
}
.btn-secondary {
background: white;
color: var(--color-aloha-turquoise-dark);
border-color: var(--color-aloha-turquoise);
box-shadow: 4px 4px 0px var(--color-aloha-turquoise-dark);
}
.btn-secondary:hover {
box-shadow: 6px 6px 0px var(--color-aloha-turquoise-dark);
color: var(--color-aloha-turquoise-dark);
}
.btn-ghost {
background: transparent;
color: var(--color-aloha-text);
border-color: rgba(44, 62, 80, 0.3);
}
.btn-ghost:hover { background: var(--color-aloha-sand-mid); box-shadow: none; }CSS
/* ─── Badges ─────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 800;
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 99px;
border: 2px solid transparent;
}
.badge--coral { background: rgba(255,95,64,0.10); color: var(--color-aloha-coral-dark); border-color: rgba(255,95,64,0.25); }
.badge--turquoise { background: rgba(20,184,200,0.10); color: var(--color-aloha-turquoise-dark); border-color: rgba(20,184,200,0.25); }
.badge--yellow { background: rgba(255,202,58,0.18); color: var(--color-aloha-yellow-dark); border-color: rgba(255,202,58,0.40); }
.badge--green { background: rgba(61,202,126,0.10); color: var(--color-aloha-green-dark); border-color: rgba(61,202,126,0.25); }
.badge--pink { background: rgba(255,133,179,0.10); color: var(--color-aloha-pink-dark); border-color: rgba(255,133,179,0.25); }CSS
/* ─── Features Section ───────────────────────────────── */
.aloha-card {
background: white;
border: 3px solid var(--color-aloha-dark);
border-radius: 20px;
padding: 28px;
box-shadow: 6px 6px 0px var(--color-aloha-dark);
transition: transform 0.12s ease, box-shadow 0.12s ease;
position: relative;
overflow: hidden;
}
.aloha-card:hover {
transform: translate(-3px, -3px);
box-shadow: 9px 9px 0px var(--color-aloha-dark);
}
.card-title {
font-weight: 800;
font-size: 1rem;
color: var(--color-aloha-dark);
margin-bottom: 8px;
line-height: 1.3;
}
.card-description {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-aloha-text-muted);
line-height: 1.65;
}CSS
/* ─── Text Variants ──────────────────────────────────── */
.text-body { font-size: 0.95rem; line-height: 1.75; font-weight: 600; color: var(--color-aloha-text-muted); }
.text-caption { font-size: 0.8rem; font-weight: 600; color: var(--color-aloha-text-muted); }
.text-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.text-code { font-family: monospace; font-size: 0.85rem; }ALOHA // NEXT Components
Button
Tropical light-mode button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Tropical badge with coral, turquoise, yellow, green, and pink variants for category tags and labels.
Card
Tropical feature card with a colored icon element, category tag, title, and description. Supports coral, turquoise, yellow, green, and pink color variants.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the ALOHA tropical light palette.