# Shadcn UI Sonner

> Show toasts with ShadSonner and ShadToast; ShadSonner.of(context), show/hide, title, description, action. Use when showing toast notifications or ephemeral feedback in a Flutter shadcn_ui app.

- Skill: `serverpod/shadcn-ui-sonner` (Agent Skill)
- Install (CLI): `npx skillmds@latest add serverpod/shadcn-ui-sonner`
- Raw SKILL.md: https://api.skillmd.com/api/skills/serverpod/shadcn-ui-sonner/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: serverpod (https://skillmd.com/u/serverpod)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/serverpod/shadcn-ui-sonner

---


# Shadcn UI — Sonner

## Instructions

Sonner is an opinionated toast component. Ensure `ShadSonner` is in the widget tree (e.g. in app builder). Get the controller with `ShadSonner.of(context)`. Call `sonner.show(ShadToast(...))` to show a toast; use `sonner.hide(id)` to dismiss. Each toast can have `id`, `title`, `description`, and optional `action` (e.g. an Undo button).

### Show toast

```dart
ShadButton.outline(
  child: const Text('Show Toast'),
  onPressed: () {
    final sonner = ShadSonner.of(context);
    final id = Random().nextInt(1000);
    final now = DateTime.now();
    sonner.show(
      ShadToast(
        id: id,
        title: const Text('Event has been created'),
        description: Text(DateFormat.yMd().add_jms().format(now)),
        action: ShadButton(
          child: const Text('Undo'),
          onPressed: () => sonner.hide(id),
        ),
      ),
    );
  },
)
```

Use a unique `id` per toast so you can hide it from the action button or elsewhere.