Customization

CSS Variables

Nudge UI uses CSS custom properties for all design tokens. Override them in your global CSS:

/* globals.css */
:root {
  --color-bg: #ffffff;
  --color-surface-raised: #f8f8fc;
  --color-text: #0a0a1a;
  --color-text-secondary: #5a5a7a;
  --color-border: rgba(0, 0, 0, 0.08);

  /* Toast accent colors */
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  --color-primary: #6366f1;

  /* Radius */
  --radius-lg: 0.75rem;
}

.dark {
  --color-bg: #0a0a0f;
  --color-surface-raised: #1a1a2a;
  --color-text: #f0f0ff;
  /* … */
}

Overriding CSS Classes

All toast elements use predictable BEM class names you can override in your CSS:

/* Override the base toast container */
.toast {
  border-radius: 0.5rem;     /* squarer corners */
  font-family: "Roboto", sans-serif;
  min-width: 240px;
}

/* Override success type */
.toast--success {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #064e3b;
  border-left-color: #10b981;
}

/* Override the close button */
.toast__close:hover {
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
}

Custom className per Toast

Pass a className option to apply extra classes to a specific toast:

toast.show("Special toast!", {
  type: "custom",
  className: "my-special-toast",  // CSS mode
  twClass: "ring-2 ring-violet-500 bg-violet-950", // Tailwind mode
});

Tailwind CSS (twClass)

In Tailwind mode, you can pass full Tailwind utility classes:

toast.success("Done!", {
  twClass: [
    "rounded-2xl",
    "border border-emerald-500/30",
    "bg-emerald-950/90 backdrop-blur",
    "text-emerald-100",
    "shadow-lg shadow-emerald-500/10",
  ].join(" "),
});

Animation Timing

Override the enter/exit animations in your CSS:

/* Faster slide-in from the left */
.toast--entering {
  animation: my-slide-in 0.2s ease forwards;
}

@keyframes my-slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}