CANDY // NEXT

Setup Guide

One-time setup for using CANDY // 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-merge
2
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 CANDY // 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-candy-cream:          #FFF5F9;
  --color-candy-cream-mid:      #FFEEF5;
  --color-candy-white:          #FFFFFF;
  --color-candy-pink:           #FF6FA8;
  --color-candy-pink-light:     #FFB3D0;
  --color-candy-pink-dark:      #CC3D71;
  --color-candy-mint:           #2EC8BB;
  --color-candy-mint-light:     #80DDD7;
  --color-candy-mint-dark:      #1E9990;
  --color-candy-lemon:          #FFD93D;
  --color-candy-lemon-dark:     #C9A500;
  --color-candy-lavender:       #B47EEB;
  --color-candy-lavender-dark:  #7A44B5;
  --color-candy-peach:          #FF9157;
  --color-candy-peach-dark:     #CC5D25;
  --color-candy-text:           #2D1B3D;
  --color-candy-text-muted:     #8A7098;
  --color-candy-dark:           #2D1B3D;

  /* ── Fonts ───────────────────────────────────────────── */
  --font-display: var(--font-fredoka-one);
  --font-body:    var(--font-nunito);

  /* ── Animations ──────────────────────────────────────── */
  --animate-float:        candy-float 4.5s ease-in-out infinite;
  --animate-bounce-candy: candy-bounce 3s ease-in-out infinite;
  --animate-spin-slow:    candy-spin-slow 14s linear infinite;
  --animate-blink:        blink-cursor 0.8s step-end infinite;
  --animate-pulse-soft:   candy-pulse 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:   20px;
  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 18px; }

.btn-md { font-size: 0.9rem;  padding: 11px 24px; }

.btn-lg { font-size: 1rem;    padding: 14px 32px; }

.btn-primary {
  background:   var(--color-candy-pink);
  color:        white;
  border-color: var(--color-candy-pink-dark);
  box-shadow:   4px 4px 0px var(--color-candy-pink-dark);
}

.btn-primary:hover {
  box-shadow: 6px 6px 0px var(--color-candy-pink-dark);
  color:      white;
}

.btn-secondary {
  background:   white;
  color:        var(--color-candy-mint-dark);
  border-color: var(--color-candy-mint);
  box-shadow:   4px 4px 0px var(--color-candy-mint-dark);
}

.btn-secondary:hover {
  box-shadow: 6px 6px 0px var(--color-candy-mint-dark);
  color:      var(--color-candy-mint-dark);
}

.btn-ghost {
  background:   transparent;
  color:        var(--color-candy-text);
  border-color: rgba(45, 27, 61, 0.25);
}

.btn-ghost:hover { background: var(--color-candy-cream-mid); box-shadow: none; }
CANDY // NEXT Components
CANDY // NEXTUI
Free

Button

Pastel-accented button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.

View sourceNo preview