Loading...
Loading...
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.
npx skill4agent add nank1ro/flutter-shadcn-ui shadcn-ui-fluttershadcn_uiShadThemeDataShadApp| 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 |
shadcn_uiimport 'package:shadcn_ui/shadcn_ui.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
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});
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
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),
),
);
}
}List<Effect>LucideIconsLucideIcons.activity