結論

すぐ使えるようなのを期待しているなら、shadcn/uiのsonnarを使おう。

1. はじめに

shadcn/ui とは何か

shadcn/uiとは、tailwindcssを使って、構成されたヘッドレスUIです。

componentsが用意されていますが、カスタムしたい場合は、tailwindcssのclassを与えてカスタムします。

2. 前提条件

今回はNextjsで使うので、Nextjsのセットアップに沿っています。

3. toaster(sonner)のセットアップ

shadcn/uiのcomponentsににtoasterが用意されていますが、より使いやすく準備されているsonnerの方を使います。

3.1 CLIでコンポーネント追加

npx shadcn-ui@latest add sonner

3.2 Layout.tsxにコンポーネント追加

richColorsを使うと、自分で色（successやfailedの時に色分け）を設定しなくてもOKです。

layout.tsx

+ import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
+        <Toaster richColors />
      </body>
    </html>
  )
}

sonnarとtoasterの比較

shadcn/uiのtoasterは、一から見た目やメソッドを用意する人向けです。
sonnarは、すぐ使いやすい形から準備ほぼなしで使えます。

sonnarの場合

info

sonnar.ts

import { Toaster, toast } from 'sonner'

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast.info('お気に入りを更新しました')}>
        Show toast
      </button>
    </div>
  )
}

success

sonnar.ts

import { Toaster, toast } from 'sonner'

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast.success("お気に入り追加しました")}>
        Show toast
      </button>
    </div>
  )
}

error

sonnar.ts

import { Toaster, toast } from 'sonner'

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast.error("お気に入り削除しました");}>
        Show toast
      </button>
    </div>
  )
}

toasterの場合

例えば、shadcn/uiのtoasterはuseToastをimportし、見た目が薄ーくしか用意されてません

toaster.ts

import { useToast } from "@/components/ui/use-toast"

export const ToastDemo = () => {
  const { toast } = useToast()

  return (
    <Button
      onClick={() => {
        toast({
          description: "your message has been sent.",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

failed な toaster

variant: "destructive"を追加します。

toaster.ts

"use client"

import { Button } from "@/components/ui/button"
import { ToastAction } from "@/components/ui/toast"
import { useToast } from "@/components/ui/use-toast"

export function ToastDestructive() {
  const { toast } = useToast()

  return (
    <Button
      variant="outline"
      onClick={() => {
        toast({
          variant: "destructive",
          title: "Uh oh! Something went wrong.",
          description: "There was a problem with your request.",
          action: <ToastAction altText="Try again">Try again</ToastAction>,
        })
      }}
    >
      Show Toast
    </Button>
  )
}

success な toaster

用意されていないので、自分で追加する必要があります。

まとめ

すぐ使える形で使うなら、sonnarを使う
1からカスタマイズしたい、sonnarの見た目を差別化したいであれば、toasterを使う

参考リンク