Vite

npm create vite@latest my-app -- --template react-ts
cd my-app
npx @meridui/cli init

init installs @meridui/react, adds the stylesheet import below and removes the template styles that would override Merid (next section). It shows every change as a diff and asks first. To set up by hand, run npm i @meridui/react and follow the rest of this page.

Entry file

Import Merid's stylesheet before your own CSS.

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "@meridui/react/styles.css";
import "./index.css";
import { App } from "./App";


createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

The base layer styles the document itself; mrd-root is only needed to re-apply it to a subtree inside a host page with other styles.

The template's index.css

The Vite template's src/index.css is written for its starter page. It sets the page font, size and colours on :root, sizes h1 and h2, styles code, sets p { margin: 0 } and turns #root into a centred 1126px column with centred text. Templates before create-vite 9 also style every button and a, and centre body with flexbox. These rules are not in a cascade layer, so they beat Merid's (see Styling and CSS layers): headings take the template's sizes, and with the older template a primary button gets a grey background.

npx @meridui/cli init removes them and leaves body { margin: 0 }, which is what most apps want:

/* src/index.css after init */
body {
  margin: 0;
}

It only removes rules that still match the template, so anything you have edited or added stays. App.css is left alone unless it has the older template's #root rule; the rest of it only styles the starter page's own classes. To clean up by hand, delete the same rules. npx @meridui/cli doctor warns while any of them are left.

Fonts

Vite resolves the url("../fonts/…") in Merid's CSS from node_modules and copies the two .woff2 files into dist/assets with hashed names. Nothing to configure. To use your own font instead, set --mrd-font-sans in your CSS; the bundled face is then never requested.

Dark mode before paint

Add a small inline script to index.html so the page never flashes the wrong theme:

<script>
  try {
    const t = localStorage.getItem("theme");
    if (t === "light" || t === "dark") document.documentElement.dataset.theme = t;
  } catch {}
</script>

See Dark mode strategies for the toggle.

Library mode

If you build your own component package on top of Merid with Vite's library mode, list @meridui/react, react and react-dom in build.rollupOptions.external so consumers get a single copy of Merid's context and styles.