Sonner

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-ember/sonner

Add the Toaster component

app/templates/application.hbs

import { Toaster } from '@/ember-ui/sonner';
 
<template>
  <main>
    {{outlet}}
  </main>
  <Toaster />
</template>

Usage

import { Toaster } from '@/ember-ui/sonner';

<Toaster />

To show a toast, inject the toast service and call one of its methods:

import { service } from '@ember/service';
import type ToastService from '@/ember-services/toast';
 
class MyComponent extends Component {
  @service declare toast: ToastService;
 
  showToast = () => {
    this.toast.add({
      message: 'Event has been created.',
    });
  };
}

Examples

Types

Description

Position

Use the @position arg to change the position of the toast.

API Reference

Arg	Type	Default	Description
`@position`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	`'top-center'`	Position of the toaster on the screen.
`@richColors`	`boolean`	`false`	When `true`, applies colored backgrounds per toast type.
`@class`	`string`	—	Additional CSS classes for the toaster container.

Slider Spinner

On This Page

About Installation Usage Examples Types Description Position API Reference

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.