Install Mobase

pnpm add @momo-webplatform/mobase

Configure Tailwind CSS

Mobase requires Tailwind CSS to be installed prior to use. If you haven't installed it already, follow the instructions in the official Tailwind CSS installation guide (opens in a new tab). For creating beautiful animations, install the plugin tailwindcss-animate (opens in a new tab)

Once Tailwind CSS is installed, update your tailwind.config file to add the necessary configuration for Mobase:

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
 
import { mobaseTW } from "@momo-webplatform/mobase";
 
const config = {
  content: [
    // ...
    "node_modules/@momo-webplatform/mobase/dist/esm/**/*.js",
  ],
  darkMode: ["class"],
  plugins: [require("tailwindcss-animate"),mobaseTW()],
};
 
export default config;

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

next.config.js

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

Using the components

That's all. You can now start using the components in your application.

import { Button } from "@momo-webplatform/mobase";
export default function MyPage() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Introduction Requirements