메뉴
Show context menus on right-click with ShadContextMenuRegion, ShadContextMenuItem, submenus, dividers. Use when adding right-click menus, actions, or nested menu items 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-context-menu |
| description | Show context menus on right-click with ShadContextMenuRegion, ShadContextMenuItem, submenus, dividers. Use when adding right-click menus, actions, or nested menu items in a Flutter shadcn_ui app. |
ShadContextMenuRegion wraps a child and shows a menu on right-click. Set items to a list of ShadContextMenuItem or ShadContextMenuItem.inset. Use ShadContextMenuItem with items for submenus; use Divider(height: 8) and Padding for sections and labels.
ShadContextMenuRegion(
constraints: const BoxConstraints(minWidth: 300),
items: [
const ShadContextMenuItem.inset(child: Text('Back')),
const ShadContextMenuItem.inset(
enabled: false,
child: Text('Forward'),
),
const ShadContextMenuItem.inset(child: Text('Reload')),
const ShadContextMenuItem.inset(
trailing: Icon(LucideIcons.chevronRight),
items: [
ShadContextMenuItem(child: Text('Save Page As...')),
ShadContextMenuItem(child: Text('Create Shortcut...')),
ShadContextMenuItem(child: Text('Developer Tools')),
Divider(height: 8),
ShadContextMenuItem(child: Text('Developer Tools')),
],
child: Text('More Tools'),
),
const Divider(height: 8),
const ShadContextMenuItem(
leading: Icon(LucideIcons.check),
child: Text('Show Bookmarks Bar'),
),
const ShadContextMenuItem.inset(child: Text('Show Full URLs')),
const Divider(height: 8),
Padding(
padding: const EdgeInsets.fromLTRB(36, 8, 8, 8),
child: Text('People', style: theme.textTheme.small),
),
ShadContextMenuItem(
leading: /* avatar or icon */,
child: const Text('Pedro Duarte'),
),
const ShadContextMenuItem.inset(child: Text('Colm Tuite')),
],
child: Container(
width: 300,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: theme.colorScheme.border),
borderRadius: BorderRadius.circular(8),
),
child: const Text('Right click here'),
),
)
Use ShadContextMenuItem for items with leading/trailing; ShadContextMenuItem.inset for indented items. Nest items for submenus.