Mobase

Mobase is MoMo website design system, a collection of guidelines, components and tools for creating intuitive, user-first experiences.

With Mobase, you get a range of pre-built, customizable components that are easy to use and integrate into your React projects. It also comes with full TypeScript support, ensuring type safety and developer-friendly experience.

Get Started with Mobase →

Getting Started

Visit Mobase Docs to get started.

Setup Tailwind CSS

Install Tailwind CSS:

pnpm i autoprefixer postcss tailwindcss
pnpm tailwindcss init -p

Point Tailwind CSS to files you have className=".." in:

import { mobaseTW } from "@momo-webplatform/mobase";

const config = {
  content: [
    // ...
    "node_modules/@momo-webplatform/mobase/dist/esm/**/*.js",
  ],
  darkMode: ["class"],
  plugins: [mobaseTW()],
};

export default config;

Add Tailwind CSS to a CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Automatically transpile and bundle dependencies, update your next.config.js file to add the necessary configuration for Mobase:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["@momo-webplatform/mobase"],
  ...
}
export default nextConfig;

Install Mobase React

1. Run the following command to install @momo-webplatform/mobase:

npm i @momo-webplatform/mobase

2. Add the Mobase plugin to tailwind.config.js, and include content from @momo-webplatform/mobase:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    "node_modules/@momo-webplatform/mobase/lib/esm/**/*.js",
  ],
  plugins: [
    // ...
  ],
};

Try it out

How you use Mobase React depends on your project setup. In general, you can just import the components you want to use from @momo-webplatform/mobase and use them in a React .jsx file:

import { Button } from "@momo-webplatform/mobase";

export default function MyPage() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Figma

If you need the Figma files for the components you can check out our website for more information:

🎨 Get access to the Figma design files

Dependencies

peerDependencies

peerDependencies are dependencies which must be installed and have their versions controlled by the user of mobase in order for them to work correctly.

There are three types of peerDependencies in mobase:

1. Framework

These dependencies are the environment in which mobase runs. The list of dependencies of this type are:

• react
• next

2. User-Configurable Libraries

These dependencies require configuration or data directly from the user. To prevent issues from breaking changes, it is essential that the versions used by mobase and the user are identical. This is particularly important for internal changes not covered by official documentation (e.g., react-hook-form).

• embla-carousel: the base package for embla-carousel-react.

• embla-carousel-react:

  Check the implementation of Carousel component. The user may pass their opts or plugins into this component for customizing.

• react-hook-form:

  Check the implementation of form-related components. The user need to pass properties created by useForm on their side to make use of these components (Form component of mobase is FormProvider of react-hook-form).

• react-day-picker:

  Check the implementation of Calendar component. The user can customize this component by passing props of DayPicker component from react-day-picker.

3. Related Libraries

These dependencies are required by the user-configurable libraries listed above.

• @hookform/resolvers: A dependency of react-hook-form.

• zod: A dependency of @hookform/resolvers.

• embla-carousel-autoplay: A dependency of embla-carousel.

Please refer to this JIRA ticket for additional context.

overrides (npm, pnpm)/resolutions (yarn)

Important: Use the following instructions with caution. Installing package versions not specified in mobase's package.json may lead to unexpected errors, crashes, or other malfunctions. The mobase development team cannot guarantee support for issues resulting from such modifications.

To override a package version, you can utilize the overrides/resolutions feature of your package manager. This is useful in situations where the mobase team may have missed a peer dependency that conflicts with your project's version of the same package.

Consult the official documentation for more information:

• npm/pnpm: doc.

• yarn (legacy): doc.

• yarn (modern): doc.