# Mantine Tasarım Sistemi

## Mantine Tasarım Sistemi Arayüzü Önizlemesi

Çekmeceyi açın, alan doğrulamasını tetikleyin, bir çalışma ve tarih seçin, yerel bir katılımcı ekleyin ve örnek onayını geri çekin.

## Mantine Tasarım Sistemi Tasarım Referansı

@mantine/core 9.6.3 sürümünden seçilen DEFAULT_THEME değerleri doğrulanmıştır. Sayısal piksel karşılıkları, 16px kök yazı tipi boyutu ve theme.scale=1 varsayar; ölçeklenen belirteçler --mantine-scale üzerinden çözümlenir. Camgöbeği birincil renk, shade 8 ve radius md açıkça belirtilmiş uygulama geçersiz kılmalarıdır.

### Örnekte kullanılan camgöbeği paleti

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| colors.cyan[0] | #e3fafc | Sakin tema özeti yüzeyi. |
| colors.cyan[1] | #c5f6fa | Açık ton. |
| colors.cyan[2] | #99e9f2 | Açık ton. |
| colors.cyan[3] | #66d9e8 | Açık ton. |
| colors.cyan[4] | #3bc9db | Orta açık ton. |
| colors.cyan[5] | #22b8cf | Orta koyu ton. |
| colors.cyan[6] | #15aabf | Standart palet tonu. |
| colors.cyan[7] | #1098ad | Daha koyu ton. |
| colors.cyan[8] | #0c8599 | Seçilen birincil eylem tonu. |
| colors.cyan[9] | #0b7285 | Belirgin metin vurgusu. |
### Ölçek 1'deki yazı tipi boyutları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| fontSizes.xs / sm | 12px / 14px | Kayıt kimlikleri / destekleyici metin. |
| fontSizes.md / lg / xl | 16px / 18px / 20px | Varsayılan gövde metni ve daha büyük metinler. |
| lineHeights.xs / sm / md | 1.4 / 1.45 / 1.55 | Eşleşen gövde metni ölçekleri. |
| lineHeights.lg / xl | 1.6 / 1.65 | Daha büyük okuma metni ölçekleri. |
| headings.h1 | 34px / 1.3 | Katılımcı oturumları başlığı. |
| headings.h2 / h3 | 26px / 1.35; 22px / 1.4 | Kullanılabilir başlık düzeyleri. |
| fontFamily | Platform sans-serif stack | İndirilen yazı tipi gerekmez. |
### Ölçek 1'deki boşluklar ve köşe yarıçapı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| spacing.xs / sm | 10px / 12px | Küçük aralıklar. |
| spacing.md / lg / xl | 16px / 20px / 32px | Mobil iç boşluk / alan aralığı / bölüm aralığı. |
| radius.xs / sm | 2px / 4px | Küçük geometrik değerler. |
| radius.md / lg / xl | 8px / 16px / 32px | Örnek varsayılan / daha büyük köşe yarıçapları. |
| defaultRadius | md (application override) | createTheme tarafından merkezi olarak uygulanır. |
### Ekran genişliği eşikleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| breakpoints.xs | 36em | 16px varsayılan boyutta 576px. |
| breakpoints.sm | 48em | Özet kartları üç sütuna dönüşür. |
| breakpoints.md | 62em | 16px varsayılan boyutta 992px. |
| breakpoints.lg / xl | 75em / 88em | 16px varsayılan boyutta 1200px / 1408px. |
### CSS ve bileşen eşlemesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --mantine-primary-color-filled | Resolved from primaryColor and primaryShade | Örnekte camgöbeği shade 8 seçilir. |
| --mantine-spacing-lg | calc(1.25rem * var(--mantine-scale)) | Stack aralığı lg, panel iç boşluğu lg. |
| --mantine-radius-md | calc(0.5rem * var(--mantine-scale)) | Varsayılan yuvarlatılmış panel. |
| --mantine-font-size-sm | calc(0.875rem * var(--mantine-scale)) | Tablo kayıt etiketleri. |
| Button.extend defaultProps | size: sm | Uygulama varsayılanı açıkça belirtilmiştir. |
| TextInput.extend defaultProps | size: md | Uygulama varsayılanı açıkça belirtilmiştir. |
## Mantine Tasarım Sistemi Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Mantine Tasarım Sistemi Mantine Tema ve Paket Sınırları

### Tek sağlayıcı, üç özellik paketi

> Örnekte arayüz için core, doğrulama ve bağlamalar için form, takvim girişi içinse dates kullanılır. MantineProvider, createTheme geçersiz kılmalarını alır. Hem core CSS hem de dates CSS içe aktarılır; biçimlendirilmiş takvimi yeniden oluşturmak için yalnızca React bileşenini yüklemek yeterli değildir.

Tema, primaryShade 8 ile cyan'ı ve defaultRadius md'yi seçer. Button.extend, küçük düğmeleri uygulama varsayılanı yaparken TextInput.extend, orta boy kontrolleri seçer. Bunlar kaynak kodda gösterilen bilinçli ayarlardır; her Mantine ürününün bu ayarları kullanması gerektiği iddia edilmez.

Destekleyici belirtimi okuyun

## Mantine Tasarım Sisteminde Palet İndekslerini ve Çözümlenmiş Renk Rollerini Kullanma

### Sıralı bir palet, birbiriyle ilgisiz renk örneklerinden oluşan bir liste değildir

Mantine renkleri, indekslenmiş ton dizileridir. Bu örnekte sakin bir özet paneli için cyan.0, vurgu metni için cyan.9 ve dolgulu eylemler için yapılandırılmış birincil ton kullanılır. Referansta bu temada kullanılan cyan renk dizisinin tamamı listelenir.

Tablodaki onaylandı rozeti açık camgöbeği çeşidini, geri çekildi rozeti ise turuncu çeşidini kullanır. Bu durumlar metinle de belirtilir. Onayın geri çekilmesi onay durumunu değiştirir ancak önceki oturumu görünür bırakır; böylece renk değişikliği geçmişi sessizce silmez.

Destekleyici belirtimi okuyun

### Tema renkleri ve gelişigüzel CSS değerleri

Bileşenin color özelliği adlandırılmış bir palete başvurabilir; ham onaltılık arka plan rengini ayrıca biçimlendirmek bazı varyant kararlarını devre dışı bırakır. Düz CSS kullanırken, tekrarlanan tema kararlarında oluşturulan değişkenleri tercih edin. Örnekteki CSS değişken eşlemesi, hangi değerlerin ölçeğe ve birincil renge bağlı kaldığını açıklar.

Destekleyici belirtimi okuyun

## Mantine Tasarım Sisteminde Dışa Aktarılan Yazı Tipini ve Başlık Ölçeklerini Uygulama

### Hiyerarşiyi yeniden oluşturun

Tabloda adlar ve çalışma etiketleri için sm, tanımlayıcılar ve tarihler için xs metin boyutu kullanılır. Title order={1}, h1 ölçeğini kullanır; çekmecedeki h2 anlamsal başlığı, görsel düzeyi daha kompakt olsun diye size="h3" ile gösterilir. Bu kararlar, input bileşenlerinin sağladığı etiket ve yardımcı metinden bağımsızdır.

Mantine platform yazı tipi yığını, uzaktan yazı tipi indirmeyi gerektirmez. Ölçeklenmiş yazı tipi değerleri --mantine-scale değişkenini içerir; referanstaki piksel değerleri ölçeğin 1 olduğunu varsayar. Uygulama ölçeğini değiştirirseniz bu piksel karşılıklarını sabit değerler olarak değerlendirmeyin.

Destekleyici belirtimi okuyun

## Mantine Tasarım Sistemi Bind useForm to Real Input Components

### Doğrulama form modeline aittir

initialValues; ad, çalışma, boş değer alabilen tarih ve boolean onam alanlarını içerir. validate, ad, tarih ve onam alanları için bir hata dizesi veya null döndürür. form.onSubmit, yerel satır eklenmeden önce bu doğrulamayı çalıştırır. Elle biçimlendirilmiş hata etiketlerinden oluşan ayrı bir koleksiyona gerek yoktur.

TextInput ve DatePickerInput bileşenleri, alan yolları için getInputProps alır. Checkbox bileşeninde de işaretli değerin doğru bağlanması için type:"checkbox" belirtilir. Select sabit bir çalışma listesi kullanır ve allowDeselect={false} ayarlanır; bu akışta çalışma alanı boş bırakılamaz.

Destekleyici belirtimi okuyun

### Tarih değeri ve görüntüleme biçimi

