# Monochrome Edge
A modern, minimalist UI component library with dual-theme system for web applications.
[](https://1eedaegon.github.io/monochrome-edge/)
[](https://www.npmjs.com/package/@monochrome-edge/ui)
[](LICENSE)
[](https://www.jsdelivr.com/package/npm/@monochrome-edge/ui)
## Demo
Check out demo : **[Monochrome Edge](https://1eedaegon.github.io/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
### 📦 Option 1: npm (Recommended for Production)
**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 ...
;
}
```
---
### 🌐 Option 2: CDN (Quick Prototyping)
**Complete Example (CSS + JS)**
```html
Monochrome Edge Demo
```
> ⚠️ **Note**: CDN usage may cause animation flickering on icon-buttons due to network latency. For production, we recommend npm installation.
## Theme System
### Setting Theme Variant
```html
```
### Dark Mode
```html
```
## Component Structure
### Atomic Design System
```
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
### Landscape Backgrounds
Animated background components for visual depth:
```html
```
**Colored Mode:**
```html
```
### Buttons
```html
```
### Cards
```html
```
### Tabs
```html
```
## Advanced Components
### Available Interactive Components
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](https://1eedaegon.github.io/monochrome-edge/) for detailed API references and interactive examples.
## CSS Variables
### Core Tokens
```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
### Button Variants
- `.btn-primary` - Primary action button
- `.btn-secondary` - Secondary action button
- `.btn-ghost` - Subtle ghost button
- `.btn-danger` - Destructive action button
### Button Sizes
- `.btn-small` - Small button
- `.btn-large` - Large button
### Landscape Backgrounds
- `.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](LICENSE)
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md) for development guidelines.
## Links
- [Documentation](DEVELOPMENT.md)
- [GitHub](https://github.com/1eedaegon/monochrome-edge)
- [npm](https://www.npmjs.com/package/@monochrome-edge/ui)
- [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@monochrome-edge/ui)