@momo-webplatform/mobase v0.2.42
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
- Run the following command to install
@momo-webplatform/mobase
:
npm i @momo-webplatform/mobase
- 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:
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago