GitHub
Docs
Sonner

Sonner

An opinionated toast component for Angular.

Loading...
Loading...

About

ngx-sonner is built and maintained by tutkli.

Installation

Run the following command:

pnpm dlx shadcn-ng@latest add sonner
npx shadcn-ng@latest add sonner
npx shadcn-ng@latest add sonner
bunx --bun shadcn-ng@latest add sonner

Add the Toaster component

import { Component } from '@angular/core'
 
import { ToasterComponent } from '~/components/ui/sonner'
 
@Component({
  standalone: true,
  selector: 'app-root',
  imports: [ToasterComponent],
  template: `
    <ub-toaster />
  `,
})
export class AppComponent {}

Install the following dependencies:

pnpm add ngx-sonner
npm install ngx-sonner
yarn add ngx-sonner
bun add ngx-sonner

Copy and paste the following code into your project.

Add the Toaster component

import { Component } from '@angular/core'
 
import { ToasterComponent } from '~/components/ui/sonner'
 
@Component({
  standalone: true,
  selector: 'app-root',
  imports: [ToasterComponent],
  template: `
    <ub-toaster />
  `,
})
export class AppComponent {}

Usage

import { toast } from "ngx-sonner"
toast("Event has been created.")