メニュー
Show tooltips on hover or focus with ShadTooltip; builder returns tooltip content, child is trigger. Use when adding hover/focus tooltips in a Flutter shadcn_ui app. Child must use ShadGestureDetector for hover (e.g. ShadButton).
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-tooltip |
| description | Show tooltips on hover or focus with ShadTooltip; builder returns tooltip content, child is trigger. Use when adding hover/focus tooltips in a Flutter shadcn_ui app. Child must use ShadGestureDetector for hover (e.g. ShadButton). |
ShadTooltip shows a popup when the element receives keyboard focus or the mouse hovers over it. Use builder: (context) => ... to build the tooltip content (e.g. Text('Add to library')) and child for the trigger widget. Hover works only if the child uses a ShadGestureDetector; ShadButton and similar components implement it. For a plain widget (e.g. image), wrap the child with ShadGestureDetector so the tooltip shows on hover.
ShadTooltip(
builder: (context) => const Text('Add to library'),
child: ShadButton.outline(
child: const Text('Hover/Focus'),
onPressed: () {},
),
)
For a non-interactive child (e.g. Image), wrap with ShadGestureDetector:
ShadTooltip(
builder: (context) => const Text('Description'),
child: ShadGestureDetector(
child: Image.network('...'),
),
)