Tarih bileşeni @mantine/dates paketindendir; eşleşen stil dosyası da çekirdek stillerden sonra içe aktarılır. Örnekteki paket, dize biçimindeki tarih değerlerini kullanır. Görüntülenen DD MMM YYYY biçimi, tabloda gösterilen kayıtlı tarih dizesinden ayrıdır. defaultDate, geçerli bir oturum tarihini önceden doldurmadan takvimi örnek aya açar.

Destekleyici belirtimi okuyun

## Mantine Tasarım Sistemi Denetim Yoğunluğu ve Taşma Bileşen Sınırında

### Tabloyu kendi kaydırma alanında tutun

Table.ScrollContainer, dar ekranlarda dört okunabilir sütunu korumak için minWidth={580} kullanır. Belgenin kendisi görünüm alanına sığmaya devam eder; gerektiğinde yalnızca veri alanı yatay kaydırılır. horizontalSpacing="lg" ve verticalSpacing="md", hücreler için bağımsız dolgu değerleri yerine tema aralıklarını kullanır.

Üç özet kartı, başlangıçta tek sütun ve sm boyutundan itibaren üç sütun içeren SimpleGrid kullanır. Sayfa iç boşluğu da md boyutundan xl boyutuna geçer. Bunlar duyarlı stil nesneleridir; tablonun minimum genişliği ise içeriğe ilişkin açık bir tercihtir.

Destekleyici belirtimi okuyun

## Mantine Tasarım Sistemi Geçersiz Kaydı Onamın Geri Çekilmesinden Ayırın

### Örnekte iki farklı değişiklik işlemi vardır

Planlama formu; ad, oturum tarihi ve örnek onam doğrulamadan geçmeden satır ekleyemez. Yerel ekleme başarılı olduğunda çekmece kapanır, bir kayıt eklenir ve özet sayıları güncellenir. Uyarı, herhangi bir araştırma kaydının saklanmadığını belirtir.

Onamı geri çekme işlemi yalnızca seçili satırın durumunu değiştirir ve o satırdaki işlemi devre dışı bırakır. Tarih geçmiş kaydı olarak görünür kalırken planlanan kayıt sayısı, onamı geri çekilenleri içermez. Bu, gerçek bir araştırma verisi saklama kuralı değil, önizleme için belirlenmiş bir politikadır.

- Geçersiz form: alan düzeyindeki hataları gösterin ve çekmeceyi açık tutun.

- Kabul edilen yerel kayıt: satırı bir kez ekleyin ve sonraki taslağı sıfırlayın.

- Örnek onamı geri çekildi: kaydı koruyun ve yeniden geri çekme işlemini devre dışı bırakın.

## Mantine Tasarım Sistemi Çekmece ve Girdi Anlamlarını Birlikte Çalıştırın

### Odak ve etiketler

Çekmece bir başlık alır ve yerel odak yönetimini kullanır. Ad alanında data-autofocus bulunur. Her form denetiminin görünür bir etiketi vardır; doğrulama iletileri, bağlanan error prop değerinden gelir. Geri çekme düğmesinin erişilebilir adı katılımcıyı da içerir; böylece görünüşte aynı olan birden fazla etiket birbirinden ayırt edilebilir.

Bu örnekte çekmeceyi kapatmak taslağı iptal eder: Katılımcı ekle düğmesine her basıldığında form sıfırlanır. Takvim, çekmecenin içindeki yerel bir Mantine açılır penceresidir. İki ayrı erişilebilir bileşenin birlikte de sorunsuz çalışacağını varsaymak yerine, klavye etkileşimini çevresindeki odak tuzağıyla birlikte sınayın.

Destekleyici belirtimi okuyun

## Mantine Tasarım Sistemi Sürümleri Uyumlu Paketleri ve Her İki Stil Dosyasını Yükleyin

### Eksiksiz kurulum sağlanmıştır

Aşağıdaki terminal komutlarını kullanın, App.jsx dosyasını tam bileşimle değiştirin ve sağlanan main.jsx ile uygulamayı bağlayın. Dört Mantine paketinin sürümleri bilerek eşleştirilmiştir. App.jsx sağlayıcıyı ve temayı içerir; gizli bir sağlayıcı dosyasına gerek yoktur.

Değer türünü denetlemeden farklı bir ana sürüme ait tarih örneğini kopyalamayın. Formun başlangıç tarihini ve doğrulamasını gerçek DatePickerInput API ile tutarlı hâle getirin. Bu örnek, eski bir öğreticiden çıkarım yapmak yerine belirtilen paket sürümleriyle oluşturulmuştur.

1. core, hooks, form, dates ve dates bağımlılığı olan dayjs paketlerini yükleyin.

2. core/styles.css ve dates/styles.css dosyalarını uygulama sınırında bir kez içe aktarın.

3. Formu çalıştırın, tarihli bir kayıt ekleyin ve ardından tabloyu ve geri çekme sonucunu inceleyin.

## Mantine Tasarım Sistemi Takvimi, Formu ve Tabloyu Tek Bir Birim Olarak Doğrulayın

### Deneyebilecekleriniz

Ad, tarih ve onam hatalarını görmek için boş çekmeceyi gönderin. Bir ad girin, takvimden bir gün seçin ve yeniden göndermeden önce örnek onamı onaylayın. Yeni katılımcı, seçilen tarih ve değişmeyen bir önizleme kimliğiyle görünmelidir. Ardından bu katılımcının onamını geri çekin ve hem satırda hem özette olanları gözlemleyin.

Veri modeli kasıtlı olarak küçük tutulmuş ve yalnızca bellekte çalışır. Çalışma katılımcısı bulma, onam alma, sunucuda veri saklama veya saat dilimi dönüştürme işlemleri yoktur. Bu örneğin somut değeri, yerel paket entegrasyonu ve görünür denetim davranışıdır; araştırma yönetimi için bir arka uç sunduğu izlenimini vermek değildir.

## Mantine Tasarım Sistemi Bileşen Örnekleri

### App.jsx — sağlayıcı, tema, tablo ve planlama çekmecesi

Tam yerel Mantine örneği. Tema geçersiz kılmalarını, useForm doğrulamasını, DatePickerInput bileşenini, tablo güncellemelerini ve onam durumu değişikliğini içerir.

