# Merid

> Merid, düz CSS, cascade layer'lar ve `--mrd-*` design token'ları üzerine kurulu, erişilebilir bir React component kütüphanesi (`@meridui/react`): 1px çizgiler, tek bir soğuk accent, yumuşak gri tray'ler ve sakin hareket. React 18 ve 19, server component'ler, açık ve koyu tema.

`npm i @meridui/react` ile kur ve `@meridui/react/styles.css` dosyasını uygulamanın girişinde bir kez import et ya da `npx @meridui/cli init` çalıştır. Tüm component'ler paket kökünden import edilir.

Merid kodunu yalnızca semantik `--mrd-*` token'larıyla yaz: ham hex renk, keyfi boşluk ve inline stil yok. Yeni component yazmadan önce var olanları birleştir. Kuralların tamamı [AI ile kullanım](https://meridui.dev/tr/docs/ai.md) sayfasında.

Kod yazan agent'lar için MCP server: `npx -y @meridui/mcp`. İngilizce dokümanların tamamı: https://meridui.dev/llms-full.txt

## Başlarken

- [Giriş](https://meridui.dev/tr/docs/introduction.md): Merid nedir, ne için yapıldı ve hangi fikirlerin üzerine kurulu.
- [Kurulum](https://meridui.dev/tr/docs/installation.md): @meridui/react'i npm, pnpm veya Yarn ile kur, Next.js ya da Vite projene ekle.
- [CLI](https://meridui.dev/tr/docs/cli.md): npx @meridui/cli: Merid'i Next.js, Vite ya da React Router projesine kur, AI kurallarını ve MCP config'ini ekle, sayfa desenlerini kopyala.
- [AI ile kullanım](https://meridui.dev/tr/docs/ai.md): Claude Code, Cursor, VS Code ve Windsurf'e Merid dokümanlarını ver: MCP server, llms.txt ve resmî kural dosyası.
- [Kullanım](https://meridui.dev/tr/docs/usage.md): Component'leri import et, varyantları prop'larla ver ve onları kendi markup'ınla birleştir.
- [Stil ve CSS layer'ları](https://meridui.dev/tr/docs/styling.md): Merid'in cascade layer'ları nasıl çalışır, token'ları ve component'leri !important kullanmadan nasıl override edersin.
- [Server component'ler](https://meridui.dev/tr/docs/server-components.md): Hangi Merid component'leri sunucuda render'lanır, etkileşimli component'ler App Router'da nasıl davranır.
- [Erişilebilirlik](https://meridui.dev/tr/docs/accessibility.md): Merid'in erişilebilirlik beyanı: hedeflediği standart, nasıl test edildiği ve bilinen sınırlamalar.
- [Sık sorulan sorular](https://meridui.dev/tr/docs/faq.md): Merid hakkında sık sorulan soruların cevapları.

## Temeller

- [Design token'lar](https://meridui.dev/tr/docs/foundations.md): Merid'in design token'ları nasıl adlandırılır, hangi katmanlara ayrılır ve nasıl kullanılır.
- [Renk](https://meridui.dev/tr/docs/foundations/color.md): Merid'in açık ve koyu renk token'ları, rolleri ve ölçülmüş kontrast oranları.
- [Dark mode](https://meridui.dev/tr/docs/foundations/dark-mode.md): Merid açık ve koyu tema arasında nasıl geçiş yapar, bunu sayfa ya da alt ağaç bazında nasıl kontrol edersin.
- [Tipografi](https://meridui.dev/tr/docs/foundations/typography.md): Merid'in yazı tipi, tipografi ölçeği, ağırlıkları ve dizgi kuralları.
- [Boşluk](https://meridui.dev/tr/docs/foundations/spacing.md): Merid genelinde kullanılan boşluk ölçeği ve layout genişlikleri.
- [Köşe yuvarlaklığı](https://meridui.dev/tr/docs/foundations/radius.md): Köşe yuvarlaklığı token'ları ve yüzeyler iç içe geçtikçe yuvarlaklığın nasıl küçüldüğü.
- [Yükselti](https://meridui.dev/tr/docs/foundations/elevation.md): Gölge token'ları, yüzey katmanları ve focus halesi.
- [Hareket](https://meridui.dev/tr/docs/foundations/motion.md): Süreler, easing ve bunları kullanan etkileşim desenleri.
- [Breakpoint'ler ve layer'lar](https://meridui.dev/tr/docs/foundations/layout.md): Merid'in iki breakpoint'i, dokunmatik ekranlar için boyutlar ve z-index ölçeği.
- [İlkeler](https://meridui.dev/tr/docs/foundations/principles.md): Her Merid component'inin ve sayfasının uyduğu on kural.

## Component'ler

- [Genel bakış](https://meridui.dev/tr/docs/components.md): Tüm Merid component'leri, amaçlarına göre gruplanmış ve güncel durumlarıyla.
- [Accordion](https://meridui.dev/tr/docs/components/accordion.md): Alt alta dizilmiş, açılıp kapanan bölümler; aynı anda bir ya da birden çok panel gösterir.
- [Alert](https://meridui.dev/tr/docs/components/alert.md): Bilgi, başarı, uyarı ve hata mesajları için renkli bir yüzey üzerinde satır içi bildirim.
- [AlertDialog](https://meridui.dev/tr/docs/components/alert-dialog.md): Akışı durdurup yanıt bekleyen modal onay penceresi.
- [Avatar](https://meridui.dev/tr/docs/components/avatar.md): Bir kişiyi ya da kurumu temsil eden yuvarlak görsel veya baş harfler.
- [Badge](https://meridui.dev/tr/docs/components/badge.md): Durum ve sayılar için küçük, etkileşimsiz bir hap etiket.
- [Breadcrumb](https://meridui.dev/tr/docs/components/breadcrumb.md): Mevcut sayfanın hiyerarşideki yerini, her üst sayfaya link vererek gösterir.
- [Button](https://meridui.dev/tr/docs/components/button.md): Bir aksiyonu tetikler: form göndermek, dialog açmak, bir değişikliği kaydetmek.
- [Calendar](https://meridui.dev/tr/docs/components/calendar.md): Gün ya da aralık seçmek için klavyeyle gezilebilen, Intl ile yerelleşen ay grid'i.
- [Card](https://meridui.dev/tr/docs/components/card.md): İçeriği kenarlıkla değil, yüzey rengiyle ayıran bir kapsayıcı.
- [Checkbox](https://meridui.dev/tr/docs/components/checkbox.md): Birbirinden bağımsız açık/kapalı seçimler ve çoklu seçim listeleri için native bir checkbox.
- [Code](https://meridui.dev/tr/docs/components/code.md): Monospace kod: satır içinde tray bir etikette ya da çok satırlı bir blok olarak.
- [Collapsible](https://meridui.dev/tr/docs/components/collapsible.md): Tek bir bölgeyi gösterip gizleyen buton.
- [Combobox](https://meridui.dev/tr/docs/components/combobox.md): Aranabilir select: yazarak filtrele, bir ya da birden çok seçenek seç, seçenekleri async yükle.
- [Command](https://meridui.dev/tr/docs/components/command.md): Gruplu, aranabilir, klavyeyle gezilen ve kısayolları olan komut menüsü; ⌘K paleti olarak açılır.
- [Container](https://meridui.dev/tr/docs/components/container.md): İçeriği ortalar, genişliğini sınırlar ve responsive yan boşluğu (gutter) ekler.
- [ContextMenu](https://meridui.dev/tr/docs/components/context-menu.md): Sağ tıkla imlecin olduğu yerde açılan aksiyon menüsü.
- [DataTable](https://meridui.dev/tr/docs/components/data-table.md): Table üzerinde sıralama, filtreleme, sayfalama, satır seçimi ve kolon görünürlüğü.
- [DatePicker](https://meridui.dev/tr/docs/components/date-picker.md): Yazılabilen, tek gün ya da aralık için takvim popover'ı açan tarih alanı.
- [Dialog](https://meridui.dev/tr/docs/components/dialog.md): Odaklı bir iş için modal pencere: focus kapanı, scroll kilidi ve kapatma yönetimiyle.
- [Drawer](https://meridui.dev/tr/docs/components/drawer.md): Sol ya da sağ kenardan kayarak açılan modal bir yan panel (sheet).
- [DropdownMenu](https://meridui.dev/tr/docs/components/dropdown-menu.md): Bir butondan açılan aksiyon ya da seçenek listesi.
- [EmptyState](https://meridui.dev/tr/docs/components/empty-state.md): Boş listeler, sonuçsuz aramalar ve ilk açılış ekranları için ortalanmış bir boş durum alanı.
- [Field](https://meridui.dev/tr/docs/components/field.md): Etiket, kontrol, yardım metni ve hata mesajını id'ler ve ARIA ile birbirine bağlar.
- [FileUpload](https://meridui.dev/tr/docs/components/file-upload.md): Sürükle-bırak alanı, doğrulama ve dosya listesiyle erişilebilir dosya seçici.
- [Grid](https://meridui.dev/tr/docs/components/grid.md): Sabit ya da auto-fit kolonlu, iki boyutlu grid layout.
- [Heading](https://meridui.dev/tr/docs/components/heading.md): Merid'in sıkı ve dengeli başlık ölçeğiyle semantik h1–h6; boyut seviyeden bağımsız.
- [HoverCard](https://meridui.dev/tr/docs/components/hover-card.md): Bir link'in üzerine gelince ya da focus verince görünen önizleme kartı.
- [IconButton](https://meridui.dev/tr/docs/components/icon-button.md): Erişilebilir etiketi zorunlu, kare ve yalnızca ikonlu bir buton.
- [Input](https://meridui.dev/tr/docs/components/input.md): Boyutları, baş ve son ekleri ve Field bağlantısıyla tek satırlık metin input'u.
- [Kbd](https://meridui.dev/tr/docs/components/kbd.md): Klavye kısayollarını göstermek için bir tuş başlığı.
- [Label](https://meridui.dev/tr/docs/components/label.md): İsteğe bağlı zorunlu işareti ve devre dışı stiliyle bir form etiketi.
- [Link](https://meridui.dev/tr/docs/components/link.md): Metin içinde ya da tek başına kullanılan, navigasyon için stillenmiş bir anchor.
- [NativeSelect](https://meridui.dev/tr/docs/components/native-select.md): Merid stiliyle platformun select elemanı: native klavye desteği ve mobilde sistem seçicisi.
- [NavigationMenu](https://meridui.dev/tr/docs/components/navigation-menu.md): Açılır ve mega menü link panelleri olan site üst navigasyonu.
- [NumberInput](https://meridui.dev/tr/docs/components/number-input.md): Artır/azalt butonlu; min, max, step ve Intl.NumberFormat destekli sayı alanı.
- [Pagination](https://meridui.dev/tr/docs/components/pagination.md): Önceki ve sonraki kontrolleri ve kompakt bir sayfa aralığıyla sonuç sayfaları arasında gezinir.
- [PinInput](https://meridui.dev/tr/docs/components/pin-input.md): Her karakter için bir hücreyle tek kullanımlık kod ve PIN girişi; yapıştırma ve otomatik doldurma.
- [Popover](https://meridui.dev/tr/docs/components/popover.md): Bir tetikleyiciye bağlı, modal olmayan kayan panel.
- [Portal](https://meridui.dev/tr/docs/components/portal.md): Children'ı üst DOM ağacının dışında, document.body'ye ya da başka bir elemana render'lar.
- [Progress](https://meridui.dev/tr/docs/components/progress.md): Süresi belli ve belirsiz işler için yatay ilerleme çubuğu.
- [Radio](https://meridui.dev/tr/docs/components/radio.md): Küçük bir seçenek kümesinden tam olarak birini seçmek için RadioGroup içinde native radio'lar.
- [ScrollArea](https://meridui.dev/tr/docs/components/scroll-area.md): İnce, temaya uyan scrollbar'lı native kaydırma alanı.
- [Section](https://meridui.dev/tr/docs/components/section.md): Merid'in dikey ritmine sahip, isteğe bağlı gri yüzey (tray) arka planlı, tam genişlikte sayfa bandı.
- [SegmentedControl](https://meridui.dev/tr/docs/components/segmented-control.md): Görünümler ya da aralıklar arasında geçiş için hap biçiminde tekli seçim kontrolü.
- [Select](https://meridui.dev/tr/docs/components/select.md): Stilli bir listeden tek bir seçenek seç.
- [Separator](https://meridui.dev/tr/docs/components/separator.md): İçeriği yatay ya da dikey olarak bölen 1px ince çizgi.
- [Shortcut](https://meridui.dev/tr/docs/components/shortcut.md): Kbd tuşlarından oluşan, platforma göre değişen tuş kombinasyonu.
- [SidebarNav](https://meridui.dev/tr/docs/components/sidebar-nav.md): Uygulama sidebar'ları için grup, ikon ve sağda sayı gösterebilen dikey navigasyon.
- [Skeleton](https://meridui.dev/tr/docs/components/skeleton.md): İçerik yüklenirken onun şeklini koruyan, parıldayan bir yer tutucu.
- [Slider](https://meridui.dev/tr/docs/components/slider.md): Yatay bir track üzerinde bir değer ya da iki tutamaçla bir aralık seçtirir.
- [Spinner](https://meridui.dev/tr/docs/components/spinner.md): Geçerli metin rengini alan, süresi belirsiz bir yükleme göstergesi.
- [Stack](https://meridui.dev/tr/docs/components/stack.md): Boşluk skalasından gap alan tek boyutlu flex layout.
- [Stepper](https://meridui.dev/tr/docs/components/stepper.md): Çok adımlı bir akıştaki ilerlemeyi gösteren, salt okunur bir gösterge.
- [Switch](https://meridui.dev/tr/docs/components/switch.md): Değiştiği anda uygulanan ayarlar için açık/kapalı anahtarı.
- [Table](https://meridui.dev/tr/docs/components/table.md): Tablo verisi için, ince çizgili ve yatayda kaydırılabilen bir çerçeve içinde stillenmiş table primitive'leri.
- [Tabs](https://meridui.dev/tr/docs/components/tabs.md): Birbiriyle ilişkili paneller arasında geçiş için çizgi tab'lar.
- [Text](https://meridui.dev/tr/docs/components/text.md): Merid'in tipografi ölçeğinde gövde metni; hiyerarşi için ton ve kalınlık.
- [Textarea](https://meridui.dev/tr/docs/components/textarea.md): Boyutlandırma kontrolü ve Field bağlantısı olan çok satırlı metin girişi.
- [Toast](https://meridui.dev/tr/docs/components/toast.md): Ekranın köşesinde üst üste dizilen, akışı engellemeyen kısa bildirimler.
- [ToggleGroup](https://meridui.dev/tr/docs/components/toggle-group.md): İki durumlu toggle butonlar: tek başına (Toggle) ya da tekli veya çoklu seçimli bir set.
- [Toolbar](https://meridui.dev/tr/docs/components/toolbar.md): Tek bir Tab durağı olan, ilişkili kontrollerden oluşan satır.
- [Tooltip](https://meridui.dev/tr/docs/components/tooltip.md): Hover ve focus'ta görünen kısa bir metin etiketi.
- [VisuallyHidden](https://meridui.dev/tr/docs/components/visually-hidden.md): İçeriği görsel olarak gizler, ekran okuyucular için erişilebilir tutar.

## Entegrasyonlar

- [React Hook Form](https://meridui.dev/tr/docs/integrations/react-hook-form.md): Merid form kontrollerini React Hook Form ile kullan: native input'lar için register, Select, RadioGroup ve Switch için Controller.
- [Zod ile doğrulama](https://meridui.dev/tr/docs/integrations/zod.md): Merid formlarını bir Zod şemasıyla doğrula: React Hook Form üzerinden ya da düz FormData ve server action'larla.
- [Next.js](https://meridui.dev/tr/docs/integrations/nextjs.md): Merid'i Next.js App Router ile kullan: stil dosyası, server component'ler, router linkleri, fontlar ve metadata.
- [React Router ve TanStack](https://meridui.dev/tr/docs/integrations/routers.md): Merid'in navigasyon component'lerini React Router ya da TanStack Router linki olarak render'la.
- [Vite](https://meridui.dev/tr/docs/integrations/vite.md): Merid'i bir Vite + React uygulamasında kur: stil dosyası sırası, fontlar ve dark mode.
- [Tailwind CSS](https://meridui.dev/tr/docs/integrations/tailwind.md): Merid'i Tailwind CSS v4 ile birlikte kullan: layer sırası, Preflight ve Tailwind tema değeri olarak Merid token'ları.
- [İkonlar](https://meridui.dev/tr/docs/integrations/icons.md): lucide-react'i (ya da herhangi bir SVG ikon setini) Merid ile kullan: boyutlar, çizgi kalınlığı ve ikonların yeri.
- [Figma ve Style Dictionary](https://meridui.dev/tr/docs/integrations/design-tokens.md): Merid'in design token'larını @meridui/tokens ile Figma'ya (Tokens Studio), Style Dictionary'ye ve JavaScript'e taşı.
- [Sade HTML ve CSS](https://meridui.dev/tr/docs/integrations/html.md): Merid'in stil dosyasını React olmadan kullan: hangi component'ler sınıflar ve data attribute'larıyla çalışır, kopyalanacak markup'larla.
- [Alt ağaç attribute'ları](https://meridui.dev/tr/docs/integrations/subtree-attributes.md): data-theme, data-accent ve data-density ile herhangi bir elemanda tema, accent ve yoğunluk. İç içe kullanılabilirler.
- [Markaya göre tema](https://meridui.dev/tr/docs/integrations/theming.md): Accent token'larını açık ve koyu temada ezerek Merid'e marka rengini ver; tüm uygulama için ya da tek bir alt ağaç için.
- [Dark mode stratejileri](https://meridui.dev/tr/docs/integrations/dark-mode.md): Sistemi izle, yanıp sönmeyen bir tema değiştirici ekle ya da data-theme ile tek bir alt ağaca tema ver.
- [Uluslararasılaştırma ve RTL](https://meridui.dev/tr/docs/integrations/rtl.md): Merid'in sağdan sola (RTL) diller, çevrilmiş etiketler ve yerel ayara göre biçimlendirme için neyi yapıp neyi yapmadığı.

## Desenler

- [Formlar](https://meridui.dev/tr/docs/patterns/forms.md): Merid component'leriyle form layout'u, doğrulama zamanlaması, hata özetleri ve gönderim state'leri.
- [Boş ve yükleniyor durumları](https://meridui.dev/tr/docs/patterns/empty-and-loading.md): Listeler ve paneller için skeleton'lar, spinner'lar, boş durumlar ve hata durumları.
- [Onaylar](https://meridui.dev/tr/docs/patterns/confirmations.md): Ne zaman onay istenir, ne zaman geri alma sunulur ve AlertDialog ile yazarak onaylama nasıl kurulur.
- [Veri tabloları](https://meridui.dev/tr/docs/patterns/data-tables.md): Table, Checkbox ve Pagination ile sıralama, filtreleme, toplu aksiyonlu satır seçimi ve sayfalama.
- [Ayarlar sayfaları](https://meridui.dev/tr/docs/patterns/settings.md): Yan navigasyonlu bölümlere ayrılmış ayarlar, açık kaydetme, anında uygulanan switch'ler ve bir tehlikeli bölge.
- [Kimlik doğrulama](https://meridui.dev/tr/docs/patterns/authentication.md): Doğru autocomplete, hata yönetimi ve yükleniyor state'leriyle giriş ve doğrulama kodu ekranları.
- [Navigasyon layout'ları](https://meridui.dev/tr/docs/patterns/app-shell.md): Üst bar, breadcrumb ve hesap menüsü içeren, küçük ekranlarda bir drawer'a dönüşen sidebar'lı uygulama iskeleti.

## Optional

- [Tarayıcı desteği](https://meridui.dev/tr/docs/browser-support.md): Merid'in desteklediği tarayıcılar ve dayandığı CSS özellikleri.
- [Sürümleme](https://meridui.dev/tr/docs/versioning.md): Merid release'leri nasıl sürümler ve API'leri nasıl kullanımdan kaldırır.
- [Sürüm notları](https://meridui.dev/tr/docs/changelog.md): @meridui/react'in yayınlanan her sürümü için sürüm notları.
- [Yol haritası](https://meridui.dev/tr/docs/roadmap.md): Merid için neler planlanıyor ve hangi sırayla.
- [Katkıda bulunma](https://meridui.dev/tr/docs/contributing.md): Repoyu nasıl kurarsın, değişiklik nasıl önerirsin ve pull request'in nasıl merge edilir.
- [Logo ve kullanım](https://meridui.dev/tr/docs/brand.md): Merid işareti ve yazı logosu, boşluk alanı, renk versiyonları ve kaçınılması gerekenler.
- [Tasarım sözleşmesi](https://meridui.dev/design.md): Renk, köşe yuvarlaklığı, gölge, tipografi ve adlandırma kuralları (İngilizce)