菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Build collapsible accordions with ShadAccordion and ShadAccordionItem; single or multiple open items. Use when adding expandable sections, FAQs, or vertically stacked reveal content in a Flutter shadcn_ui app.
Show callout alerts with ShadAlert and ShadAlert.destructive; icon, title, description. Use when displaying warnings, errors, or important messages in a Flutter shadcn_ui app.
Display user avatars with ShadAvatar; image URL with optional placeholder. Use when showing user profile images or fallback initials in a Flutter shadcn_ui app.
Display badges with ShadBadge; primary, secondary, destructive, outline variants. Use when showing tags, status labels, or count indicators in a Flutter shadcn_ui app.
Build breadcrumb navigation with ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, custom separator. Use when showing navigation path, hierarchy of links, or dropdown breadcrumb in a Flutter shadcn_ui app.
Use Shadcn UI buttons (ShadButton variants: primary, secondary, destructive, outline, ghost, link); leading icon, loading state, gradient and shadow. Use when adding buttons, CTAs, or button-style widgets in a Flutter shadcn_ui app.
| name | shadcn_ui-sonner |
| description | 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. |
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).
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.