Position Sonner

Component 48

About

A set of buttons that trigger sonner toast notifications in each of the six screen positions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Position Sonner to your project and fits it to your theme.

Code

How Position Sonner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { SonnerPosition } from "@/components/ui/uiable-sonner-position";
import { Toaster } from "@/components/ui/sonner";

export default function Default() {
  return (
    <div className="flex items-center justify-center p-8">
      <SonnerPosition />
      <Toaster />
    </div>
  );
}