0.2.42 • Published 9 months ago

@momo-webplatform/mobase v0.2.42

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

Mobase

npm.io npm.io

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
  1. 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

0.2.42

9 months ago

0.2.41

9 months ago

0.2.40

9 months ago

0.2.39

9 months ago

0.2.38

10 months ago

0.2.37

10 months ago

0.2.36

10 months ago

0.2.35

11 months ago

0.2.34

11 months ago

0.0.44

1 year ago

0.0.45

1 year ago

0.2.27

11 months ago

0.2.26

11 months ago

0.2.25

11 months ago

0.2.24

11 months ago

0.2.23

11 months ago

0.2.22

11 months ago

0.2.21

11 months ago

0.2.20

11 months ago

0.2.19

11 months ago

0.2.18

12 months ago

0.2.17

12 months ago

0.2.16

12 months ago

0.2.15

12 months ago

0.2.14

12 months ago

0.2.13

12 months ago

0.2.12

12 months ago

0.2.11

12 months ago

0.2.10

12 months ago

0.2.30

11 months ago

0.2.33

11 months ago

0.2.32

11 months ago

0.2.31

11 months ago

0.2.1

1 year ago

0.2.29

11 months ago

0.2.7

1 year ago

0.2.6

1 year ago

0.2.9

12 months ago

0.2.8

12 months ago

0.2.3

1 year ago

0.2.2

1 year ago

0.2.5

1 year ago

0.2.4

1 year ago

0.0.42

1 year ago

0.0.43

1 year ago

0.0.41

1 year ago

0.0.40

1 year ago

0.0.39

1 year ago

0.0.38

1 year ago

0.0.37

1 year ago

0.0.34

1 year ago

0.0.35

1 year ago

0.0.32

1 year ago

0.0.33

1 year ago

0.0.30

1 year ago

0.0.31

1 year ago

0.0.26

1 year ago

0.0.27

1 year ago

0.0.28

1 year ago

0.0.29

1 year ago

0.0.25

1 year ago

0.0.24

1 year ago

0.0.23

1 year ago

0.0.20

1 year ago

0.0.21

1 year ago

0.0.22

1 year ago

0.0.17

1 year ago

0.0.18

1 year ago

0.0.19

1 year ago

0.0.16

1 year ago

0.0.15

1 year ago

0.0.12

1 year ago

0.0.13

1 year ago

0.0.14

1 year ago

0.0.10

1 year ago

0.0.11

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago