Frameworks
Classes on HTML work everywhere. Here is how to wire them into common stacks.
Any stack
MIAN is markup plus classes, so there is nothing framework-specific to install. The only rule: if your framework renders content after load, mian.js notices on its own (it watches the DOM), and you can also call Mian.init(element).
React / Next.js
class="hl-c">// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang=class="hl-s">"en" data-noodle=class="hl-s">"lamian">
<head><link rel=class="hl-s">"stylesheet" href=class="hl-s">"https:class="hl-c">//mian.ro/dist/mian.css" /></head>
<body>{children}<Script src=class="hl-s">"https:class="hl-c">//mian.ro/dist/mian.js" strategy=class="hl-s">"afterInteractive" /></body>
</html>
);
}
class="hl-c">// anywhere
<button className=class="hl-s">"mn-btn mn-btn-outline">Cancel</button>Use className. Listen for MIAN events with addEventListener in an effect: they are ordinary DOM CustomEvents such as mn:change.
Vue / Nuxt
<template>
<div class="mn-tabs">
<div class="mn-tab-list" aria-label="Settings">
<button class="mn-tab" aria-selected="true">General</button>
<button class="mn-tab">Billing</button>
</div>
<div class="mn-tab-panel">…</div>
<div class="mn-tab-panel">…</div>
</div>
</template>Laravel, WordPress, plain PHP
<button class="mn-btn <?= $danger ? 'mn-danger' : '' ?>" type="submit">
<?= htmlspecialchars($label) ?>
</button>Events
Interactive components emit bubbling CustomEvents prefixed mn::
| mn:change | Tabs, toggle group, combobox. |
| mn:select | Dropdown menu, command palette (cancelable). |
| mn:open · mn:close | Modal and drawer. |
| mn:complete | OTP input. |
| mn:remove · mn:dismiss | Chip and alert (cancelable). |
| mn:theme | Noodle or mode changed. |