shadcn_flutter 0.0.37 copy "shadcn_flutter: ^0.0.37" to clipboard
shadcn_flutter: ^0.0.37 copied to clipboard

Beautifully designed components from Shadcn/UI is now available for Flutter

shadcn_flutter #

Pub Likes Pub Points Pub Version GitHub Sponsors GitHub Repo stars

A set of widgets and utilities for building applications in flutter. This is a port of the shadcn UI package to flutter.

Documentation - pub.dev - Discord

Widgets #

Animation #

AnimatedValueBuilder Number Ticker RepeatedAnimationBuilder

Disclosure #

Accordion Collapsible

Feedback #

Alert Alert Dialog Circular Progress Progress Bar Skeleton Toast

Forms #

Button Checkbox Chip Input Color Picker Date Picker Form Input Input OTP Phone Input Radio Group Select Slider Star Rating Switch Text Area Time Picker Toggle

Layout #

Card Carousel Divider Resizable Stepper Steps Timeline

Breadcrumb Menubar Navigation Menu Pagination Tabs Tab List Tree

Surfaces #

Dialog Drawer Hover Card Popover Sheet Tooltip

Data Display #

Avatar Avatar Group Code Snippet Tracker

Utilities #

Badge Calendar Command Context Menu Dropdown Menu

Installation #

Using CLI #

1. Activate the package

flutter pub global activate shadcn_flutter_cli

2. Run the command

flutter pub global run shadcn_flutter_cli:setup

Manual Installation #

1. Create a new Flutter project

flutter create my_app
cd my_app

2. Add the dependency

flutter pub add shadcn_flutter

3. Import the package

import 'package:shadcn_flutter/shadcn_flutter.dart';

4. Use the widgets

void main() {
  runApp(
    ShadcnApp(
      title: 'My App',
      home: MyHomePage(),
      theme: ThemeData(
        colorScheme: ColorSchemes.darkZinc(),
        radius: 0.5,
      ),
    ),
  );
}

5. Run the app

flutter run

Development Status #

  • Android/iOS: Experimental
  • Windows/Linux/MacOS: Stable

Contributing #

The project is funded by the community. If you find this project helpful, consider supporting its development by:

  • Starring the GitHub repository.
  • Contributing code, documentation, or bug reports.
  • Sponsoring the project via GitHub Sponsors.
  • Sharing the project with others who might find it useful.

Your support helps ensure the continued development and maintenance of this project. Thank you!