flutter_moon_ui_kit π
A modern, elegant, and scalable Flutter UI Kit inspired by the Moon design system.
Built for mobile, web, and desktop using clean architecture, responsive layouts, and
full theming support.
β¨ Features
- π§© Dozens of clean, reusable UI components
- π¨ Light & dark theme support with extendable tokens
- π± Responsive layouts (PWA + mobile + desktop)
- π§± Consistent design system structure
- π‘ Built with Flutter 3.22+ and Material 3
- π₯ Easily extendable for real apps or design systems
π Getting Started
1. Install
Add to your pubspec.yaml:
dependencies:
flutter_moon_ui_kit: ^0.0.2
Or from local path:
dependencies:
flutter_moon_ui_kit:
path: ../flutter_moon_ui_kit
2. Import & Use
import 'package:flutter_moon_ui_kit/flutter_moon_ui_kit.dart';
MoonButton(
label: "Click Me",
onPressed: () {},
);
MoonTag(label: "Design");
π§± Components Included
| Category | Components |
|---|---|
| Buttons | MoonButton, MoonIconButton |
| Inputs | MoonInputField, MoonPasswordField, MoonTextArea, MoonCodeInputField |
| Toggles | MoonCheckbox, MoonRadioButton, MoonSwitch |
| Tags | MoonTag, MoonTagInput |
| Navigation | MoonTabs, MoonSideNav, MoonBottomNavigationBar, MoonBreadcrumbs |
| Feedback | MoonToast, MoonSnackbar, MoonAlert, MoonTooltip, MoonEmptyState |
| Display | MoonCard, MoonImage, MoonAvatar, MoonCarousel, MoonSkeleton |
| Forms | MoonDatePicker, MoonFileUploader, MoonRatingStars |
| Layout | MoonDivider, MoonStepperHorizontal, MoonStepperVertical, MoonDialog |
| Theme | MoonTheme, MoonColors, MoonTextStyles, MoonSpacing, MoonIcons |
| Data | MoonTable |
β All components are responsive and support light/dark modes.
π¦ Example App
Explore the full component catalog in the example app included in this repo.
cd example
flutter run -d chrome
π§βπ» Contributing
We welcome contributions!
- Fork the repo
- Create your feature branch (
git checkout -b feature/YourComponent) - Commit your changes
- Push and create a PR
π License
This project is licensed under the MIT License.
π Author
Maintained by Yeshan Perera β’ yeshanperera.com
Inspired by Moon Design System.
π Star this repo if you find it helpful β built with β€οΈ for the Flutter community.