Installation

Merid is published as a single package, @merid/react. It contains the components, the stylesheet and the bundled Geist and Geist Mono variable fonts.

Requirements

React 18 or 19 and the matching react-dom.
A bundler that can import CSS from node_modules. Next.js, Vite, Remix, Parcel and webpack all can.
Node.js 20 or newer for local development.

Install the package

bash

npm i @merid/react

With other package managers:

bash

pnpm add @merid/react
yarn add @merid/react

Import the stylesheet once

Every component reads from one stylesheet. Import it once, as high in your tree as possible.

tsx

import "@merid/react/styles.css";

If you only want the design tokens — for example, to use the colours and spacing in your own components — import @merid/react/tokens.css instead. It contains the custom properties and the font face, and no component rules.

styles.css includes a small base layer: box-sizing: border-box, the document font, colours, heading weight and focus ring, applied to :root at zero specificity (so any rule of yours wins). If your app brings its own document styles and you want none of it, import @merid/react/components.css (tokens + components, no base) instead. Components set box-sizing on their own elements, so they render the same either way.

Next.js (App Router)

Import the stylesheet in the root layout. The base typography and focus styles apply to the whole page; no class is needed.

tsx

// app/layout.tsx
import "@merid/react/styles.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

No transpilePackages entry is needed: the package ships compiled ES modules and CommonJS. Interactive components carry their own "use client" directive, so you can import them straight into server components.

Vite

Import the stylesheet in your entry file, before your own CSS so that your rules follow Merid's in source order.

tsx

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

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

Font

Inter Variable is bundled and loaded through @font-face from the package. Browsers only download a font when text uses it, so if you set your own family the file is never requested:

css

:root {
  --mrd-font-sans: "Your Sans", system-ui, sans-serif;
}