# Mobase
[](https://www.npmjs.com/package/@momo-webplatform/mobase)
[](https://www.npmjs.com/package/@momo-webplatform/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:
```bash
pnpm i autoprefixer postcss tailwindcss
pnpm tailwindcss init -p
```
Point Tailwind CSS to files you have `className=".."` in:
```javascript
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:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Automatically transpile and bundle dependencies, update your `next.config.js` file to add the necessary configuration for Mobase:
```js filename="next.config.js"
/** @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`:
```bash
npm i @momo-webplatform/mobase
```
2. Add the Mobase plugin to `tailwind.config.js`, and include content from `@momo-webplatform/mobase`:
```js
/** @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:
```tsx
import { Button } from "@momo-webplatform/mobase";
export default function MyPage() {
return (
);
}
```
## 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](https://dev1.momo.vn:3000/figma/)
## 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](./src/components/Carousel/Carousel.tsx). The user may pass their `opts` or `plugins` into this component for customizing.
- `react-hook-form`:
Check the implementation of [form-related components](./src/components/Form/Form.tsx). 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](./src/components/Calendar/Calendar.tsx). 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](https://atlassiansuite.mservice.com.vn:8443/browse/WP-1303) 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](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#overrides).
- **`yarn` (legacy)**: [doc](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/).
- **`yarn` (modern)**: [doc](https://yarnpkg.com/configuration/manifest#resolutions).
---
_Source: https://npm.io/package/@momo-webplatform/mobase · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
