{"id":32281289,"url":"https://github.com/opxica/modular-ui","last_synced_at":"2025-10-23T00:55:51.247Z","repository":{"id":214498536,"uuid":"736667159","full_name":"opxica/modular-ui","owner":"opxica","description":"Create consistent and responsive cross-platform Flutter app interfaces in a snap with Modular UI's flexible building blocks.","archived":false,"fork":false,"pushed_at":"2024-05-21T20:39:15.000Z","size":591,"stargazers_count":259,"open_issues_count":7,"forks_count":27,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-23T00:55:36.937Z","etag":null,"topics":["dart","dart-package","flu","flutter","flutter-package","flutter-ui","ui-components","ui-design","uikit"],"latest_commit_sha":null,"homepage":"https://www.modularui.site","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opxica.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-28T14:28:36.000Z","updated_at":"2025-10-07T08:35:01.000Z","dependencies_parsed_at":"2024-02-14T14:28:58.212Z","dependency_job_id":"1a39e93c-fd53-49fd-b138-5b1fc935530e","html_url":"https://github.com/opxica/modular-ui","commit_stats":null,"previous_names":["opxica/modular-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/opxica/modular-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opxica%2Fmodular-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opxica%2Fmodular-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opxica%2Fmodular-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opxica%2Fmodular-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opxica","download_url":"https://codeload.github.com/opxica/modular-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opxica%2Fmodular-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280540647,"owners_count":26347724,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","dart-package","flu","flutter","flutter-package","flutter-ui","ui-components","ui-design","uikit"],"created_at":"2025-10-23T00:55:49.866Z","updated_at":"2025-10-23T00:55:51.239Z","avatar_url":"https://github.com/opxica.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/c4f1045b-0d7a-4228-b663-3e1f8238d59c\" alt=\"ModularUI : Pre-built beautiful flutter widgets Inspired by material-tailwind and shadcn/ui\" /\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Modular UI Badge](https://img.shields.io/badge/website-000000?style=for-the-badge\u0026logo=About.me\u0026logoColor=white)](https://modularui.site)\n[![Github Badge](https://img.shields.io/badge/GitHub-100000?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/opxica)\n[![Twitter Badge](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge\u0026logo=twitter\u0026logoColor=white)](https://twitter.com/modularui)\n[![Discord Badge](https://img.shields.io/badge/Discord-7289DA?style=for-the-badge\u0026logo=discord\u0026logoColor=white)](https://discord.com/invite/jEPKuWYt)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\nCraft beautiful, accessible, and responsive Flutter UIs with a Modular-UI Design-inspired component library\n\u003c/p\u003e\n\n\u003chr\u003e\n\n## How to use\n\n#### Installation\n\nRun this command in your terminal\n\n```terminal\nflutter pub add modular_ui\n```\n\n#### Import\n\nAdd this line to import the package.\n\n```dart\nimport 'package:modular_ui/modular_ui.dart';\n```\n\n\u003chr\u003e\n\n## Modular UI Widgets:\n\n## Primary Cards\n\n\u003ctable\u003e\n  \u003ctr\u003e  \n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/c6e15160-6165-49bd-8016-dcce974eb26a\" alt=\"Image 2\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/52810d6a-6d07-41dc-a8ab-e5f7e95859b1\" alt=\"Image 3\"\u003e\u003c/td\u003e\n     \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/28564d8c-a360-4d58-9c19-62c83b507673\" alt=\"Image 5\"\u003e\u003c/td\u003e\n       \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/dda487f6-c790-47bd-8eba-9fc5c517c3f9\" alt=\"Image 1\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/afe28cac-31f9-4abd-b3c8-9e548291ac14\" alt=\"Image 4\"\u003e\u003c/td\u003e\n    \n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Carousels\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/9161bf90-44af-4fc3-aa15-7a01abb59b24\" alt=\"Gif 1\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/fc8813f1-5b41-417e-a9d4-ff92e286b385\" alt=\"Gif 2\"\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/b1ee6be2-48a0-4384-8993-26b48942a329\" alt=\"Gif 5\"\u003e\u003c/td\u003e\n  \n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/86087933-8470-43c3-9545-009487d48233\" alt=\"Gif 4\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/7b60737f-b598-466e-b6b9-9f5b25171b36\" alt=\"Gif 6\"\u003e\u003c/td\u003e\n       \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/c7a7d5a3-5522-4d15-ab7c-09903d9715eb\" alt=\"Gif 3\"\u003e\u003c/td\u003e\n   \n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Buttons\n\n\u003ctable\u003e\n  \u003ctr\u003e  \n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/c5ea0cd0-5d7c-423e-a85a-77a76e7f3ffe\", height=\"300\", alt=\"Image 2\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/42f199a6-06a2-4ea8-9042-491db28a11a7\", height=\"300\", alt=\"Image 3\"\u003e\u003c/td\u003e\n   \u003c/tr\u003e\n\u003c/table\u003e\n\n## Tab Bar\n\n\u003ctable\u003e\n  \u003ctr\u003e  \n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/18ed3c7a-44e5-4eb5-8c8a-403185976976\" alt=\"Image 2\", height=\"300\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Dialog Box\n\n\u003ctable\u003e\n  \u003ctr\u003e  \n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/6537953f-6009-439f-be29-47ba4a6a839c\" alt=\"Image 2\", height=\"300\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Sliders\n\n\u003ctable\u003e\n  \u003ctr\u003e  \n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/fe250daf-c3e4-4d7c-ad76-22887ecd3601\" alt=\"Image 2\", height=\"300\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Switch\n\n\u003ctable\u003e\n  \u003ctr\u003e  \n    \u003ctd\u003e\u003cimg src=\"https://github.com/opxica/modular-ui/assets/67179751/f2b9faa5-e88a-4ba7-95e7-2a611097ccbb\" alt=\"Image 2\",  height=\"300\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\u003chr\u003e\n\n## Our Widget Catalog\n\n### Cards\n- [MUI Simple Card](https://sunny-cassata-dfe2d4.netlify.app/#/simplecard)\n- [MUI Primary Card](https://sunny-cassata-dfe2d4.netlify.app/#/primarycard)\n- [MUI SignIn Card](https://sunny-cassata-dfe2d4.netlify.app/#/signincard)\n- [MUI SignUp Card](https://sunny-cassata-dfe2d4.netlify.app/#/signupcard)\n- [MUI Profile Card](https://sunny-cassata-dfe2d4.netlify.app/#/profilecard)\n- [MUI Pricing Card](https://sunny-cassata-dfe2d4.netlify.app/#/pricingcard)\n- [MUI Blog Card](https://sunny-cassata-dfe2d4.netlify.app/#/blogcard)\n\n### Buttons\n- [MUI Primary Button](https://sunny-cassata-dfe2d4.netlify.app/#/primarybutton)\n- [MUI Secondary Button](https://sunny-cassata-dfe2d4.netlify.app/#/secondarybutton)\n- [MUI Text Button](https://sunny-cassata-dfe2d4.netlify.app/#/textbutton)\n- [MUI Outlined Button](https://sunny-cassata-dfe2d4.netlify.app/#/outlinedbutton)\n- [MUI Gradient Button](https://sunny-cassata-dfe2d4.netlify.app/#/gradientbutton)\n- [MUI Loading Button](https://sunny-cassata-dfe2d4.netlify.app/#/loadingbutton)\n- [MUI Secondary Outlined Button](https://sunny-cassata-dfe2d4.netlify.app/#/secondaryoutlinedbutton)\n- [MUI Radio Button](https://sunny-cassata-dfe2d4.netlify.app/#/radiobutton)\n- [MUI Primary Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/primarybutton)\n- [MUI Secondary Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/secondarybutton)\n- [MUI Secondary Outlined Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/secondaryoutlinedbutton)\n- [MUI Text Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/textbutton)\n- [MUI Outlined Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/outlinedbutton)\n- [MUI Loading Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/loadingbutton)\n- [MUI Gradient Block Level Button](https://sunny-cassata-dfe2d4.netlify.app/#/block/gradientbutton)\n\n### Carousels\n- [MUI Carousel1](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel1)\n- [MUI Carousel2](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel2)\n- [MUI Carousel3](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel3)\n- [MUI Carousel4](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel4)\n- [MUI Carousel5](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel5)\n- [MUI Carousel6](https://sunny-cassata-dfe2d4.netlify.app/#/carousel/carousel6)\n\n### CheckBox\n- [MUI Checkbox](https://sunny-cassata-dfe2d4.netlify.app/#/checkbox)\n\n### Dialogs\n- [MUI Primary Dialog](https://sunny-cassata-dfe2d4.netlify.app/#/primarydialog)\n\n### Footers\n\n### Input Fields\n- [MUI Primary Input Field](https://sunny-cassata-dfe2d4.netlify.app/#/primaryinputfield)\n\n### List Tiles\n- [MUI Primary Listtile](https://sunny-cassata-dfe2d4.netlify.app/#/listtile)\n\n### Rating Bars\n- [MUI Rating Bar](https://sunny-cassata-dfe2d4.netlify.app/#/ratingbar)\n\n### Switch\n- [MUI Switch](https://sunny-cassata-dfe2d4.netlify.app/#/switch)\n\n### Slider\n- [MUI Slider](https://sunny-cassata-dfe2d4.netlify.app/#/slider)\n\n### Tabs\n- [MUI Tabbar](https://sunny-cassata-dfe2d4.netlify.app/#/tabbar)\n- [MUI Tabbar Transparent](https://sunny-cassata-dfe2d4.netlify.app/#/tabbarTransparent)\n- [MUI Tabbar Underlined](https://sunny-cassata-dfe2d4.netlify.app/#/tabbarUnderlined)\n- [MUI Tabbar Vertical](https://sunny-cassata-dfe2d4.netlify.app/#/tabbarVertical)\n\n\u003chr\u003e\n\n## Code Samples\n\n#### Buttons\n\nPrimary Button\n\n```dart\n MUIPrimaryButton(\n      text: \"Primary Button\",\n      onPressed: () =\u003e onButtonPressed(\"Primary Button\"),\n    ),\n```\n\n####  Cards\n\nPrimary Card\n\n```dart\n  MUIPrimaryCard(\n          title: 'UI/UX Review Check',\n          description:\n              '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',\n          image: Image.network(\n            'https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1\u0026ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\u0026auto=format\u0026fit=crop\u0026w=800\u0026q=80',\n            fit: BoxFit.cover,\n          ),\n          buttons: [\n            MUIPrimaryButton(\n              text: 'Read More',\n              onPressed: () {},\n            ),\n          ],\n        ),\n```\n\n####  Carousal\n\nPrimary Carousal \n\n```dart\n  MUICarousel(\n            images: [\n              \"https://github.com/shadcn.png\",\n              \"https://github.com/shadcn.png\",\n              \"https://github.com/shadcn.png\",\n              \"https://github.com/shadcn.png\",\n              \"https://github.com/shadcn.png\"\n            ],\n            indicatorType: CarouselIndicatorType.dot,\n            duration: Duration(seconds: 2),\n          ),\n```\n\nFor more code samples, you can head on to our documentaion at . https://modularui.site\n\n\u003chr\u003e\n\n## Features\n\n- **Comprehensive Modular-UI Design components:** Build modern and feature-rich interfaces with a wide range of buttons, cards, forms, navigation elements, and more.\n- **Highly customizable:** Tailor components to your exact needs with extensive styling options.\n- **Responsive design:** Ensure optimal UI experiences across different screen sizes.\n- **Accessibility focus:** Built with accessibility in mind, adhering to best practices.\n- **Lightweight and performant:** Efficiently crafted for smooth user interactions.\n\n## Additional Features\n\n- **Custom themes and color palettes:** Define your own visual style for a cohesive look.\n- **Dark mode support:** Seamlessly adapt your UI to user preferences.\n\n\u003chr\u003e\n\n## Contributing\n\nCalling 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! 🚀\nPlease refer to our contribution guidelines for details and don't forget to drop a Hi at [discord](https://discord.gg/t9Vweu68)\n\n\u003chr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopxica%2Fmodular-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopxica%2Fmodular-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopxica%2Fmodular-ui/lists"}