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

Carousels

Buttons

Tab Bar

Dialog Box

Sliders

Switch

Our Widget Catalog

Cards

• MUI Simple Card
• MUI Primary Card
• MUI SignIn Card
• MUI SignUp Card
• MUI Profile Card
• MUI Pricing Card
• MUI Blog Card

Buttons

• MUI Primary Button
• MUI Secondary Button
• MUI Text Button
• MUI Outlined Button
• MUI Gradient Button
• MUI Loading Button
• MUI Secondary Outlined Button
• MUI Radio Button
• MUI Primary Block Level Button
• MUI Secondary Block Level Button
• MUI Secondary Outlined Block Level Button
• MUI Text Block Level Button
• MUI Outlined Block Level Button
• MUI Loading Block Level Button
• MUI Gradient Block Level Button

Carousels

• MUI Carousel1
• MUI Carousel2
• MUI Carousel3
• MUI Carousel4
• MUI Carousel5
• MUI Carousel6

CheckBox

• MUI Checkbox

Dialogs

• MUI Primary Dialog

Footers

Input Fields

• MUI Primary Input Field

List Tiles

• MUI Primary Listtile

Rating Bars

• MUI Rating Bar

Switch

• MUI Switch

Slider

• MUI Slider

Tabs

• MUI Tabbar
• MUI Tabbar Transparent
• MUI Tabbar Underlined
• MUI Tabbar Vertical

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