メニュー
Show slide-out panels with showShadSheet and ShadSheet; side (top, right, bottom, left), title, description, actions, child. Use when adding side panels, drawers, or slide-over content 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-sheet |
| description | Show slide-out panels with showShadSheet and ShadSheet; side (top, right, bottom, left), title, description, actions, child. Use when adding side panels, drawers, or slide-over content in a Flutter shadcn_ui app. |
Sheets extend the dialog pattern to display content from an edge of the screen. Use showShadSheet(context: context, side: ShadSheetSide.*, builder: (context) => ShadSheet(...)). side can be ShadSheetSide.top, ShadSheetSide.right, ShadSheetSide.bottom, or ShadSheetSide.left. Return a ShadSheet with optional title, description, child (body), and actions. Use constraints (e.g. BoxConstraints(maxWidth: 512) for left/right) to limit width or height.
showShadSheet(
side: ShadSheetSide.right,
context: context,
builder: (context) => ShadSheet(
constraints: const BoxConstraints(maxWidth: 512),
title: const Text('Edit Profile'),
description: const Text(
"Make changes to your profile here. Click save when you're done",
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
spacing: 16,
children: profile
.map(
(p) => Row(
children: [
Expanded(
child: Text(
p.title,
textAlign: TextAlign.end,
style: theme.textTheme.small,
),
),
const SizedBox(width: 16),
Expanded(
flex: 5,
child: ShadInput(initialValue: p.value),
),
],
),
)
.toList(),
),
),
actions: const [
ShadButton(child: Text('Save changes')),
],
),
);
Use side: ShadSheetSide.top, ShadSheetSide.bottom, ShadSheetSide.left, or ShadSheetSide.right in showShadSheet. For left/right sheets pass constraints: const BoxConstraints(maxWidth: 512) to the ShadSheet so content doesn’t stretch full width.