```
import React, {useState} from 'react';
import {MantineProvider, createTheme, Box, Group, Stack, Title, Text, Button, Paper, Badge, Table, Drawer, TextInput, Select, Checkbox, Alert, SimpleGrid} from '@mantine/core';
import {useForm} from '@mantine/form';
import {DatePickerInput} from '@mantine/dates';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
const theme=createTheme({primaryColor:'cyan',primaryShade:8,defaultRadius:'md',components:{Button:Button.extend({defaultProps:{size:'sm'}}),TextInput:TextInput.extend({defaultProps:{size:'md'}})}});
function Tracker(){
 const[opened,setOpened]=useState(false),[notice,setNotice]=useState(''),[rows,setRows]=useState([{name:'Alex Morgan',study:'Navigation study',date:'2026-10-14',status:'Confirmed'},{name:'Sam Rivera',study:'Editor study',date:'2026-10-16',status:'Confirmed'}]);
 const form=useForm({initialValues:{name:'',study:'Navigation study',date:null,consent:false},validate:{name:v=>v.trim().length<2?'Enter a name with at least two characters.':null,date:v=>!v?'Choose a session date.':null,consent:v=>!v?'Confirm consent before scheduling this example.':null}});
 const submit=values=>{setRows([...rows,{name:values.name.trim(),study:values.study,date:values.date,status:'Confirmed'}]);setOpened(false);setNotice('Participant added in this browser only. No research record was stored.');form.reset();};
 return <Box p={{base:'md',sm:'xl'}} bg='gray.0'><Box maw={1040} mx='auto'>
 <Group justify='space-between' align='flex-start' mb='xl'><Box><Text c='cyan.9' fw={700} size='xs' tt='uppercase' mb='xs'>Mantine · Research operations</Text><Title order={1}>Participant sessions</Title><Text c='dimmed' mt='xs'>Consent and scheduling stay visible in the same working view.</Text></Box><Button onClick={()=>{form.reset();setOpened(true)}}>Add participant</Button></Group>
 <SimpleGrid cols={{base:1,sm:3}} mb='xl'><Paper withBorder p='lg'><Text size='sm' c='dimmed'>In this preview</Text><Text fz={32} fw={700}>{rows.length}</Text><Text size='sm'>Participant records</Text></Paper><Paper withBorder p='lg'><Text size='sm' c='dimmed'>Scheduled</Text><Text fz={32} fw={700}>{rows.filter(r=>r.status==='Confirmed').length}</Text><Text size='sm'>With confirmed example consent</Text></Paper><Paper withBorder p='lg' bg='cyan.0'><Text size='sm' c='cyan.9' fw={600}>Working theme</Text><Text mt='xs' size='sm'>cyan.8 action · radius md<br/>spacing lg · body md</Text></Paper></SimpleGrid>
 {notice&&<Alert title='Local change' color='cyan' mb='md' withCloseButton onClose={()=>setNotice('')}>{notice}</Alert>}
 <Paper withBorder radius='md'><Table.ScrollContainer minWidth={580}><Table verticalSpacing='md' horizontalSpacing='lg' highlightOnHover><Table.Thead><Table.Tr><Table.Th>Participant</Table.Th><Table.Th>Study / session</Table.Th><Table.Th>Consent</Table.Th><Table.Th>Action</Table.Th></Table.Tr></Table.Thead><Table.Tbody>{rows.map((r,i)=><Table.Tr key={i}><Table.Td><Text fw={600} size='sm'>{r.name}</Text><Text size='xs' c='dimmed'>P-{String(i+1).padStart(3,'0')}</Text></Table.Td><Table.Td><Text size='sm'>{r.study}</Text><Text size='xs' c='dimmed'>{r.date}</Text></Table.Td><Table.Td><Badge variant='light' color={r.status==='Confirmed'?'cyan':'orange'}>{r.status}</Badge></Table.Td><Table.Td><Button variant='subtle' color='gray' disabled={r.status==='Withdrawn'} aria-label={'Withdraw consent for '+r.name} onClick={()=>{setRows(rows.map((x,j)=>j===i?{...x,status:'Withdrawn'}:x));setNotice('Consent withdrawn in the preview. The prior session remains visible as history.')}}>Withdraw</Button></Table.Td></Table.Tr>)}</Table.Tbody></Table></Table.ScrollContainer></Paper>
 <Text size='xs' c='dimmed' mt='lg'>Native Mantine 9.6.3: Table, Drawer, useForm, DatePickerInput, and input error styles. All records are memory-only examples.</Text>
 <Drawer opened={opened} onClose={()=>setOpened(false)} position='right' size='md' title={<Title order={2} size='h3'>Schedule a participant</Title>}><form onSubmit={form.onSubmit(submit)} noValidate><Stack gap='lg'><Text size='sm' c='dimmed'>All fields below belong to this one study enrollment. Closing discards the draft.</Text><TextInput label='Participant name' placeholder='Jules Davis' data-autofocus {...form.getInputProps('name')}/><Select label='Study' data={['Navigation study','Editor study']} allowDeselect={false} {...form.getInputProps('study')}/><DatePickerInput label='Session date' placeholder='Choose a date' valueFormat='DD MMM YYYY' defaultDate='2026-10-01' {...form.getInputProps('date')}/><Checkbox label='Consent is confirmed for this example study' {...form.getInputProps('consent',{type:'checkbox'})}/><Button type='submit'>Add to preview</Button><Text size='xs' c='dimmed'>This checkbox demonstrates validation; it is not a research consent collection process.</Text></Stack></form></Drawer>
 </Box></Box>;
}
export default function App(){return <MantineProvider theme={theme} forceColorScheme='light'><Tracker/></MantineProvider>}
```

Kod referansı

- Hem core hem de dates CSS içe aktarılır.

- Onam kutusu, gerçek bir onam toplama akışı değil, örnek bir doğrulama koşuludur.

## Mantine Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Seçilen Vite şablonunun desteklediği bir Node sürümü kullanın. Kaynak kod; sağlayıcı, tema ve stil dosyası içe aktarımlarını içerir. Gösterilen akış için arka uç veya özel bir CSS gerekmez.

```
# Terminal
npm create vite@latest participant-demo -- --template react
cd participant-demo
npm install
npm install @mantine/core@9.6.3 @mantine/hooks@9.6.3 @mantine/form@9.6.3 @mantine/dates@9.6.3 dayjs

# Save the complete example as src/App.jsx.
# Replace src/main.jsx with:
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')).render(<App/>);

# Terminal
npm run dev
```

### Projeniz İçin Bir İstem

```
Sağlanan Mantine 9.6.3 bileşimini kullanın ve core/form/dates sürümlerini uyumlu tutun. Sağlayıcıyı, her iki CSS içe aktarımını, getInputProps bağlamalarını, tarih değerinin türünü ve tablo kaydırma sınırını koruyun. Yerel kayıt değişikliklerini gerçek hizmetle ancak onam ve veri saklama politikalarını tanımladıktan sonra değiştirin. Geri çekme işlemini silme işleminden ayrı tutun; okunabilir girdi hatalarını ve çekmecedeki odak yönetimini koruyun.
```

