shadcn-ui-flutter
A comprehensive Flutter UI library inspired by shadcn/ui. Provides high-quality, customizable, and accessible components including Buttons, Cards, Forms, and more. Use this skill when building Flutter UIs, implementing design systems, or needing specific component usage examples.
- Installs
- 679
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/nank1ro/flutter-shadcn-ui --skill shadcn-ui-flutter- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads shadcn-ui-flutter automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Shadcn UI for Flutter
This skill provides documentation and examples for using the shadcn_ui package in Flutter.
Theming and Customization
Shadcn UI for Flutter provides a powerful theming system. You can use built-in color schemes (blue, gray, green, neutral, orange, red, rose, slate, stone, violet, yellow, zinc) or create your own.
Applying a Theme
Use ShadThemeData within ShadApp to define your light and dark themes.
Detailed Guides
- Theming
- Typography
- Material & Cupertino Interop
- Responsive
- Decorator
Components
| Name | Description | Reference |
|---|---|---|
| Accordion | A vertically stacked set of interactive headings that each reveal a section of content. | accordion.md |
| Alert | Displays a callout for user attention. | alert.md |
| Avatar | An image element with a placeholder for representing the user. | avatar.md |
| Badge | Displays a badge or a component that looks like a badge. | badge.md |
| Breadcrumb | Displays the path to the current resource using a hierarchy of links. | breadcrumb.md |
| Button | Displays a button or a component that looks like a button. | button.md |
| Calendar | A date field component that allows users to enter and edit date. | calendar.md |
| Card | Displays a card with header, content, and footer. | card.md |
| Checkbox | A control that allows the user to toggle between checked and not checked. | checkbox.md |
| Context Menu | Displays a menu to the user — such as a set of actions or functions — triggered by a mouse right-click. | context-menu.md |
| Date Picker | A date picker component with range and presets. | date-picker.md |
| Dialog | A modal dialog that interrupts the user. | dialog.md |
| Form | Builds a form with validation and easy access to form fields values. | form.md |
| IconButton | Displays an icon button or a component that looks like a button with an icon. | icon-button.md |
| Input | Displays a form input field or a component that looks like an input field. | input.md |
| InputOTP | Accessible one-time password component with copy paste functionality. | input-otp.md |
| Menubar | A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. | menubar.md |
| Popover | Displays rich content in a portal, triggered by a button. | popover.md |
| Progress | Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. | progress.md |
| RadioGroup | A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. | radio-group.md |
| Resizable | Resizable panel groups and layouts. | resizable.md |
| Select | Displays a list of options for the user to pick from—triggered by a button. | select.md |
| Separator | Visually or semantically separates content. | separator.md |
| Sheet | Extends the Dialog component to display content that complements the main content of the screen. | sheet.md |
| Slider | An input where the user selects a value from within a given range. | slider.md |
| Sonner | An opinionated toast component. | sonner.md |
| Switch | A control that allows the user to toggle between checked and not checked. | switch.md |
| Table | A responsive table component. | table.md |
| Tabs | A set of layered sections of content—known as tab panels—that are displayed one at a time. | tabs.md |
| Textarea | Displays a form textarea or a component that looks like a textarea. | textarea.md |
| Time Picker | A time picker component. | time-picker.md |
| Toast | A succinct message that is displayed temporarily. | toast.md |
| Tooltip | A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. | tooltip.md |
Usage Examples
Examples are available at the bottom of each component page.
Basic Setup
Here is a complete example of a Counter App using shadcn_ui, including light and dark theme support.
import 'package:shadcn_ui/shadcn_ui.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ShadApp(
debugShowCheckedModeBanner: false,
theme: ShadThemeData(
brightness: Brightness.light,
colorScheme: const ShadZincColorScheme.light(),
),
darkTheme: ShadThemeData(
brightness: Brightness.dark,
colorScheme: const ShadZincColorScheme.dark(),
),
themeMode: ThemeMode.system,
home: const CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Scaffold(
appBar: AppBar(title: const Text('Shadcn Counter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
style: theme.textTheme.muted,
),
Text(
'$_counter',
style: theme.textTheme.h1,
),
],
),
),
floatingActionButton: ShadButton(
onPressed: _incrementCounter,
child: const Icon(LucideIcons.plus),
),
);
}
}
Packages included in the library
Flutter Shadcn UI consists of fantastic open-source libraries that are exported and you can use them without importing them into your project.
flutter_animate
The flutter animate library is a very cool animations library extensively used in Shadcn UI Components.
With flutter_animate animations can be easily customized from the user, because components will take a List<Effect>.
lucide_icons_flutter
A nice icon library that is used in Shadcn UI Components.
You can use Lucide icons with the LucideIcons class, for example LucideIcons.activity.
You can browse all the icons here.
two_dimensional_scrollables
A nice raw table (very performant) implementation used by the ShadTable component.
intl
The intl package provides internationalization and localization facilities, including message translation.
universal_image
Support multiple image formats. Used by the ShadAvatar component.
FAQ
What does the shadcn-ui-flutter skill do?
A comprehensive Flutter UI library inspired by shadcn/ui. Provides high-quality, customizable, and accessible components including Buttons, Cards, Forms, and more. Use this skill when building Flutter UIs, implementing design systems, or needing specific component usage examples.
How do I install shadcn-ui-flutter?
Run npx skills add https://github.com/nank1ro/flutter-shadcn-ui --skill shadcn-ui-flutter in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/shadcn-ui-flutter/ (personal) or .claude/skills/shadcn-ui-flutter/ (project).
Which AI agents can use shadcn-ui-flutter?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is shadcn-ui-flutter safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains shadcn-ui-flutter?
It is published by nank1ro in nank1ro/flutter-shadcn-ui. It has 679 recorded installs.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.