Kurulum

Merid tek bir paket olarak yayınlanır: @meridui/react. Component'ler, stil dosyası ve paketle gelen Geist ile Geist Mono variable font'ları bu pakettedir.

CLI ile hızlı kurulum

Next.js, Vite ya da React Router projesinde tek komut yeter. Paket yöneticini algılar, paketi kurar, stil dosyasını import eder, Merid'i ezecek şablon stillerini kaldırır ve istersen AI kural dosyasını ve MCP config'ini ekler. Her değişikliği yazmadan önce diff olarak gösterir.

npx @meridui/cli init

Ayrıntılar için CLI ve AI ile kullanım sayfalarına bak. Elle kurmak istersen aşağıdaki adımları izle.

Gereksinimler

• React 18 veya 19 ve ona uyan react-dom.
• node_modules içinden CSS import edebilen bir bundler. Next.js, Vite, Remix, Parcel ve webpack'in hepsi bunu yapabilir.
• Yerel geliştirme için Node.js 20 veya üstü.

Paketi kur

npm i @meridui/react

Diğer paket yöneticileriyle:

pnpm add @meridui/react
yarn add @meridui/react

Stil dosyasını bir kez import et

Bütün component'ler tek bir stil dosyasından beslenir. Onu bir kez, ağacın olabildiğince üst noktasında import et.

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

Yalnızca design token'ları istiyorsan, örneğin renkleri ve boşlukları kendi component'lerinde kullanmak için, onun yerine @meridui/react/tokens.css dosyasını import et. Bu dosyada custom property'ler ve font tanımı vardır, component kuralı yoktur.

styles.css küçük bir base layer içerir: box-sizing: border-box, doküman font'u, renkler, başlık kalınlığı ve focus halkası. Bunlar :root'a sıfır specificity ile uygulanır, yani senin yazdığın her kural kazanır. Uygulaman kendi doküman stillerini getiriyorsa ve bunların hiçbirini istemiyorsan, onun yerine @meridui/react/components.css dosyasını (token'lar + component'ler, base yok) import et. Component'ler box-sizing'i kendi elemanlarına kendileri verir, bu yüzden iki durumda da aynı görünürler.

Proje şablonundan gelen stiller

create-vite, create-next-app ve create-react-router projeye bir global stil dosyasıyla başlar (src/index.css, app/globals.css, app/app.css). Bu dosyadaki kurallar hiçbir cascade layer'ın içinde değildir, bu yüzden Merid'i ezer. Vite şablonu sayfanın font'unu ve renklerini belirler, eski sürümlerinde her button'a da stil verir. Next.js body'ye Arial koyar; Tailwind'siz şablonda bir de * { padding: 0; margin: 0 } ekler ve bu kural her component'in iç boşluğunu sıfırlar. Cascade burada Stil ve CSS layer'ları sayfasında anlatıldığı gibi çalışıyor; ama bunlar senin stillerin değil, şablonun varsayılanları.

npx @meridui/cli init bu kuralları bulur ve kaldırmayı önerir. Önce diff'i gösterip sorar, --yes ile sormadan uygular. Yalnızca şablondaki haliyle duran kurallara dokunur; değiştirdiğin bir kural da, kendi eklediklerin de olduğu gibi kalır. Geride kalanları npx @meridui/cli doctor listeler.

Elle temizlemek istersen şablonun :root, body, başlıklar, a, button, code ve #root kurallarını sil, body { margin: 0 }'ı bırak.

Bu kuralları Merid'in altındaki bir layer'a taşımak yerine siliyoruz. Layer yalnızca Merid'in de verdiği özelliklerde işe yarardı. #root üzerindeki text-align: center ya da body üzerindeki display: flex gibi Merid'in hiç dokunmadığı kurallar, uygulamanı başlangıç sayfası gibi dizmeye devam ederdi.

Tailwind CSS ile

Next.js ve React Router'ın varsayılan şablonları Tailwind v4 kullanır. Tailwind'in reset'i Preflight, base adlı bir layer'dadır. Layer'lar ilk göründükleri sırayla dizilir; Merid'in stil dosyası önce yüklenirse Preflight onun üstüne çıkar ve butonlarla input'ların padding'ini, kenarlığını ve arka planını siler. Sırayı Tailwind dosyasının en üstünde tanımla ve bu dosyayı Merid'inkinden önce import et:

/* app/globals.css */
@layer theme, base, merid, components, utilities;

@import "tailwindcss";

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

init ikisini de yapar. Ayrıntılar Tailwind CSS sayfasında.

Next.js (App Router)

Stil dosyasını root layout'ta import et. Temel tipografi ve focus stilleri tüm sayfaya uygulanır, herhangi bir sınıf eklemen gerekmez.

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

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

transpilePackages ayarı gerekmez: paket derlenmiş ES modülleri ve CommonJS olarak gelir. Etkileşimli component'ler kendi "use client" direktiflerini taşır, bu yüzden onları doğrudan server component'lere import edebilirsin.

Vite

Stil dosyasını giriş dosyanda, kendi CSS'inden önce import et. Böylece kaynak sırasında senin kuralların Merid'inkilerden sonra gelir.

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

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

Font

Geist ve Geist Mono variable font'ları paketle birlikte gelir (@meridui/react/fonts/Geist-Variable.woff2 ve GeistMono-Variable.woff2) ve paketin içinden @font-face ile yüklenir. Tarayıcılar bir font'u yalnızca onu kullanan metin olduğunda indirir. Kendi font aileni tanımlarsan dosya hiç istenmez:

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