메뉴
Apply Shadcn UI text styles (h1, h2, p, lead, muted, etc.), set custom font family or Google Fonts, and extend ShadTextTheme with custom styles. Use when styling text, headings, or paragraphs in a Flutter shadcn_ui app or when changing the default font.
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-typography |
| description | Apply Shadcn UI text styles (h1, h2, p, lead, muted, etc.), set custom font family or Google Fonts, and extend ShadTextTheme with custom styles. Use when styling text, headings, or paragraphs in a Flutter shadcn_ui app or when changing the default font. |
Use ShadTheme.of(context).textTheme for consistent text styles. Default font family is Geist.
Text(
'Taxing Laughter: The Joke Tax Chronicles',
style: ShadTheme.of(context).textTheme.h1,
)
Text(
'The king, seeing how much happier his subjects were...',
style: ShadTheme.of(context).textTheme.p,
)
Text(
'Email address',
style: ShadTheme.of(context).textTheme.small,
)
Text(
'Enter your email address.',
style: ShadTheme.of(context).textTheme.muted,
)
/fonts) and register in pubspec.yaml:flutter:
fonts:
- family: UbuntuMono
fonts:
- asset: fonts/UbuntuMono-Regular.ttf
- asset: fonts/UbuntuMono-Italic.ttf
style: italic
- asset: fonts/UbuntuMono-Bold.ttf
weight: 700
ShadTextTheme in ShadThemeData:return ShadApp(
theme: ShadThemeData(
brightness: Brightness.light,
colorScheme: const ShadZincColorScheme.light(),
textTheme: ShadTextTheme(
colorScheme: const ShadZincColorScheme.light(),
family: 'UbuntuMono',
),
),
...
);
Install google_fonts, then:
theme: ShadThemeData(
brightness: Brightness.light,
colorScheme: const ShadZincColorScheme.light(),
textTheme: ShadTextTheme.fromGoogleFont(GoogleFonts.poppins),
),
Extend ShadTextTheme with the custom parameter:
textTheme: ShadTextTheme(
custom: {
'myCustomStyle': const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
color: Colors.blue,
),
},
),
Access: ShadTheme.of(context).textTheme.custom['myCustomStyle']!
Or define an extension on ShadTextTheme and use ShadTheme.of(context).textTheme.myCustomStyle.