MON UI

MON UI is the design system and library in use at Mon Protocol to build our internal and external products.

Introduction

MON UI is built as a React library, using Shadcn as the base components.

We use Storybook for documenting and displaying our components. A cloud hosted version of storybook is available at https://design.monprotocol.ai

Under the hood, we use Typescript + Vite for builds, TailwindCSS for styling and Plop for CLI.

Getting Started as a Contributor

Installation

• Before installing, please ensure you have PNPM installed locally.

1. Install the relevant packages

   pnpm install

2. Start your local storybook instance

   pnpm run storybook

Generating a New Component

• This command will start a CLI to help you compose a new component using Shadcn (or not) as a base.

  pnpm run generate

Publishing to NPM

• Our package is hosted on NPM: https://www.npmjs.com/package/@mon-studios/mon-ui

• While our CI/CD is being configured, all publishing will be done manually.

  • You will require write access from one of our package maintainers

• If you have access, you may publish via:

  # if necessary
  npm version <major|minor|patch>
  
  npm publish --access public

Sync Library with Other Projects Locally

This library can be run locally with other local projects to avoid re-publishing the NPM package to review changes on the other project.

• In this library:

pnpm reload-dev:mon-ui

• In other projects using this library:
  • use file: protocol to link packages

pnpm add file:../mon-ui

• reload package dependencies