# Sonner · JGuang UI

> An opinionated toast component for React.

- Page: https://jiguang132.com/systems/jguang-ui/docs/components/base/sonner
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

> Example `sonner-demo`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/sonner


## About

Sonner is built and maintained by [emilkowalski](https://twitter.com/emilkowalski).

## Installation


  

**Command**


  

**Manual**


### Run the following command:


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Add the Toaster component.


```tsx title="app/layout.tsx" {1,9} showLineNumbers
import { Toaster } from "@/components/ui/sonner"

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


### Install the following dependencies:


```bash
npm install sonner next-themes
```


### Copy and paste the following code into your project.


[View complete source: components/ui/sonner.tsx](/r/jguang-ui/base/sonner.json)


### Add the Toaster component.


```tsx showLineNumbers title="app/layout.tsx" {1,8}
import { Toaster } from "@/components/ui/sonner"

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


## Usage

```tsx
import { toast } from "sonner"
```

```tsx
toast("Event has been created.")
```

## Types


> Example `sonner-types`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/sonner


## Description


> Example `sonner-description`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/sonner


## Position

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


> Example `sonner-position`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/sonner


## API Reference

See the [Sonner API Reference](https://sonner.emilkowal.ski/getting-started) for more information.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt