Mudah UI Design System

Mudah UI Design System is a comprehensive suite offering design tokens, guidelines, theming solutions, and a component library. It aids Mudah's front-end and mobile engineers in building consistent UIs more efficiently.

About Mudah UI Design System

Mudah UI Design System includes:

• A set of theme specifications defining primitive Mudah UI design tokens.
• A workbench to preview all available components and their usage guides.
• A suite of CLI tools to assist in generating new components.

Mudah UI Design System does NOT include:

• A base framework for creating Mudah web apps.
• An end-user-facing web application.
• Any full web page.

Building Components

• 📚 Storybook for UI component development and auto-generated docs.
• ⚛️ React, our core UI library for declarative component-centric UI development.
• 📄 Panda Css for CSS-in-JS with build-time generated styles, RSC compatibility, multi-variant support, and best-in-class developer experience.
• ⬇️ MDX within Storybook for seamless React / JSX documentation.

Maintaining the System

• 📦 PNPM as the preferred package manager's CLI.
• 📦 NPM for packaging and distribution.
• 🚥 GitHub Action for continuous integration (CI).

Components Status

Date update: 2024-04-25

Atom Components

| No | Component Name | DWeb | MWeb | Android | iOS | |-----|------------------------------------------------------------|--------|-----------|-----------|-----------| | 1 | Accordion | ✅ 1.3+ | ✅ 1.3+ | | | | 2 | Button | ✅ 1.3+ | ✅ 1.3+ | | | | 3 | Chips | ✅ 1.3+ | ✅ 1.3+ | | | | 4 | Checkbox | ✅ 1.3+ | ✅ 1.3+ | | | | 5 | Radio Button | ✅ 1.3+ | ✅ 1.3+ | | | | 6 | Switches (Material) | ✅ 1.3+ | ✅ 1.3+ | | | | 7 | Toggle (iOS) | n/a | n/a | | | | 8 | Labels | ✅ 1.3+ | ✅ 1.3+ | | | | 9 | List | ✅ 1.3+ | ✅ 1.3+ | | | | 10 | Pagination | ✅ 1.3+ | ✅ 1.3+ | | | | 11 | Progress Indicator | ✅ 1.3+ | ✅ 1.3+ | | | | 12 | Sliders | ✅ 1.3+ | ✅ 1.3+ | | | | 13 | Tabs | ✅ 1.3+ | ✅ 1.3+ | | | | 14 | TextArea | ✅ 1.3+ | ✅ 1.3+ | | | | 14 | TextInput | ✅ 1.3+ | ✅ 1.3+ | | | | 15 | Tooltips | ✅ 1.3+ | ✅ 1.3+ | | |

Molecule Components

| No | Component Name | DWeb | MWeb | Android | iOS | |----|----------------------------------------------------------------|------------|-----------|-----------|-----------| | 1 | Appbar & Header | | | | | | 2 | Bottom Sheet | ✅ 1.3+ | ✅ 1.3+ | | | | 3 | Bottom Navigation | | | | | | 4 | Card | ✅ 1.3+ | ✅ 1.3+ | | | | 5 | Dropdown | ✅ 1.3+ | ✅ 1.3+ | | | | 6 | Dropdown Group | ✅ 1.3+ | ✅ 1.3+ | | | | 7 | Dropdown Range | | | | | | 8 | Date Picker | ✅ 1.3+ | ✅ 1.3+ | | | | 9 | Dialogs | ✅ 1.3+ | ✅ 1.3+ | | | | 10 | Infobox | ✅ 1.3+ | ✅ 1.3+ | | | | 11 | Navigation Drawer | | | | | | 12 | Popup | ✅ 1.3+ | ✅ 1.3+ | | | | 13 | Searchbar | ✅ 1.3+ | ✅ 1.3+ | | | | 14 | Searchbar - multiselect | | | | | | 15 | Snackbars | ✅ 1.3+ | ✅ 1.3+ | | | | 16 | Tables | | | | | | 17 | Onboarding Tooltips | ✅ 1.3+ | ✅ 1.3+ | | |