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 :

WhatsApp.Video.2024-01-07.at.2.22.15.AM.mp4

WhatsApp.Video.2024-01-07.at.2.22.18.AM.mp4

WhatsApp.Video.2024-01-07.at.2.22.16.AM.mp4

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

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 :

Run flutter create . inside the project folder to generate any necessary files
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.
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>

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.