shadcn-ui-flutter

Original🇺🇸 English
Translated

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.

5installs
Added on

NPX Install

npx skill4agent add nank1ro/flutter-shadcn-ui shadcn-ui-flutter

Tags

Translated version includes tags in frontmatter

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

NameDescriptionReference
AccordionA vertically stacked set of interactive headings that each reveal a section of content.accordion.md
AlertDisplays a callout for user attention.alert.md
AvatarAn image element with a placeholder for representing the user.avatar.md
BadgeDisplays a badge or a component that looks like a badge.badge.md
BreadcrumbDisplays the path to the current resource using a hierarchy of links.breadcrumb.md
ButtonDisplays a button or a component that looks like a button.button.md
CalendarA date field component that allows users to enter and edit date.calendar.md
CardDisplays a card with header, content, and footer.card.md
CheckboxA control that allows the user to toggle between checked and not checked.checkbox.md
Context MenuDisplays a menu to the user — such as a set of actions or functions — triggered by a mouse right-click.context-menu.md
Date PickerA date picker component with range and presets.date-picker.md
DialogA modal dialog that interrupts the user.dialog.md
FormBuilds a form with validation and easy access to form fields values.form.md
IconButtonDisplays an icon button or a component that looks like a button with an icon.icon-button.md
InputDisplays a form input field or a component that looks like an input field.input.md
InputOTPAccessible one-time password component with copy paste functionality.input-otp.md
MenubarA visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.menubar.md
PopoverDisplays rich content in a portal, triggered by a button.popover.md
ProgressDisplays an indicator showing the completion progress of a task, typically displayed as a progress bar.progress.md
RadioGroupA 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
ResizableResizable panel groups and layouts.resizable.md
SelectDisplays a list of options for the user to pick from—triggered by a button.select.md
SeparatorVisually or semantically separates content.separator.md
SheetExtends the Dialog component to display content that complements the main content of the screen.sheet.md
SliderAn input where the user selects a value from within a given range.slider.md
SonnerAn opinionated toast component.sonner.md
SwitchA control that allows the user to toggle between checked and not checked.switch.md
TableA responsive table component.table.md
TabsA set of layered sections of content—known as tab panels—that are displayed one at a time.tabs.md
TextareaDisplays a form textarea or a component that looks like a textarea.textarea.md
Time PickerA time picker component.time-picker.md
ToastA succinct message that is displayed temporarily.toast.md
TooltipA 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.
dart
import '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),
      ),
    );
  }
}

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.