# 轻提示 · JGuang UI

> 在页面边缘展示短暂的操作反馈通知。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/sonner
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

> 示例 `sonner-demo`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/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/radix/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


> 示例 `sonner-types`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/sonner


## Description


> 示例 `sonner-description`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/sonner


## Position

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


> 示例 `sonner-position`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/sonner


## API Reference

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

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt