Sonner - Shadcn Ui — ContextQMD

About

Sonner is built and maintained by emilkowalski.

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <Steps className="mb-0 pt-2">

<Step>Run the following command:</Step>

bash

npx shadcn@latest add sonner

<Step>Add the Toaster component</Step>

tsx

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

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

</Steps> </TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

<Step>Install the following dependencies:</Step>

bash

npm install sonner next-themes

<Step>Copy and paste the following code into your project.</Step>

<Step>Add the Toaster component</Step>

tsx

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

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

</Steps> </TabsContent> </CodeTabs>

Usage

tsx

import { toast } from "sonner"

tsx

toast("Event has been created.")

Examples

Types

Description

Position

Use the position prop to change the position of the toast.

API Reference

See the Sonner API Reference for more information.