https://github.com/opxica/modular-ui
Create consistent and responsive cross-platform Flutter app interfaces in a snap with Modular UI's flexible building blocks.
https://github.com/opxica/modular-ui
dart dart-package flu flutter flutter-package flutter-ui ui-components ui-design uikit
Last synced: 7 months ago
JSON representation
Create consistent and responsive cross-platform Flutter app interfaces in a snap with Modular UI's flexible building blocks.
- Host: GitHub
- URL: https://github.com/opxica/modular-ui
- Owner: opxica
- License: bsd-3-clause
- Created: 2023-12-28T14:28:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-21T20:39:15.000Z (about 2 years ago)
- Last Synced: 2025-10-23T00:55:36.937Z (7 months ago)
- Topics: dart, dart-package, flu, flutter, flutter-package, flutter-ui, ui-components, ui-design, uikit
- Language: Dart
- Homepage: https://www.modularui.site
- Size: 577 KB
- Stars: 259
- Watchers: 1
- Forks: 27
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://modularui.site)
[](https://github.com/opxica)
[](https://twitter.com/modularui)
[](https://discord.com/invite/jEPKuWYt)
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
```terminal
flutter pub add modular_ui
```
#### Import
Add this line to import the package.
```dart
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](https://sunny-cassata-dfe2d4.netlify.app/#/simplecard)
- [MUI Primary Card](https://sunny-cassata-dfe2d4.netlify.app/#/primarycard)
- [MUI SignIn Card](https://sunny-cassata-dfe2d4.netlify.app/#/signincard)
- [MUI SignUp Card](https://sunny-cassata-dfe2d4.netlify.app/#/signupcard)
- [MUI Profile Card](https://sunny-cassata-dfe2d4.netlify.app/#/profilecard)
- [MUI Pricing Card](https://sunny-cassata-dfe2d4.netlify.app/#/pricingcard)
- [MUI Blog Card](https://sunny-cassata-dfe2d4.netlify.app/#/blogcard)
### Buttons
- [MUI Primary Button](https://sunny-cassata-dfe2d4.netlify.app/#/primarybutton)
- [MUI Secondary Button](https://sunny-cassata-dfe2d4.netlify.app/#/secondarybutton)
- [MUI Text Button](https://sunny-cassata-dfe2d4.netlify.app/#/textbutton)
- [MUI Outlined Button](https://sunny-cassata-dfe2d4.netlify.app/#/outlinedbutton)
- [MUI Gradient Button](https://sunny-cassata-dfe2d4.netlify.app/#/gradientbutton)
- [MUI Loading Button](https://sunny-cassata-dfe2d4.netlify.app/#/loadingbutton)
- [MUI Secondary Outlined Button](https://sunny-cassata-dfe2d4.netlify.app/#/secondaryoutlinedbutton)
- [MUI Radio Button](https://sunny-cassata-dfe2d4.netlify.app/#/radiobutton)
- [MUI Primary Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/primarybutton)
- [MUI Secondary Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/secondarybutton)
- [MUI Secondary Outlined Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/secondaryoutlinedbutton)
- [MUI Text Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/textbutton)
- [MUI Outlined Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/outlinedbutton)
- [MUI Loading Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/loadingbutton)
- [MUI Gradient Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/gradientbutton)
### Carousels
- [MUI Carousel1](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel1)
- [MUI Carousel2](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel2)
- [MUI Carousel3](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel3)
- [MUI Carousel4](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel4)
- [MUI Carousel5](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel5)
- [MUI Carousel6](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel6)
### CheckBox
- [MUI Checkbox](https://sunny-cassata-dfe2d4.netlify.app/#/checkbox)
### Dialogs
- [MUI Primary Dialog](https://sunny-cassata-dfe2d4.netlify.app/#/primarydialog)
### Footers
### Input Fields
- [MUI Primary Input Field](https://sunny-cassata-dfe2d4.netlify.app/#/primaryinputfield)
### List Tiles
- [MUI Primary Listtile](https://sunny-cassata-dfe2d4.netlify.app/#/listtile)
### Rating Bars
- [MUI Rating Bar](https://sunny-cassata-dfe2d4.netlify.app/#/ratingbar)
### Switch
- [MUI Switch](https://sunny-cassata-dfe2d4.netlify.app/#/switch)
### Slider
- [MUI Slider](https://sunny-cassata-dfe2d4.netlify.app/#/slider)
### Tabs
- [MUI Tabbar](https://sunny-cassata-dfe2d4.netlify.app/#/tabbar)
- [MUI Tabbar Transparent](https://sunny-cassata-dfe2d4.netlify.app/#/tabbarTransparent)
- [MUI Tabbar Underlined](https://sunny-cassata-dfe2d4.netlify.app/#/tabbarUnderlined)
- [MUI Tabbar Vertical](https://sunny-cassata-dfe2d4.netlify.app/#/tabbarVertical)
## Code Samples
#### Buttons
Primary Button
```dart
MUIPrimaryButton(
text: "Primary Button",
onPressed: () => onButtonPressed("Primary Button"),
),
```
#### Cards
Primary Card
```dart
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
```dart
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](https://discord.gg/t9Vweu68)