메뉴
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.
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 ShadCalendar for single, multiple, or range date selection; caption layout, hide navigation, week numbers, outside days, fixed weeks. Use when building date pickers or calendar widgets in a Flutter shadcn_ui app.
| name | shadcn_ui-button |
| description | 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. |
ShadButton displays a button or component that looks like a button. Variants: default (primary), ShadButton.secondary, ShadButton.destructive, ShadButton.outline, ShadButton.ghost, ShadButton.link. Use leading (and optionally trailing) for icons; support gradient and shadows for custom styling.
ShadButton(child: const Text('Primary'), onPressed: () {})
ShadButton.secondary(child: const Text('Secondary'), onPressed: () {})
ShadButton.destructive(child: const Text('Destructive'), onPressed: () {})
ShadButton.outline(child: const Text('Outline'), onPressed: () {})
ShadButton.ghost(child: const Text('Ghost'), onPressed: () {})
ShadButton.link(child: const Text('Link'), onPressed: () {})
ShadButton(
onPressed: () {},
leading: const Icon(LucideIcons.mail),
child: const Text('Login with Email'),
)
Use leading with a small CircularProgressIndicator:
ShadButton(
onPressed: () {},
leading: SizedBox.square(
dimension: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
color: ShadTheme.of(context).colorScheme.primaryForeground,
),
),
child: const Text('Please wait'),
)
ShadButton(
onPressed: () {},
gradient: const LinearGradient(colors: [Colors.cyan, Colors.indigo]),
shadows: [
BoxShadow(
color: Colors.blue.withOpacity(.4),
spreadRadius: 4,
blurRadius: 10,
offset: const Offset(0, 2),
),
],
child: const Text('Gradient with Shadow'),
)