Top

Mofi Documentation

Getting Started

The Mofi Web UI Kit is providing designed screens customized for web applications.

Theme Flexibility: Seamlessly switch between light and dark modes, with customizable theme colors.
Multilingual Support:Includes built-in options for multiple languages, with support for RTL.
State Management:Efficiently manage states using the Provider package.
Extensibility:Easily integrate and customize with support for Dart extensions.
Modular Design: The code is well-structured, with clear naming conventions, making it easy to reuse and modify.
Purpose: This UI Kit is designed to help developers create beautiful and feature-rich web applications with ease, utilizing the powerful features of Mofi Web.

This Documentation will guide you through all the concepts used in the theme and hopefully answer all your queries. Below are the things that you are going to find in this documentation.

Installation Guide: To make sure that you can setup your project smoothly, we have provided an Installation guide for you to follow. This Installion guide contains everything from installing node till running your project. Do not miss any steps while creating a new project or else you might have to start over again.

Folder Structure: Before starting any project, it is very important to set a folder structure. It helps us organise our code neatly and makes it easier for the future developers to modify anything in the theme.

Make sure that you go through the explanation of folder structure used in our theme, it will become easier for you to make any modifications. If you want, you could follow our folder structure in you project, that way if you encounter any difficulties in your project, you can refer our theme.


Let's take a look at the Components provided in Mofi


  • Basic components
    1. Text
    2. Image
    3. TextInput
    4. ScrollView
    5. Button
    6. Modal
    7. DatePicker
    8. Switch
    9. Slider
    10. Dropdown
    11. Chart
    12. GridView
    13. Slider
    14. Switch
    15. RadioButton
    16. CheckBox
    17. Form
    18. Tag
    19. Table
    20. Calender
    21. List
    22. Icons
    23. ProgressBar
    24. DrawerLayout