Alerts, forms and toasts that open from where you clicked.

Import from popetjs/react and the content options accept JSX.

import Popet, { usePopet } from 'popetjs/react'

function DeleteButton({ user }) {
  const popet = usePopet()

  async function remove() {
    const ok = await popet.confirm({
      icon: 'warning',
      title: <>Delete <strong>{user.name}</strong>?</>,
      confirmButtonText: 'Delete'
    })
    if (ok) popet.toast('User deleted', 'success')
  }

  return <button onClick={remove}>Delete</button>
}

Install the plugin once, then use $popet in templates or usePopet() in setup.

// main.js
import { createApp } from 'vue'
import { PopetPlugin } from 'popetjs/vue'

createApp(App).use(PopetPlugin, { theme: 'auto' }).mount('#app')

<script setup>
import { h } from 'vue'
import { usePopet } from 'popetjs/vue'
import PlanPicker from './PlanPicker.vue'

const popet = usePopet()
const choose = () => popet.fire({ title: 'Choose a plan', html: h(PlanPicker) })
</script>

<template>
  <button @click="$popet.success('Saved!')">Save</button>
  <button @click="choose">Change plan</button>
</template>

Inject the POPET token anywhere. providePopet() is optional and sets app-wide defaults.

// app.config.ts
import { providePopet } from 'popetjs/angular'

export const appConfig = {
  providers: [providePopet({ theme: 'auto' })]
}

// invoice.component.ts
import { Component, inject } from '@angular/core'
import { POPET } from 'popetjs/angular'

@Component({
  selector: 'app-invoice',
  template: `<button (click)="send()">Send</button>`
})
export class InvoiceComponent {
  private popet = inject(POPET)

  async send() {
    if (await this.popet.confirm('Send this invoice?')) {
      this.popet.toast('Invoice sent', 'success')
    }
  }
}

Flash a popup from a controller and it appears on the next page. Put @popet once before </body> in your layout.

composer require popet/laravel
php artisan vendor:publish --tag=popet-assets

// app/Http/Controllers/ProfileController.php
use Popet\Laravel\Facades\Popet;

public function update(Request $request)
{
    $request->user()->update($request->validated());

    Popet::toast('Profile updated');                    // a toast
    // Popet::success('Saved', 'Your profile is live.');  // or a modal

    return back();
}

{{-- resources/views/layouts/app.blade.php --}}
    @popet
</body>

Livewire components can open one without a page load:

$this->dispatch('popet', title: 'Saved', icon: 'success', toast: true);