EMBER // NEXT

Setup Guide

One-time setup for using EMBER // 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 EMBER // NEXT design tokens to your globals.css. These define colors, fonts, and animation tokens used by every component in the theme.

CSS
@theme {
  --color-emb-bg:           #13100d;
  --color-emb-surface:      #1e1a16;
  --color-emb-surface-2:    #252019;
  --color-emb-surface-3:    #2c2620;
  --color-emb-rail-bg:      #0e0c09;
  --color-emb-border:       #2e2820;
  --color-emb-border-2:     #3a3028;
  --color-emb-text-faint:   #5c5040;
  --color-emb-text-dim:     #a09080;
  --color-emb-text-body:    #c8bdb0;
  --color-emb-text-head:    #f0ebe4;
  --color-emb-accent:       #e8631a;
  --color-emb-accent-dim:   rgba(232,99,26,0.12);
  --color-emb-accent-glow:  rgba(232,99,26,0.06);
  --color-emb-amber:        #c49a3c;
  --color-emb-amber-dim:    rgba(196,154,60,0.12);
  --color-emb-green:        #4ade80;
  --color-emb-green-dim:    rgba(74,222,128,0.10);
  --color-emb-red:          #f87171;
  --color-emb-red-dim:      rgba(248,113,113,0.10);
  --font-display: var(--font-sora);
  --font-body: var(--font-dm-sans);
  --rail-w: 62px;
  --topbar-h: 54px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
}
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 ──────────────────────────────────────────────────────────────── */

.emb-btn-sm {
  font-size: 11px;
  padding: 5px 11px;
}

.emb-btn-lg {
  font-size: 14px;
  padding: 10px 22px;
}
CSS
/* ── Table ────────────────────────────────────────────────────────────────── */

.emb-acct-dot.orange {
  background: var(--color-emb-accent-dim);
  color: var(--color-emb-accent);
  border: 1px solid rgba(232,99,26,0.25);
}

.emb-acct-dot.amber {
  background: var(--color-emb-amber-dim);
  color: var(--color-emb-amber);
  border: 1px solid rgba(196,154,60,0.25);
}

.emb-acct-dot.muted {
  background: rgba(92,80,64,0.2);
  color: var(--color-emb-text-dim);
  border: 1px solid var(--color-emb-border-2);
}
CSS
/* ── Text variants ────────────────────────────────────────────────────────── */

.emb-text-body {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-emb-text-body);
  line-height: 1.6;
}

.emb-text-caption {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-emb-text-dim);
  line-height: 1.5;
}

.emb-text-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-emb-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.emb-text-code {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--color-emb-amber);
  background: var(--color-emb-amber-dim);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
CSS
/* ── UI Card (component showcase) ─────────────────────────────────────────── */

.emb-ui-card {
  background: var(--color-emb-surface);
  border: 1px solid var(--color-emb-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.emb-ui-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-emb-border);
}

.emb-ui-card-body {
  padding: 16px 18px;
}

.emb-ui-card-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--color-emb-border);
}
EMBER // NEXT Components
EMBER // NEXTUI

Button

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

View sourcePreview
EMBER // NEXTUI

Badge

Ember-styled badge with five color variants: orange, amber, green, red, and muted. Suited for category labels, status tags, and inline highlights.

View sourcePreview
EMBER // NEXTUI

Text

Polymorphic text primitive with body, caption, label, and code variants. Renders as p, span, or div via the `as` prop.

View sourcePreview
EMBER // NEXTUI

Card

Composable card with Card, CardHeader, CardBody, and CardFooter sub-components. Uses `emb-ui-card` CSS classes for the Ember warm palette.

View sourcePreview