Skip to main content

​
Installation

Monochrome is distributed as a single package that includes the core runtime and wrappers for React and Vue.

​
Package managers

npm install monochrome

​
Import paths

Monochrome provides three entry points: 
import "monochrome"                               // Core (auto-activates)
import { Accordion } from "monochrome/react"       // React components
import { Accordion } from "monochrome/vue"         // Vue components

​
Core runtime

The core runtime must be imported once at your app’s entry point. It automatically activates and handles all component interactions through event delegation: 
import "monochrome"
The core has side effects — it registers global event listeners for click, keydown, pointermove, scroll, resize, and beforematch. Import it once in your main entry file.

​
React

Import React components from monochrome/react: 
import "monochrome"
import { Accordion, Tabs, Menu, Collapsible } from "monochrome/react"
Requirements:
  • React 18 or higher
  • React DOM 18 or higher

​
Vue

Import Vue components from monochrome/vue: 
<script setup lang="ts">
import { Accordion, Tabs, Menu, Collapsible } from "monochrome/vue"
</script>
Requirements:
  • Vue 3.5 or higher
Vue components use provide/inject for component context and work with both Vue 3 Composition API and Options API.

​
Plain HTML (no framework)

Monochrome works with plain HTML. Include the script from a CDN: 
<script src="https://unpkg.com/monochrome"></script>
Then render the correct HTML structure manually. The core will activate automatically and handle all interactions. See the Plain HTML guide for complete examples.

​
TypeScript

Monochrome is written in TypeScript and includes type definitions. React exports the BaseProps type for extending components: 
import type { BaseProps } from "monochrome/react"
All component props are fully typed with IntelliSense support in VS Code and other TypeScript-aware editors.

​
Package exports

The package provides three exports configured in package.json:
ExportTypesRuntime
monochrome./dist/index.d.ts./dist/index.js
monochrome/react./dist/react/index.d.ts./dist/react/index.js
monochrome/vue./dist/vue/index.d.ts./dist/vue/index.js

​
Peer dependencies

React and Vue are optional peer dependencies. You only need to install the framework you’re using: 
{
  "peerDependencies": {
    "react": ">=18",
    "react-dom": ">=18",
    "vue": ">=3.5"
  },
  "peerDependenciesMeta": {
    "react": { "optional": true },
    "react-dom": { "optional": true },
    "vue": { "optional": true }
  }
}

​
Bundle size

The entire library including all four components is 2.2kB gzipped:
  • Core runtime: ~550 lines, single file
  • React wrappers: thin createElement() render functions
  • Vue wrappers: thin h() render functions
The core has side effects and should only be imported once. Most bundlers will tree-shake unused component wrappers, but the core will always be included.

​
Next steps

Quick Start

Build your first accordion component

Components

Explore all available components

Build docs developers (and LLMs) love

Get started for freeTalk to us