Monochrome Edge

A modern, minimalist UI component library with dual-theme system for web applications.

![Live Demo](https://1eedaegon.github.io/monochrome-edge/)
![NPM Version](https://www.npmjs.com/package/@monochrome-edge/ui)
![License](LICENSE)
![jsDelivr](https://www.jsdelivr.com/package/npm/@monochrome-edge/ui)

!Theme Demo

Demo

Check out demo : Monochrome Edge

Overview

Monochrome Edge provides a comprehensive set of UI components with both CSS-only and interactive JavaScript components. The library features a sophisticated dual-theme system (Warm/Cold) with automatic light/dark mode support and animated landscape backgrounds.

Installation & Quick Start

$3

Install
``bash npm install @monochrome-edge/ui`

CSS Only Usage`javascript // Import CSS in your entry file import '@monochrome-edge/ui/css';`

CSS + JavaScript Components (TypeScript)`typescript // Import CSS import '@monochrome-edge/ui/css';

// Import components import { Modal, Toast, Accordion, Tabs, Dropdown } from '@monochrome-edge/ui';

// Use components const modal = new Modal('#myModal', { closeOnBackdrop: true, closeOnEscape: true });

Toast.success('Hello World!');

const accordion = new Accordion('#myAccordion', { allowMultiple: false });`

Framework Examples


React

`jsx // App.js import '@monochrome-edge/ui/css'; import { useEffect } from 'react'; import { Modal, Toast } from '@monochrome-edge/ui';

function App() { useEffect(() => { const modal = new Modal('#myModal'); return () => modal.destroy(); }, []);

return (


  );
}

Vue

`vue


Next.js

`jsx // _app.js or layout.js import '@monochrome-edge/ui/css';

export default function App({ Component, pageProps }) { return ; }

// components/MyModal.js 'use client'; import { useEffect } from 'react'; import { Modal } from '@monochrome-edge/ui';

export default function MyModal() { useEffect(() => { const modal = new Modal('#myModal'); return () => modal.destroy(); }, []); return

...

;
}

---

`$3`

Complete Example (CSS + JS)`html Monochrome Edge Demo


    
      Card Title

    

    Card content here


    
      Section 1

      Content 1

    

    
      Section 2

      Content 2


    
      
        Modal Title

        
      

      
        Modal content goes here


    
      
      
      
    

    
      Content 1

      Content 2

      Content 3


    Action 1
    Action 2
    

    Another Action

> ⚠️ Note: CDN usage may cause animation flickering on icon-buttons due to network latency. For production, we recommend npm installation.

`Theme System`

`$3`

`html

`$3`

`html

`Component Structure`

`$3`

`atoms/ Basic building blocks ├── button Interactive elements ├── input Form controls ├── badge Status indicators └── typography Text styles

molecules/ Composite components ├── card Content containers ├── dropdown Select menus ├── form-group Input groups └── search-bar Search interface

organisms/ Complex UI sections ├── header Page headers ├── sidebar Navigation panels ├── modal Dialog windows └── data-table Data grids

templates/ Page layouts ├── dashboard Admin layouts ├── landing Marketing pages └── app Application shells`

`Key Features`

`$3`

Animated background components for visual depth:

`html

Colored Mode:`html

$3

`html`

`$3`

`html


  
    Title

  

  
    Content goes here

$3

`html


Advanced Components
$3
The library includes advanced JavaScript components for complex interactions:
- Accordion: Collapsible content panels with single/multiple open support
- Modal: Dialog windows with backdrop and keyboard navigation
- Tabs: Tab navigation with programmatic switching
- Toast: Notification system (success, error, info, warning)
- Dropdown: Contextual menus with auto-positioning
- SearchBar: Full-text search with autocomplete
- SearchToolbar: Advanced search with filters and sorting
- TreeView: Hierarchical tree navigation
- GraphView: Canvas-based graph visualization  
- Stepper: Multi-step progress indicator
- MathRenderer: LaTeX math equation rendering
See the live documentation for detailed API references and interactive examples.
CSS Variables
$3

`css :root { / Colors / --theme-bg: / Dynamic based on theme / --theme-surface: / Dynamic based on theme / --theme-accent: / Dynamic based on theme /

/ Typography / --font-family-sans: system-ui, -apple-system, sans-serif --font-size-base: 16px

/ Spacing / --spacing-xs: 0.25rem --spacing-sm: 0.5rem --spacing-md: 1rem --spacing-lg: 1.5rem --spacing-xl: 2rem

/ Borders / --border-radius-sm: 4px --border-radius-md: 8px --border-radius-lg: 12px }`

`Browser Support`

- Chrome 90+ - Firefox 88+ - Safari 14+ - Edge 90+

`Build from Source`

`bash

`Clone repository`


git clone https://github.com/1eedaegon/monochrome-edge.git
Install dependencies

npm install
Development server

npm run dev
Build production

npm run build


Component Classes
$3

- .btn-primary- Primary action button -.btn-secondary- Secondary action button -.btn-ghost- Subtle ghost button -.btn-danger - Destructive action button

`$3`

- .btn-small- Small button -.btn-large - Large button

`$3`

- .b-landscape-wave- Animated wave pattern -.b-landscape-mountain- Mountain silhouette -.b-landscape-forest- Forest scene -.b-landscape-desert - Desert dunes

Attributes: -data-landscape-mode="colored"` - Enable colored theme-aware mode
- Default: monochrome (grayscale)

License

MIT

Contributing

See CONTRIBUTING.md for development guidelines.

Links

- Documentation
- GitHub
- npm
- jsDelivr CDN

Monochrome Edge

A modern, minimalist UI component library with dual-theme system for web applications.

!Theme Demo

Demo

Check out demo : Monochrome Edge

Overview

Installation & Quick Start

$3

Install
``bash npm install @monochrome-edge/ui`

CSS Only Usage`javascript // Import CSS in your entry file import '@monochrome-edge/ui/css';`

CSS + JavaScript Components (TypeScript)`typescript // Import CSS import '@monochrome-edge/ui/css';

// Import components import { Modal, Toast, Accordion, Tabs, Dropdown } from '@monochrome-edge/ui';

// Use components const modal = new Modal('#myModal', { closeOnBackdrop: true, closeOnEscape: true });

Toast.success('Hello World!');

const accordion = new Accordion('#myAccordion', { allowMultiple: false });`

Framework Examples


React

`jsx // App.js import '@monochrome-edge/ui/css'; import { useEffect } from 'react'; import { Modal, Toast } from '@monochrome-edge/ui';

function App() { useEffect(() => { const modal = new Modal('#myModal'); return () => modal.destroy(); }, []);

return (


  );
}

Vue

`vue


Next.js

`jsx // _app.js or layout.js import '@monochrome-edge/ui/css';

export default function App({ Component, pageProps }) { return ; }

// components/MyModal.js 'use client'; import { useEffect } from 'react'; import { Modal } from '@monochrome-edge/ui';

export default function MyModal() { useEffect(() => { const modal = new Modal('#myModal'); return () => modal.destroy(); }, []); return

...

;
}

---

`$3`

Complete Example (CSS + JS)`html Monochrome Edge Demo


    
      Card Title

    

    Card content here


    
      Section 1

      Content 1

    

    
      Section 2

      Content 2


    
      
        Modal Title

        
      

      
        Modal content goes here


    
      
      
      
    

    
      Content 1

      Content 2

      Content 3


    Action 1
    Action 2
    

    Another Action

> ⚠️ Note: CDN usage may cause animation flickering on icon-buttons due to network latency. For production, we recommend npm installation.

`Theme System`

`$3`

`html

`$3`

`html

`Component Structure`

`$3`

`atoms/ Basic building blocks ├── button Interactive elements ├── input Form controls ├── badge Status indicators └── typography Text styles

molecules/ Composite components ├── card Content containers ├── dropdown Select menus ├── form-group Input groups └── search-bar Search interface

organisms/ Complex UI sections ├── header Page headers ├── sidebar Navigation panels ├── modal Dialog windows └── data-table Data grids

templates/ Page layouts ├── dashboard Admin layouts ├── landing Marketing pages └── app Application shells`

`Key Features`

`$3`

Animated background components for visual depth:

`html

Colored Mode:`html

$3

`html`

`$3`

`html


  
    Title

  

  
    Content goes here

$3

`html


Advanced Components
$3
The library includes advanced JavaScript components for complex interactions:
- Accordion: Collapsible content panels with single/multiple open support
- Modal: Dialog windows with backdrop and keyboard navigation
- Tabs: Tab navigation with programmatic switching
- Toast: Notification system (success, error, info, warning)
- Dropdown: Contextual menus with auto-positioning
- SearchBar: Full-text search with autocomplete
- SearchToolbar: Advanced search with filters and sorting
- TreeView: Hierarchical tree navigation
- GraphView: Canvas-based graph visualization  
- Stepper: Multi-step progress indicator
- MathRenderer: LaTeX math equation rendering
See the live documentation for detailed API references and interactive examples.
CSS Variables
$3

`css :root { / Colors / --theme-bg: / Dynamic based on theme / --theme-surface: / Dynamic based on theme / --theme-accent: / Dynamic based on theme /

/ Typography / --font-family-sans: system-ui, -apple-system, sans-serif --font-size-base: 16px

/ Spacing / --spacing-xs: 0.25rem --spacing-sm: 0.5rem --spacing-md: 1rem --spacing-lg: 1.5rem --spacing-xl: 2rem

/ Borders / --border-radius-sm: 4px --border-radius-md: 8px --border-radius-lg: 12px }`

`Browser Support`

- Chrome 90+ - Firefox 88+ - Safari 14+ - Edge 90+

`Build from Source`

`bash

`Clone repository`


git clone https://github.com/1eedaegon/monochrome-edge.git
Install dependencies

npm install
Development server

npm run dev
Build production

npm run build


Component Classes
$3

- .btn-primary- Primary action button -.btn-secondary- Secondary action button -.btn-ghost- Subtle ghost button -.btn-danger - Destructive action button

`$3`

- .btn-small- Small button -.btn-large - Large button

`$3`

- .b-landscape-wave- Animated wave pattern -.b-landscape-mountain- Mountain silhouette -.b-landscape-forest- Forest scene -.b-landscape-desert - Desert dunes

Attributes: -data-landscape-mode="colored"` - Enable colored theme-aware mode
- Default: monochrome (grayscale)

License

MIT

Contributing

See CONTRIBUTING.md for development guidelines.

Links

- Documentation
- GitHub
- npm
- jsDelivr CDN