DRAFT // NEXT

Setup Guide

One-time setup for using DRAFT // 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 DRAFT // 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-draft-bg:           #FAF8F5;
  --color-draft-bg-alt:       #F3EFE9;
  --color-draft-bg-deep:      #EBE6DE;
  --color-draft-ink:          #2C2A26;
  --color-draft-ink-light:    #6B6560;
  --color-draft-ink-faint:    #9E978E;
  --color-draft-accent:       #C05730;
  --color-draft-accent-hover: #A84A28;
  --color-draft-accent-light: rgba(192, 87, 48, 0.08);
  --color-draft-border:       #DDD8D0;
  --color-draft-border-light: #E8E4DC;
  --color-draft-white:        #FFFFFF;

  /* ── Fonts ───────────────────────────────────────────── */
  --font-display: var(--font-newsreader);
  --font-body:    var(--font-source-sans-3);

  /* ── Radius ──────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}
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:             6px;
  font-family:     var(--font-body);
  font-weight:     600;
  border:          1.5px solid transparent;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  text-decoration: none;
  line-height:     1;
  letter-spacing:  0.02em;
  text-transform:  uppercase;
  transition:      background 0.2s, color 0.2s, border-color 0.2s;
  white-space:     nowrap;
}

.btn-base:hover { text-decoration: none; }

.btn-sm { font-size: 13px; padding: 6px 16px; }

.btn-md { font-size: 14px; padding: 10px 24px; }

.btn-lg { font-size: 15px; padding: 12px 28px; }

.btn-primary {
  background:   var(--color-draft-accent);
  color:        var(--color-draft-white);
  border-color: var(--color-draft-accent);
}

.btn-primary:hover {
  background:   var(--color-draft-accent-hover);
  border-color: var(--color-draft-accent-hover);
  color:        var(--color-draft-white);
}

.btn-secondary {
  background:   transparent;
  color:        var(--color-draft-accent);
  border-color: var(--color-draft-accent);
}

.btn-secondary:hover {
  background: var(--color-draft-accent);
  color:      var(--color-draft-white);
}

.btn-ghost {
  background:   transparent;
  color:        var(--color-draft-ink-light);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-draft-bg-alt);
  color:      var(--color-draft-ink);
}
DRAFT // NEXT Components
DRAFT // NEXTUI
Free

Button

Editorial blog button with primary and ghost variants. Warm parchment palette with rust accent. Renders as a Next.js Link when an href is provided.

View sourcePreview