Sonner

Buttons 1

About

An opinionated toast component for React.

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

Code

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

Usage.tsx

'use client';

import { Button } from '@/components/ui/button-1';
import { toast } from 'sonner';

export default function SonnerDemo() {
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() =>
        toast('Meeting Reminder', {
          description: 'Your team meeting today at 3:00 PM.',
          duration: 5000,
          action: {
            label: 'Join',
            onClick: () => console.log('Reschedule clicked'),
          },
        })
      }
    >
      Show Toast
    </Button>
  );
}