Integration Guide

Get started with Monochrome Edge in minutes. Choose your preferred installation method.

Quick Start

The fastest way to start using Monochrome Edge is via CDN. Add a single line to your HTML and you're ready to go.

HTML 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@monochrome-edge/ui@latest/dist/monochrome.min.css">
💡 Production Tip
For production, pin to a specific version instead of using @latest to ensure consistent styling across deployments.

CDN Installation

Use jsDelivr CDN for the fastest and easiest integration. No build process required.

Complete Setup

index.html 
<!DOCTYPE html>
<html lang="en" data-theme="light" data-theme-variant="warm">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>

    <!-- Monochrome Edge CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@monochrome-edge/ui@latest/dist/monochrome.min.css">
</head>
<body>
    <button class="btn btn-primary">Click Me</button>
</body>
</html>

Version Pinning

Replace @latest with a specific version for production stability:

HTML 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@monochrome-edge/ui@latest/dist/monochrome.min.css">

npm Installation

For projects with a build process, install via npm for better control and tree-shaking benefits.

Install the package

Run the following command in your project directory:

Terminal 
npm install @monochrome-edge/ui

Import the CSS

Import the CSS file in your main JavaScript or CSS entry point:

main.js 
import '@monochrome-edge/ui/dist/monochrome.min.css';

Or in your CSS file:

styles.css 
@import '@monochrome-edge/ui/dist/monochrome.min.css';

Start using components

You're all set! Start using Monochrome Edge classes in your HTML.

App.jsx 
function App() {
  return (
    <div className="card">
      <h2>Welcome</h2>
      <p>Get started with Monochrome Edge</p>
      <button className="btn btn-primary">Get Started</button>
    </div>
  );
}

Basic Usage

Monochrome Edge is a pure CSS library. Apply classes to your HTML elements to style them.

Buttons

HTML 
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-ghost">Ghost Button</button>

Cards

HTML 
<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
  <button class="btn btn-primary">Action</button>
</div>

Forms

HTML 
<div class="form-group">
  <label class="label">Email</label>
  <input type="email" class="input" placeholder="you@example.com">
</div>

Theme Configuration

Monochrome Edge includes two theme variants (Warm and Cold) and supports light/dark modes.

Setting Theme Attributes

Control themes using HTML data attributes on the root element:

HTML 
<!-- Warm theme, light mode -->
<html data-theme="light" data-theme-variant="warm">

<!-- Cold theme, dark mode -->
<html data-theme="dark" data-theme-variant="cold">

Dynamic Theme Switching

Toggle themes programmatically with JavaScript:

JavaScript 
// Toggle light/dark mode
function toggleMode() {
  const html = document.documentElement;
  const currentMode = html.getAttribute('data-theme');
  html.setAttribute('data-theme', currentMode === 'light' ? 'dark' : 'light');
}

// Toggle warm/cold variant
function toggleVariant() {
  const html = document.documentElement;
  const currentVariant = html.getAttribute('data-theme-variant');
  html.setAttribute('data-theme-variant', currentVariant === 'warm' ? 'cold' : 'warm');
}

Using Components

Explore all available components and their variants in the main documentation.

📚 Complete Documentation
View the full component library and interactive examples at the main demo page.

Landscape Backgrounds

Add animated landscape backgrounds for visual depth:

HTML 
<!-- Wave pattern -->
<div class="b-landscape b-landscape-wave"></div>

<!-- Mountain pattern -->
<div class="b-landscape b-landscape-mountain"></div>

<!-- Colored mode -->
<div class="b-landscape b-landscape-wave" data-landscape-mode="colored"></div>

Available Patterns

Framework Adapters

The same components ship as native adapters for every major framework. Each adapter wraps the canonical pure CSS/JS base, so behaviour stays identical across React, Vue, jQuery and Web Components. Pick the entry point for your stack:

React

JSX 
import '@monochrome-edge/ui/css';
import {
  ThemeProvider, Button, Modal, Input,
  Accordion, Tabs, Dropdown,
  SearchBar, TreeView, Stepper, TOC,
} from '@monochrome-edge/ui/react';

function App() {
  const [open, setOpen] = React.useState(false);
  return (
    <ThemeProvider defaultTheme="warm" defaultMode="light">
      <Button variant="primary" onClick={() => setOpen(true)}>Open</Button>
      <Modal isOpen={open} onClose={() => setOpen(false)} title="Hi">…</Modal>
      <TreeView data={tree} onNodeClick={(n) => console.log(n.label)} />
    </ThemeProvider>
  );
}

Vue

Vue 
<script setup>
import '@monochrome-edge/ui/css';
import { Button, Modal, TreeView } from '@monochrome-edge/ui/vue';
import { ref } from 'vue';
const open = ref(false);
</script>

<template>
  <Button variant="primary" @click="open = true">Open</Button>
  <Modal :is-open="open" title="Hi" @close="open = false">…</Modal>
  <TreeView :data="tree" @node-click="(n) => log(n.label)" />
</template>

jQuery

JavaScript 
import '@monochrome-edge/ui/css';
import '@monochrome-edge/ui/jquery';

$('#myModal').mceModal();
$('#myAccordion').mceAccordion({ allowMultiple: true });
$('#myTabs').mceTabs();
$('body').mceToast('Saved!', 'success');

Web Components

HTML 
<script type="module">
  import '@monochrome-edge/ui/web-components';
</script>

<mce-button variant="primary">Click</mce-button>
<mce-tree-view id="tree"></mce-tree-view>
<mce-search-toolbar placeholder="Search…"></mce-search-toolbar>

<script type="module">
  document.querySelector('#tree').data = treeData;
</script>
Entry points
@monochrome-edge/ui (vanilla), /react, /vue, /jquery, /web-components, /css. All adapters expose the full component set, including the interactive components (Accordion, Tabs, Dropdown, SearchBar, SearchToolbar, TreeView, Stepper, Math, GraphView, TOC).