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