Shadcn Ui Decorator

Shadcn UI — Decorator

Instructions

Most shadcn_ui components use a ShadDecoration handled by ShadDecorator for borders, focus state, labels, and error/description styles.

Default decoration

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,
  ),
);

Disable secondary border

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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: serverpod
• Source: serverpod/skills-registry
• License: BSD-3-Clause

Install and usage instructions live in the source repository linked above.