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

$3

- 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
`

$3

- This command will start a CLI to help you compose a new component using Shadcn (or not) as a base.
`
pnpm run generate
`

$3

- 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

npm publish --access public
`

$3

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:

`bash
pnpm reload-dev:mon-ui
`

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

`bash
pnpm add file:../mon-ui
``

- reload package dependencies