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>
);
}