A shadcn/ui toast you can add with the CLI

Ding publishes a registry item, so the shadcn CLI can install it like any other component.

Try it:

Add it

npx shadcn@latest add @ding/ding

Ding is listed in the shadcn registry directory, so the @ding namespace works without any setup. The full URL works too: npx shadcn@latest add https://ding.yusufcengiz.dev/r/ding.json.

This installs @yusufceng1z/ding-react and writes components/ding-toaster.tsx. The file is tiny: it re-exports the Toaster as DingToaster, plus toast, and marks itself "use client" so it works in the Next.js App Router.

Use it

import { DingToaster } from '@/components/ding-toaster';

      // once, in your root layout
      <DingToaster position="top-center" />

import { toast } from '@/components/ding-toaster';

      toast.success('Saved');
      toast.error('Payment failed', { description: 'Card declined' });

How it differs from the stock shadcn toast

It shows one toast at a time and morphs it when you call again. The styles come from JavaScript, so it does not depend on Tailwind or add CSS to your project. If you need several toasts visible together, the stacking toast that shadcn ships is the better fit.

Not on shadcn? The same package works anywhere, see React toast notifications.