Majalengka Design System0.1.0
Memulai

Instalasi

Cara memasang dan menggunakan Majalengka Design System di berbagai tumpukan teknologi.

Majalengka Design System menyediakan beberapa jalur adopsi sesuai dengan arsitektur proyek Anda:

Jalur 1: CSS Mandiri via CDN (Paling Cepat)

Cocok untuk: Website OPD/Kecamatan berbasis WordPress, Laravel Blade, CodeIgniter, atau HTML polos. Tidak memerlukan Node.js atau proses build.

Tambahkan berkas CSS di dalam tag <head> situs Anda:

<!-- Memuat Majalengka Design System CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@majalengka/css@latest/dist/majalengka.min.css">

Setelah itu, Anda dapat langsung memakai kelas-kelas standar Majalengka:

<a href="#konten" class="mjl-skip-link">Langsung ke konten</a>

<!-- Tombol Primer -->
<button type="button" class="mjl-btn mjl-btn--primary mjl-btn--md">
  Ajukan Permohonan
</button>

Jalur 2: Paket Komponen Vue 3 / Nuxt

Cocok untuk: Aplikasi SPA/SSR modern berbasis Vue 3 atau Nuxt 3/4.

Pemasangan lewat Package Manager

pnpm add @majalengka/vue @majalengka/css

Import di Entry Point (misal main.ts atau app.vue)

// Impor stylesheet global
import '@majalengka/css';

Pemakaian Komponen di SFC

<script setup lang="ts">
import { MjlTrustBanner, MjlButton, MjlFormField, MjlInput } from '@majalengka/vue';
import { ref } from 'vue';

const nik = ref('');
</script>

<template>
  <MjlTrustBanner owner="Dinas Komunikasi dan Informatika Kab. Majalengka" />
  
  <main class="mjl-container">
    <MjlFormField id="nik-input" label="Nomor Induk Kependudukan (NIK)" required>
      <MjlInput
        id="nik-input"
        v-model="nik"
        placeholder="16 digit NIK sesuai KTP"
      />
    </MjlFormField>

    <MjlButton variant="primary" size="md">
      Cek Status Data
    </MjlButton>
  </main>
</template>

Jalur 3: Integrasi UnoCSS (Preset Majalengka)

Cocok untuk: Proyek Nuxt, Vite, Svelte, atau Astro yang menggunakan UnoCSS.

pnpm add @majalengka/tokens

Tambahkan preset ke uno.config.ts:

import { defineConfig, presetUno } from 'unocss';
import { presetMajalengka } from '@majalengka/tokens/preset';

export default defineConfig({
  presets: [
    presetUno(),
    presetMajalengka()
  ]
});

Kini seluruh utility class Majalengka dapat langsung digunakan:

<div class="bg-mjl-primary-700 text-white p-4 rounded-mjl-md shadow-mjl-sm">
  Kartu berstandar warna Majalengka
</div>

Jalur 4: Integrasi Tailwind CSS

Cocok untuk: Next.js, Remix, Laravel Vite, atau Astro berbasis Tailwind.

Pasang paket token:

pnpm add @majalengka/tokens

Tambahkan token warna dan radius ke tailwind.config.js:

import { colors, spacing } from '@majalengka/tokens';

export default {
  theme: {
    extend: {
      colors: {
        'mjl-primary': colors.primary,
        'mjl-neutral': colors.neutral,
      },
      borderRadius: {
        'mjl-sm': spacing.radius.sm.$value,
        'mjl-md': spacing.radius.md.$value,
        'mjl-lg': spacing.radius.lg.$value,
      }
    }
  }
};

Jalur 5: React & Next.js

Cocok untuk: Aplikasi berbasis Next.js (App Router / Pages Router) atau React Vite.

Pasang paket CSS:

pnpm add @majalengka/css

Gunakan @majalengka/css langsung di app/layout.tsx atau _app.tsx:

import '@majalengka/css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="id">
      <body>
        <main className="mjl-container">
          <button className="mjl-btn mjl-btn--primary mjl-btn--md">
            Layanan Warga
          </button>
          {children}
        </main>
      </body>
    </html>
  );
}

Pengantar

Latar belakang, tujuan, dan sasaran pengguna Majalengka Design System.

Arsitektur & Struktur

Struktur monorepo, tiga tingkatan token, dan anggaran performa.

Copyright © 2026