shadcn-ui-flutter

Implements Flutter UIs using shadcn_ui components, theming, and form validation.

1|Updated Aug 14, 2026
One-click install
npx skills add https://github.com/sohampawar1866/zeromile-go --skill shadcn-ui-flutter-sohampawar1866
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn-ui-flutter
Source: https://github.com/sohampawar1866/zeromile-go/tree/main/.agents/skills/shadcn-ui-flutter
Command: npx skills add https://github.com/sohampawar1866/zeromile-go --skill shadcn-ui-flutter-sohampawar1866

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent, accessible Flutter interfaces from scratch requires writing large amounts of boilerplate for buttons, forms, dialogs, and date pickers. This Skill provides ready-to-use documentation and code examples for the shadcn_ui package so you can assemble polished Flutter screens quickly. ## Core Features & Use Cases - Component Library Reference: Usage examples for 30+ components including Button, Card, Dialog, Calendar, Select, Table, Toast, and Tooltip, each with variant examples (primary, destructive, outline, ghost). - Theming System: Configure light and dark themes with ShadThemeData, built-in color schemes (zinc, slate, blue, and more), typography, and Material/Cupertino interoperability. - Form Management: Centralized form state with ShadForm, validation, initial values, value transformers, and dot-notation nested field IDs. - Use Case: When building a settings page in Flutter, ask for a form with validated inputs, a date picker, and a themed submit button, and receive complete shadcn_ui Dart code. ## Quick Start Ask the AI to build a Flutter login screen using shadcn_ui with a themed ShadApp, validated input fields, and a primary ShadButton.

Frequently Asked Questions about shadcn-ui-flutter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use shadcn_ui components in a Flutter app?

Wrap your app in ShadApp with ShadThemeData for light and dark themes, then use components like ShadButton, ShadCard, and ShadInput directly in your widget tree. All components are imported from the shadcn_ui package.

How to add form validation with ShadForm in Flutter?

Create a GlobalKey<ShadFormState>, wrap fields like ShadInputFormField in a ShadForm, and give each field an id and validator. Call formKey.currentState!.saveAndValidate() to validate and retrieve all values as a Map.

Does shadcn_ui Flutter support dark mode themes?

Yes, ShadApp accepts both theme and darkTheme parameters using ShadThemeData with Brightness.light and Brightness.dark. Set themeMode to ThemeMode.system to follow the device setting automatically.

What color schemes are available in shadcn_ui for Flutter?

The library includes built-in color schemes: blue, gray, green, neutral, orange, red, rose, slate, stone, violet, yellow, and zinc. Each is available in light and dark variants, such as ShadZincColorScheme.light().

Can shadcn_ui components work alongside Material widgets?

Yes, shadcn_ui supports Material and Cupertino interoperability, so you can mix standard Flutter widgets like Scaffold and AppBar with Shad components. The interop guide in the skill covers the configuration details.