## Mantine Tasarım Sistemi Kaynaklar ve Kapsam

Mantine 9.6.3 kullanan özgün OpenDesign örneği. Varsayılan tema değerleri, uygulamada yapılan camgöbeği ve şekil geçersiz kılmalarından ayrı gösterilir. Yerel önizleme yalnızca kayıtları ve doğrulamayı gösterir; onam toplamaz veya araştırma verisi kaydetmez.

- Tema referansı Tema için resmî Mantine belgeleri.

- Renkler referansı Renkler için resmî Mantine belgeleri.

- Değişkenler referansı Değişkenler için resmî Mantine belgeleri.

- Sağlayıcı referansı Sağlayıcı için resmî Mantine belgeleri.

- Form referansı Form için resmî Mantine belgeleri.

- Tarih referansı Tarih için resmî Mantine belgeleri.

- Çekmece referansı Çekmece için resmî Mantine belgeleri.

- Tablo referansı Tablo için resmî Mantine belgeleri.

- Stiller referansı Stiller için resmî Mantine belgeleri.

- Select referansı Select için resmî Mantine belgeleri.

- Girdi referansı Girdi için resmî Mantine belgeleri.

## Mantine Tasarım Sistemi İlgili Kaynaklar

### Melt UI

Melt UI’ın store/action oluşturucuları, sahip olduğunuz Svelte işaretlemesine erişilebilir davranışlar ekler. Bu kılavuz, radyo düğmesi, kaydırıcı ve anahtar oluşturucularını öznitelikleri, eylemleri ve yazılabilir depoları üzerinden birbirine bağlamak için @melt-ui/svelte 0.86.6 kullanır; bu, daha yeni runes API yapısından farklıdır.

### Naive UI

Doğrulanmış tema nesnesi değerleri, satır seçimi, genişletme, sıralama, sayfalama ve yerel bir toplu inceleme işlemi içeren yerel bir Naive UI veri tablosu çalışma alanı.

### Nuxt UI

Gerçek Vue bileşenleri, anlamsal tema referansları, girdi doğrulaması ve açık yerel taslak davranışıyla eksiksiz bir Nuxt UI 4.11.3 brief oluşturucusu geliştirin.


- [Uygulama başvurusu](https://mantine.dev/form/use-form/)
- [Kaynak](https://mantine.dev/theming/colors/)
- [Kaynak](https://mantine.dev/theming/theme-object/)
- [Kaynak](https://mantine.dev/styles/css-variables/)
- [Destekleyici belirtimi okuyun](https://mantine.dev/theming/theme-object/)
- [Destekleyici belirtimi okuyun](https://mantine.dev/theming/colors/)
- [Destekleyici belirtimi okuyun](https://mantine.dev/styles/css-variables/)
- [Destekleyici belirtimi okuyun](https://mantine.dev/form/use-form/)
- [Destekleyici belirtimi okuyun](https://mantine.dev/dates/date-picker-input/)
- [Destekleyici belirtimi okuyun](https://mantine.dev/core/table/)
- [Destekleyici belirtimi okuyun](https://mantine.dev/core/drawer/)
- [Kod referansı](https://mantine.dev/form/use-form/)
- [Tema referansı Tema için resmî Mantine belgeleri.](https://mantine.dev/theming/theme-object/)
- [Renkler referansı Renkler için resmî Mantine belgeleri.](https://mantine.dev/theming/colors/)
- [Değişkenler referansı Değişkenler için resmî Mantine belgeleri.](https://mantine.dev/styles/css-variables/)
- [Sağlayıcı referansı Sağlayıcı için resmî Mantine belgeleri.](https://mantine.dev/theming/mantine-provider/)
- [Form referansı Form için resmî Mantine belgeleri.](https://mantine.dev/form/use-form/)
- [Tarih referansı Tarih için resmî Mantine belgeleri.](https://mantine.dev/dates/date-picker-input/)
- [Çekmece referansı Çekmece için resmî Mantine belgeleri.](https://mantine.dev/core/drawer/)
- [Tablo referansı Tablo için resmî Mantine belgeleri.](https://mantine.dev/core/table/)
- [Stiller referansı Stiller için resmî Mantine belgeleri.](https://mantine.dev/styles/styles-api/)
- [Select referansı Select için resmî Mantine belgeleri.](https://mantine.dev/core/select/)
- [Girdi referansı Girdi için resmî Mantine belgeleri.](https://mantine.dev/core/text-input/)