القائمة
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.