Sonnerstandard

화면 모서리에 잠깐 떴다 사라지는 알림(toast)을 `sonner` 라이브러리로 그리는 아이템입니다. shadcn base-nova 의 stock 아이템이며 `next-themes` 의 테마를 따릅니다. Base UI `Toast` 로 그리는 알림은 `toast` 아이템입니다. 한 앱에는 둘 중 하나만 씁니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/sonner

Default

Basic

With Description

sonner-example.tsx

"use client"
import { toast } from "sonner"
import {  Example,  ExampleWrapper,} from "@/components/example"import { Button } from "@/components/ui/button"
export default function SonnerExample() {  return (    <ExampleWrapper>      <SonnerBasic />      <SonnerWithDescription />    </ExampleWrapper>  )}
function SonnerBasic() {  return (    <Example title="Basic" className="items-center justify-center">      <Button        onClick={() => toast("Event has been created")}        variant="outline"        className="w-fit"      >        Show Toast      </Button>    </Example>  )}
function SonnerWithDescription() {  return (    <Example title="With Description" className="items-center justify-center">      <Button        onClick={() =>          toast("Event has been created", {            description: "Monday, January 3rd at 6:00pm",          })        }        variant="outline"        className="w-fit"      >        Show Toast      </Button>    </Example>  )}