A small Toast component for React + Tailwind with dark mode built in.

muganda dizo — Sun, 18 Oct 2026 10:26:31 +0000

I got tired of rewriting the same toast on every client project, so here’s the version I settled on. It’s only the visual piece. You decide where it sits and when it disappears.

import { CheckCircle2, AlertTriangle, Info, X } from "lucide-react";
const ICONS = { success: CheckCircle2, warning: AlertTriangle, info: Info };
const COLORS = { success: "text-accent dark:text-accent-dark", warning: "text-warn dark:text-warn-dark", info: "text-muted dark:text-muted-dark" };
export default function Toast({ variant = "info", title, onClose }) {
  const Icon = ICONS[variant];
  return (
    <div role={variant === "warning" ? "alert" : "status"} className="flex items-start gap-3 rounded-md border border-line dark:border-line-dark bg-surface dark:bg-surface-dark px-4 py-3 shadow-lg w-full max-w-sm">
      <Icon size={18} className={`mt-0.5 shrink-0 ${COLORS[variant]}`} />
      <p className="text-sm flex-1">{title}</p>
      {onClose && (
        <button onClick={onClose} aria-label="Dismiss" className="text-muted dark:text-muted-dark hover:text-ink dark:hover:text-ink-dark">
          <X size={14} />
        </button>
      )}
    </div>
  );
}

It needs darkMode: "class", lucide-react, and these colors in tailwind.config.js:

ink:     { DEFAULT: "#0B0C0E", dark: "#EDEDEF" },
surface: { DEFAULT: "#FFFFFF", dark: "#15161A" },
muted:   { DEFAULT: "#63666F", dark: "#8B8E97" },
line:    { DEFAULT: "#E3E3E6", dark: "#26272C" },
accent:  { DEFAULT: "#00695C", dark: "#00D9C0" },
warn:    { DEFAULT: "#8A5A00", dark: "#E5A100" },

The light and dark colors are separate on purpose, so the text stays readable in both. Use it however you like.

It's one of 16 I put together as Forge, with a live demo of all of them: https://forge-ui-demo.netlify.app/

If you want the full set: https://mugandadizo.gumroad.com/l/forge?utm_source=devto&utm_medium=sample_toast&utm_campaign=forge_launch

What would you change?

how I make my templates easy to reskin (probably overthought this)

muganda dizo — Sun, 06 Sep 2026 10:52:15 +0000

how I make my templates easy to reskin (probably overthought this)

so I do client work - dashboards, landing pages, that kind of thing. and at some point I noticed I basically build the same 5-6 things over and over. stat card, some kind of table, a hero section, a pricing grid. just... different colors every time.

eventually turned two of these into actual products - Ledger (dashboard template) and Fielder (landing page kit). wanted them to be easy to reskin without me having to rebuild half of it every time someone wants a different look. here's what that actually meant in practice.

colors live in one file, period

no hardcoded hex codes anywhere in a component. all of it goes through tailwind config:

js
colors: {
primary: { DEFAULT: '#2B6E63', light: '#3E8F80', dark: '#1E4E46' },
accent: '#C98A3B',
},
fontFamily: {
display: ['Fraunces', 'serif'],
body: ['Inter', 'sans-serif'],
},

components just say bg-primary or whatever. change the six lines above, whole product looks different. nothing else to touch.

sounds obvious written out like that but I've def seen (and written) code before where someone just... types a hex code directly into a className because it was faster in the moment. don't do that if you want this to work later.

don't name things after the client's industry

easy trap - you're building a rental dashboard so you name the component TenantTable. don't. it's just DataTable. StatCard. StatusBadge. the rental-specific stuff lives in a mock data file, the component has zero idea what it's displaying.

this one actually matters more than the color thing honestly, because renaming components later is way more annoying than renaming a hex code.

the grid thing

both templates avoid the classic 3-identical-cards-in-a-row layout. one card's just bigger:

jsx

{/* main thing */}

{/* smaller stuff */}

not a huge deal but it stops the thing from looking like it was assembled from some component library's defaults, which is a look I was trying pretty hard to avoid.

the auth thing I almost skipped

first version of Ledger's login page looked fine and did literally nothing. you click sign in, nothing happens, you're still on the login page. that's a pretty common shortcut for templates but someone pointed out to me that it's also the first thing a buyer will actually click, so if it's broken that's a bad first impression.

fixed it with a plain react context, no auth library, nothing fancy - it actually redirects you if you try to hit a page without being logged in. took maybe an hour. probably should've done it from the start instead of after someone called it out.

anyway that's roughly it. the two templates don't share code but they share this same setup - config for styling, generic component names, breaking the grid pattern once, and not leaving fake screens lying around. if you want to see it: Ledger / Fielder. happy to answer questions in the comments if anyone has them.

DEV Community: muganda dizo

A small Toast component for React + Tailwind with dark mode built in.

how I make my templates easy to reskin (probably overthought this)