120k
New

Sonner

PreviousNext

An opinionated toast component for React.

About

Sonner is built and maintained by emilkowalski.

Installation

Run the following command:

pnpm dlx shadcn@latest add @force-ui-vue/sonner

Add the Toaster component

App.vue
<script setup lang="ts">
import "vue-sonner/style.css"
 
import { Toaster } from "@/components/ui/sonner"
</script>
 
<template>
  <div>
    <main>
      <!-- Your app content -->
    </main>
    <Toaster />
  </div>
</template>

Usage

<script setup lang="ts">
import { toast } from "vue-sonner"
</script>
<Button @click="() => toast('Event has been created.')">Show Toast</Button>

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.