Majalengka Design System0.1.0
Memulai

Svelte & SvelteKit

Cara integrasi Majalengka Design System di proyek Svelte 5 dan SvelteKit.

Svelte dan SvelteKit bekerja mulus dengan Majalengka Design System. Anda bisa memuat CSS global melalui layout SvelteKit atau memanfaatkan preset UnoCSS @majalengka/tokens/preset di tumpukan Vite Anda.

Pemasangan

Pasang paket yang diperlukan ke dalam proyek Svelte:

pnpm add @majalengka/css @majalengka/tokens

Opsi 1: Penggunaan CSS Mandiri di SvelteKit

Muat stylesheet global di dalam berkas layout root (src/routes/+layout.svelte):

src/routes/+layout.svelte
<script lang="ts">
  import '@majalengka/css';

  let { children } = $props();
</script>

<svelte:head>
  <title>Portal Komunitas Majalengka</title>
</svelte:head>

<!-- Tautan lewati konten untuk navigasi keyboard -->
<a href="#konten" class="mjl-skip-link">Langsung ke konten</a>

<div class="mjl-container py-6">
  <header class="mb-8">
    <h1 class="text-2xl font-bold font-['Plus_Jakarta_Sans'] text-neutral-900 dark:text-white">
      Majalengka Digital
    </h1>
  </header>

  <main id="konten">
    {@render children()}
  </main>
</div>

Opsi 2: Integrasi UnoCSS di Svelte / Vite

Jika proyek Svelte Anda memakai UnoCSS (@unocss/svelte-scoped atau unocss/vite), pasang preset Majalengka di uno.config.ts:

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

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

Tambahkan UnoCSS ke vite.config.ts:

vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [
    UnoCSS(),
    sveltekit()
  ]
});

Contoh Komponen Svelte 5

Berikut contoh pembuatan komponen tombol yang mendukung berbagai varian Majalengka:

src/lib/components/Button.svelte
<script lang="ts">
  import type { Snippet } from 'vue';

  interface Props {
    variant?: 'primary' | 'secondary' | 'outline' | 'danger';
    size?: 'sm' | 'md' | 'lg';
    disabled?: boolean;
    onclick?: () => void;
    children?: import('svelte').Snippet;
  }

  let {
    variant = 'primary',
    size = 'md',
    disabled = false,
    onclick,
    children
  }: Props = $props();

  const variantClasses = {
    primary: 'mjl-btn--primary',
    secondary: 'mjl-btn--secondary',
    outline: 'mjl-btn--outline',
    danger: 'mjl-btn--danger'
  };

  const sizeClasses = {
    sm: 'mjl-btn--sm',
    md: 'mjl-btn--md',
    lg: 'mjl-btn--lg'
  };
</script>

<button
  type="button"
  class="mjl-btn {variantClasses[variant]} {sizeClasses[size]}"
  {disabled}
  {onclick}
>
  {#if children}
    {@render children()}
  {/if}
</button>

Pemakaian Komponen di Halaman:

src/routes/+page.svelte
<script lang="ts">
  import Button from '$lib/components/Button.svelte';

  function ajukanLayanan() {
    alert('Permohonan layanan dibuka');
  }
</script>

<div class="space-x-3">
  <Button variant="primary" size="md" onclick={ajukanLayanan}>
    Ajukan Bantuan Sosial
  </Button>

  <Button variant="secondary" size="md">
    Lihat Persyaratan
  </Button>
</div>

Next.js & React

Panduan integrasi Majalengka Design System di Next.js (App Router dan Pages Router) serta React.

Angular

Panduan instalasi dan penggunaan Majalengka Design System di proyek Angular (v17 ke atas).

Copyright © 2026