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

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

Get involved: join our discord :)))

See our card creation guide

Here are some of the examples :

Current Status of Components/Widgets (might be on the development branch)

•  Accordion
•  Alert Boxes
•  Avatar
•  Breadcrumbs
•  Button
  •  Primary Button
  •  Secondary Button
  •  Loading Button
  •  Gradient Button
  •  Outlined Button
  •  Secondary Outlined Button
  •  Text Button
  •  Primary Block Level Button
  •  Secondary Block Level Button
  •  Gradient Block Level Button
  •  Loading Block Level Button
  •  Outlined Block Level Button
  •  Secondary Outlined Block Level Button
  •  Text Block Level Button
  •  Auth Buttons
•  Card
  •  Simple Card
  •  Card With Image
  •  Primary Card
  •  Profile Card
  •  Sign in Card
  •  Sign up Card
  •  Pricing Card
  •  Blog Card
  •  Blog Card With Background
  •  Booking Card
  •  Testimonial Card
  •  E-commerce Card
•  Checkbox
•  Chip
•  Collapse
•  Carousel
•  Dialog
•  Drawer
•  Footer
•  Form
•  Input Fields
  •  Primary Input Field
  •  Input With Icon
  •  Input With Button
•  List Tile
•  Navbar
•  Popover
•  Progress Bar
•  Radio Button
•  Rating Bar
•  Select
•  Slider
•  Tab View
•  Switch

Goals

•  Ship ModularUI to Pub
•  Landing Page
• A Flutter web app to test every widget.
•  CLI tool.

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! 🚀

Setting Up Locally :

1. Run flutter create . inside the project folder to generate any necessary files
2. Go inside project root and run flutter packages pub global activate --source path . and export the PATH if necessary or add the path as an Environment Variable.
3. Now you can import the local version of modular_ui and test it during your development

dependencies:
  modular_ui:
    path: <replace_with_cloned_repo_location>

4. import 'package:modular_ui/modular_ui.dart'; in your other flutter project.

Design Language :

ModularUI Design language is inspired by Material Tailwind and shadcn/ui Our current goal is to make as many components as possible and ship this asap, so we might merge any widget that looks like them or if they are consistent with our theme, obviously the future goal would be to make them perfect and consistent.

Widget Naming Convention :

any widget of ModularUI must follow this naming convention : MUI<widget_name> e.g. MUIPrimaryButton MUI stands for ModularUI.

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.

Documentation

• Comprehensive API documentation with examples and usage guidelines.
• Live demos and tutorials showcasing component usage and best practices.
• UNDER DEVELOPMENT

Contributing

We welcome contributions! Please refer to our contribution guidelines for details.

License

This project is licensed under the BSD-3.

Series of events: How we began

While casually scrolling through Twitter, I stumbled upon an intriguing tweet from Luke that sparked a burst of inspiration within me. Fueling my curiosity, I conducted a Poll on Luke’s original post, and to my delight, several individuals expressed interest. Emboldened by this positive response, I decided to take the plunge.

Enter Yash, a kindred spirit who shared my enthusiasm. Together, we embraced the challenge with rocket-like enthusiasm 🚀🚀🚀🚀🚀🚀🚀🚀.

Sharing our endeavor on Twitter garnered an impressive reception, surpassing even my own expectations. Tweet link

And now, the moment has arrived—our modular_ui repository is officially public! We’re optimistic that it will find a welcoming home among Flutter developers, paving the way for a custom UI library tailored for the Flutter community.

Download source code on GitHub

Flutterappworld

Provides the list of the opensource Flutter apps collection with GitHub repository.