메뉴
Configure ShadDecoration and ShadDecorator for shadcn_ui components; customize secondary border and disableSecondaryBorder. Use when styling form controls, focus rings, or component borders in Flutter shadcn_ui.
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-decorator |
| description | Configure ShadDecoration and ShadDecorator for shadcn_ui components; customize secondary border and disableSecondaryBorder. Use when styling form controls, focus rings, or component borders in Flutter shadcn_ui. |
Most shadcn_ui components use a ShadDecoration handled by ShadDecorator for borders, focus state, labels, and error/description styles.
Default includes secondary border, focused ring, label/error/description styles and padding:
ShadDecoration(
secondaryBorder: ShadBorder.all(
padding: const EdgeInsets.all(4),
width: 0,
),
secondaryFocusedBorder: ShadBorder.all(
width: 2,
color: colorScheme.ring,
radius: radius.add(radius / 2),
padding: const EdgeInsets.all(2),
),
labelStyle: textTheme.muted.copyWith(
fontWeight: FontWeight.w500,
color: colorScheme.foreground,
),
errorStyle: textTheme.muted.copyWith(
fontWeight: FontWeight.w500,
color: colorScheme.destructive,
),
labelPadding: const EdgeInsets.only(bottom: 8),
descriptionStyle: textTheme.muted,
descriptionPadding: const EdgeInsets.only(top: 8),
errorPadding: const EdgeInsets.only(top: 8),
errorLabelStyle: textTheme.muted.copyWith(
fontWeight: FontWeight.w500,
color: colorScheme.destructive,
),
);
By default a secondary border is drawn around focusable components. To disable it and rely on a bolder primary border:
ShadThemeData(
disableSecondaryBorder: true,
),
Note: Disabling the secondary border is not recommended; it can hurt accessibility because the focus ring helps users see which component is focused.