メニュー
Build tabbed UIs with ShadTabs and ShadTab; value, tabs (content + child label), tabBarConstraints, contentConstraints. Use when adding tab panels or layered sections 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-tabs |
| description | Build tabbed UIs with ShadTabs and ShadTab; value, tabs (content + child label), tabBarConstraints, contentConstraints. Use when adding tab panels or layered sections in a Flutter shadcn_ui app. |
ShadTabs<T> displays layered sections (tab panels) one at a time. Provide value (currently selected tab value), tabs (list of ShadTab<T>), and optional tabBarConstraints and contentConstraints. Each ShadTab has value, child (tab label), and content (panel widget).
ShadTabs<String>(
value: 'account',
tabBarConstraints: const BoxConstraints(maxWidth: 400),
contentConstraints: const BoxConstraints(maxWidth: 400),
tabs: [
ShadTab(
value: 'account',
content: ShadCard(
title: const Text('Account'),
description: const Text(
"Make changes to your account here. Click save when you're done."),
footer: const ShadButton(child: Text('Save changes')),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 16),
ShadInputFormField(label: const Text('Name'), initialValue: 'Ale'),
const SizedBox(height: 8),
ShadInputFormField(label: const Text('Username'), initialValue: 'nank1ro'),
const SizedBox(height: 16),
],
),
),
child: const Text('Account'),
),
ShadTab(
value: 'password',
content: ShadCard(
title: const Text('Password'),
description: const Text(
"Change your password here. After saving, you'll be logged out."),
footer: const ShadButton(child: Text('Save password')),
child: Column(
children: [
const SizedBox(height: 16),
ShadInputFormField(label: const Text('Current password'), obscureText: true),
const SizedBox(height: 8),
ShadInputFormField(label: const Text('New password'), obscureText: true),
const SizedBox(height: 16),
],
),
),
child: const Text('Password'),
),
],
)
Use state or a controller to change value when the user switches tabs if needed.