shadcn, restyled · @jengacore/sonner

Sonner (toasts)

Navy toasts in every theme, bottom right, with one action (Undo, View). Replaces shadcn sonner: same Toaster export.

Install

terminal

npx shadcn@latest add @jengacore/sonner

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/sonner.json

Registry dependencies

@jengacore/theme

npm packages

sonnerlucide-react

Source

components/ui/sonner.tsx

"use client"

import * as React from "react"
import { CircleCheck, CircleX, Info, TriangleAlert } from "lucide-react"
import { Toaster as Sonner, toast } from "sonner"

/**
 * Toasts on navy in every theme, bottom right: confirm an action that just happened, offer one action
 * ("Undo", "View"). Never for errors the user must act on: those are Alerts on the page.
 * Mount once in the root layout; call `toast.success("Deposit posted · TX-7Q2K-0418", { action })`.
 */
function Toaster(props: React.ComponentProps<typeof Sonner>) {
  return (
    <Sonner
      position="bottom-right"
      gap={8}
      icons={{
        success: <CircleCheck className="size-[18px] stroke-[1.75] text-emerald-400" />,
        error: <CircleX className="size-[18px] stroke-[1.75] text-[#f87171]" />,
        warning: <TriangleAlert className="size-[18px] stroke-[1.75] text-[#fbbf24]" />,
        info: <Info className="size-[18px] stroke-[1.75] text-[#8ea2f0]" />,
      }}
      toastOptions={{
        unstyled: true,
        classNames: {
          toast:
            "flex w-[380px] max-w-[calc(100vw-32px)] items-center gap-3 rounded-lg bg-navy-950 px-3.5 py-3 text-[13.5px] text-grey-200 shadow-pop contrast:outline contrast:outline-white",
          title: "font-medium text-white",
          description: "text-[12.5px] text-sidebar-muted",
          actionButton: "ml-auto shrink-0 font-medium text-emerald-400 hover:underline focus-ring [--focus-color:var(--color-emerald-400)]",
          cancelButton: "shrink-0 text-sidebar-muted hover:text-white",
        },
      }}
      {...props}
    />
  )
}

export { Toaster, toast }