ModularUI : Pre-built beautiful flutter widgets Inspired by material-tailwind and shadcn/ui

Modular UI Badge Github Badge Twitter Badge Discord Badge

Craft beautiful, accessible, and responsive Flutter UIs with a Modular-UI Design-inspired component library


How to use

Installation

Run this command in your terminal

flutter pub add modular_ui

Import

Add this line to import the package.

import 'package:modular_ui/modular_ui.dart';

Modular UI Widgets:

Primary Cards

Image 2 Image 3 Image 5 Image 1 Image 4

Carousels

Gif 1 Gif 2 Gif 5
Gif 4 Gif 6 Gif 3

Buttons

Image 2 Image 3

Tab Bar

Image 2

Dialog Box

Image 2

Sliders

Image 2

Switch

Image 2

Our Widget Catalog

Cards

Buttons

Carousels

CheckBox

Dialogs

Footers

Input Fields

List Tiles

Rating Bars

Switch

Slider

Tabs


Code Samples

Buttons

Primary Button

 MUIPrimaryButton(
      text: "Primary Button",
      onPressed: () => onButtonPressed("Primary Button"),
    ),

Cards

Primary Card

  MUIPrimaryCard(
          title: 'UI/UX Review Check',
          description:
              'The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona',
          image: Image.network(
            'https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80',
            fit: BoxFit.cover,
          ),
          buttons: [
            MUIPrimaryButton(
              text: 'Read More',
              onPressed: () {},
            ),
          ],
        ),

Carousal

Primary Carousal

  MUICarousel(
            images: [
              "https://github.com/shadcn.png",
              "https://github.com/shadcn.png",
              "https://github.com/shadcn.png",
              "https://github.com/shadcn.png",
              "https://github.com/shadcn.png"
            ],
            indicatorType: CarouselIndicatorType.dot,
            duration: Duration(seconds: 2),
          ),

For more code samples, you can head on to our documentaion at . https://modularui.site


Features

  • Comprehensive Modular-UI Design components: Build modern and feature-rich interfaces with a wide range of buttons, cards, forms, navigation elements, and more.
  • Highly customizable: Tailor components to your exact needs with extensive styling options.
  • Responsive design: Ensure optimal UI experiences across different screen sizes.
  • Accessibility focus: Built with accessibility in mind, adhering to best practices.
  • Lightweight and performant: Efficiently crafted for smooth user interactions.

Additional Features

  • Custom themes and color palettes: Define your own visual style for a cohesive look.
  • Dark mode support: Seamlessly adapt your UI to user preferences.

Contributing

Calling on all the trendsetting Flutter enthusiasts! ❤️‍🔥 Join forces as we pioneer the creation of the ultimate, expansive, and seamless UI Library for Flutter. Let's make waves together! 🚀 Please refer to our contribution guidelines for details and don't forget to drop a Hi at discord