design-ui-hung1

Intro

Mudah UI Design System is a system of design tokens, guidelines, theming solution and components library that helps Mudah front end and mobile engineers build consistent UIs faster and more satisfyingly.

Quick start

Several quick start options are available:

• Install with npm: npm install mudah-ui
• Install with yarn: yarn add mudah-ui

Usage

Here is a quick example to get you started: ./App.tsx

import React, { useState, useEffect } from 'react';
import { Button } from "mudah-ui";

export default function App() {
 return (
    <div className="App">
        <Button>Default</Button>
    </div>
 )
}

What Mudah UI Design System is

• A theme specifications that define primitive Mudah UI design tokens
• A workbench to preview all available components and their usage guide
• A set of CLI tools to assist generate new components...

What Mudah UI Design System is NOT

• A base framework for doing Mudah web apps
• An end user-facing web app
• Any full web page

Building components:

• Storybook for UI component development and auto-generated docs
• React declarative component-centric UI. React is also our core UI library of Front End development
• System UI Theme Specification as a standard design token format with theme-aware css props helper
• MDX (part of Storybook) for seamless React / JSX documentation

Maintaining the system:

• NPM for packaging and distribution
• yarn as package manager's CLI
• Gitlab CI: Continuous integration