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!

  1. Fork the repo
  2. Create your feature branch (git checkout -b feature/YourComponent)
  3. Commit your changes
  4. 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.