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