Micrographs

Dark industrial terminal aesthetic. Pure SVG. CSS custom properties. Zero dependencies.

Install · Components · Theming · Frameworks · Purchase

What is Micrographics?

Micrographics is a commercial component library of 84 animated micro-UI elements — signal meters, gauges, radar displays, terminal text effects, HUD overlays, and more. Every component is:

• Pure SVG — pixel-crisp at any size, no canvas or WebGL
• Themeable — one CSS variable change recolors everything
• Tiny — ~1-3 KB per component, zero runtime dependencies
• Universal — React, Vue 3, Svelte 5, and Vanilla Web Components

Built for dashboards, monitoring panels, developer tools, creative portfolios, landing pages, and anywhere you want that retro-terminal industrial look.

Preview

Install

# React
npm install @micrographics-js/react @micrographics-js/core

# Vue 3
npm install @micrographics-js/vue @micrographics-js/core

# Svelte 5
npm install @micrographics-js/svelte @micrographics-js/core

# Vanilla Web Components
npm install @micrographics-js/vanilla @micrographics-js/core

# Tailwind plugin (free, no token needed)
npm install @micrographics-js/tailwind

After purchasing, add your license key — that's it. No tokens, no .npmrc.

Add License Key

Add this once in your app entry point:

// Next.js: app/layout.tsx
// Vite: src/main.tsx
// Any React: your root file
import { initLicense } from "@micrographics-js/core";
initLicense("your-license-key");

Or set via environment variable (Vite only — Next.js requires initLicense()):

# .env (Vite projects)
VITE_MICROGRAPHICS_KEY=your-license-key

Quick Start

React

import { SignalMeter, PulseTag, DialGauge, RadarSweep } from "@micrographics-js/react";

function Dashboard() {
  return (
    <div style={{ background: "#0d0e17", padding: 24 }}>
      <SignalMeter bars={5} />
      <PulseTag label="ONLINE" />
      <DialGauge value={72} />
      <RadarSweep size={80} />
    </div>
  );
}

Vue 3

<script setup>
import { SignalMeter, RadarSweep } from "@micrographics-js/vue";
</script>
<template>
  <SignalMeter :bars="5" />
  <RadarSweep :size="80" />
</template>

Svelte 5

<script>
import { SignalMeter, RadarSweep } from "@micrographics-js/svelte";
</script>
<SignalMeter bars={5} />
<RadarSweep size={80} />

Vanilla Web Components

<script type="module">import "@micrographics-js/vanilla";</script>
<mg-signal-meter bars="5"></mg-signal-meter>
<mg-radar-sweep size="80"></mg-radar-sweep>

Components

84 components across 8 packs:

Theming

One CSS variable changes everything:

:root { --accent: #3ecf8e; }         /* phosphor green (default) */
.danger-zone { --accent: #e05252; }   /* override per-section */

All 84 components respond instantly to CSS variable changes. Per-component color prop overrides are also supported:

<SignalMeter color="#8b5cf6" />
<DialGauge value={80} color="var(--accent-red)" />

Tailwind CSS

npm install @micrographics-js/tailwind   # free, no token needed

// tailwind.config.js
module.exports = {
  presets: [require("@micrographics-js/tailwind/preset")],
};

<div class="bg-mg-bg font-mg mg-card">
  <span class="text-mg-accent mg-glow">ACTIVE</span>
  <span class="mg-badge mg-badge-warn">DEGRADED</span>
</div>

Frameworks

Architecture

packages/
  core/         Shared utilities (RNG, easing, ticker) — free, MIT
  react/        84 React components
  vue/          84 Vue 3 SFC components
  svelte/       84 Svelte 5 components
  vanilla/      52 Web Components (<mg-*> custom elements)
  tailwind/     Tailwind CSS plugin + preset — free, MIT
apps/
  test-app/     Live gallery with theme customizer

Design Principles

• Pure SVG — shapeRendering="crispEdges", pixel-perfect at any size
• CSS Custom Properties — no hardcoded colors, fully themeable
• Zero Runtime Deps — only @micrographics-js/core (~5 KB)
• Monospace First — designed for JetBrains Mono
• Subtle Animations — non-distracting, via createTicker()
• Framework Parity — identical API across React/Vue/Svelte/Vanilla

Purchase

$49 — one-time payment, lifetime access. All 84 components, all 4 frameworks, all future updates.

@micrographics-js/core and @micrographics-js/tailwind are free and MIT licensed.

Get Micrographics — $49

Next.js / App Router

All React components include "use client" — zero config needed:

import { SignalMeter, PixelClock } from "@micrographics-js/react";
export default function Page() {
  return <div className="bg-mg-bg p-8"><SignalMeter /><PixelClock /></div>;
}

Browser Support

Chrome 90+ · Firefox 90+ · Safari 15+ · Edge 90+

Documentation

• Full API Reference — all 84 components, props, examples
• Website Integration — embed demos in your site
• Claude Code Guide — prompts for AI-assisted integration
• Publishing Guide — how packages are distributed
• LemonSqueezy Tiers — pricing structure

License

@micrographics-js/core and @micrographics-js/tailwind are MIT licensed.

Framework packages (react, vue, svelte, vanilla) require a commercial license for production use. Free for personal/non-commercial projects.

Purchase a license