---
title: Sonner
description: 一个带有主观设计风格的 React Toast 组件。
component: true
links:
doc: https://sonner.emilkowal.ski
---
```tsx
"use client"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
export function SonnerDemo() {
return (
)
}
```
## 关于
Sonner 由 [emilkowalski\_](https://twitter.com/emilkowalski_) 构建并维护。
## 安装
CLI
手动
执行以下命令：
```bash
npx shadcn@latest add sonner
```
添加 Toaster 组件
```tsx title="app/layout.tsx" {1,9}
import { Toaster } from "@/components/ui/sonner"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
安装下列依赖：
```bash
npm install sonner next-themes
```
将下面的代码复制到你的项目中。
添加 Toaster 组件
```tsx showLineNumbers title="app/layout.tsx" {1,8}
import { Toaster } from "@/components/ui/sonner"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## 用法
```tsx
import { toast } from "sonner"
```
```tsx
toast("事件已创建。")
```
## 示例
```tsx
"use client"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
export function SonnerTypes() {
return (
)
}
```
## 更新日志
### 2025-10-13 图标
我们已将 Sonner 组件更新为使用 `lucide` 图标。请同步更新你的 `sonner.tsx` 文件以使用这些新图标。
```tsx showLineNumbers title="components/ui/sonner.tsx" {3-9,20-26}
"use client"
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
} from "lucide-react"
import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
return (
,
info: ,
warning: ,
error: ,
loading: ,
}}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)",
} as React.CSSProperties
}
{...props}
/>
)
}
export { Toaster }
```