# React Suite Tasarım Sistemi

## React Suite Tasarım Sistemi Arayüz Önizlemesi

Bir gün seçin, yerel oturumları inceleyin, iletişim kutusundan oturum ekleyin veya kaldırın. Hafta sonlarına oturum eklenemez.

## React Suite Tasarım Sistemi Tasarım Referansı

React Suite 6.2.4 derlenmiş stil sayfası, güncel v6 CSS değişken belgeleriyle karşılaştırılarak denetlenmiştir. Aşağıdaki değerler ilk/varsayılan tanımlardır; anlamsal takma adlar diğer sağlayıcı temalarında farklı değerlere çözümlenebilir. Özgün takvim düzeni kuralları ayrıca belirtilmiştir.

### Tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --rs-font-family-base | -apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif | CJK yedek yazı tiplerini içeren sistem yazı tipi yığını. |
| --rs-html-font-size | 16px | Kök boyut. |
| --rs-font-size-sm | 0.875rem | 16px kök boyutunda 14px; varsayılan gövde ölçeği. |
| --rs-font-size-md | 1rem | Varsayılan kök boyutta 16px. |
| --rs-font-size-lg | 1.125rem | Varsayılan kök boyutta 18px. |
| --rs-font-size-xl | 1.25rem | Varsayılan kök boyutta 20px. |
| --rs-font-size-2xl | 1.5rem | Varsayılan kök boyutta 24px. |
| --rs-line-height-md | calc(20 / 14) | Varsayılan gövde oranı. |
### Aralık ve yarıçap

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --rs-spacing | 0.25rem | Temel aralık artışı. |
| --rs-padding-inline-md | 12px | Orta yatay bileşen dolgusu. |
| --rs-padding-block-md | 8px | Orta dikey bileşen dolgusu. |
| --rs-radius-sm | 0.25rem | Varsayılan kök boyutta 4px. |
| --rs-radius-md | 0.375rem | Varsayılan kök boyutta 6px. |
| --rs-radius-lg | 0.5rem | Varsayılan kök boyutta 8px. |
| --rs-radius-xl | 0.75rem | Varsayılan kök boyutta 12px. |
### Birincil renk skalası

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --rs-primary-50 | #F2FAFF | Varsayılan birincil palet düzeyi 50. |
| --rs-primary-100 | #CCE9FF | Varsayılan birincil palet düzeyi 100. |
| --rs-primary-200 | #A6D7FF | Varsayılan birincil palet düzeyi 200. |
| --rs-primary-300 | #80C3FF | Varsayılan birincil palet düzeyi 300. |
| --rs-primary-400 | #59AFFF | Varsayılan birincil palet düzeyi 400. |
| --rs-primary-500 | #3498ff | Varsayılan birincil palet düzeyi 500. |
| --rs-primary-600 | #2589F5 | Varsayılan birincil palet düzeyi 600. |
| --rs-primary-700 | #1675E0 | Varsayılan birincil palet düzeyi 700. |
| --rs-primary-800 | #0A5DC2 | Varsayılan birincil palet düzeyi 800. |
| --rs-primary-900 | #004299 | Varsayılan birincil palet düzeyi 900. |
### Anlamsal yüzeyler ve durumlar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --rs-bg-card | var(--rs-gray-0) | Takvim ve ajanda yüzeyi. |
| --rs-bg-well | var(--rs-gray-50) | Dış sayfa arka planı. |
| --rs-bg-overlay | var(--rs-gray-0) | İletişim kutusu yüzeyi. |
| --rs-text-primary | var(--rs-gray-800) | Normal metin. |
| --rs-text-secondary | var(--rs-gray-600) | Meta veriler ve yardımcı metinler. |
| --rs-text-error | var(--rs-color-red) | Doğrulama mesajı. |
| --rs-border-primary | var(--rs-gray-200) | Ajanda ayırıcıları ve panel sınırları. |
| --rs-btn-primary-bg | var(--rs-primary-500) | Birincil düğme dolgusu. |
| --rs-btn-primary-text | var(--rs-gray-0) | Birincil düğme metni. |
| --rs-state-focus-shadow | 0 0 0 2px rgb(from var(--rs-primary-500) r g b / 25%) | Odak vurgusu. |
### Takvim düzeni tercihleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| isoWeek | true | Takvim haftaları pazartesi günü başlar. |
| Initial date | new Date(2026, 9, 14) | Sabit Ekim örneği; JavaScript ayı sıfır tabanlıdır. |
| Layout switch | 760px | Özgün tek sütunlu kırılma noktası. |
| Weekend rule | getDay() is 0 or 6 | Özgün yerel zamanlama ilkesi; takvim kısıtlaması değildir. |
## React Suite Tasarım Sistemi Kapsamlı 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ı.

## React Suite Tasarım Sistemi: Ayrı Bir Ajandaya Sahip Yerel Takvim

### Ayrı Bir Ajandaya Sahip Yerel Takvim

> React Suite, bileşen bakımından zengin uygulamalara yöneliktir; hem kontroller hem de Calendar gibi daha geniş çalışma yüzeyleri sunar. Bu örnek, derlenmiş stil sayfasıyla birlikte 6.2.4 sürümünü kullanır. Uygulamayı bir CustomProvider sarar; Calendar, Panel, Modal ve diğer bileşenler ise rsuite paketinden içe aktarılır.

Takvim, bağlı bir zamanlama hizmetiymiş gibi davranmaz. İki örnek oturumla başlar ve yerel ekleme/kaldırma işlemlerine izin verir. Seçili gün ve kayıt listesi birbirinden ayrı React durumlarıdır; bu nedenle başka bir güne gitmek zamanlamayı değiştirmez. Okuyucu, tüm durum geçişlerini App kaynak kodunda inceleyebilir.

Destekleyici belirtimi okuyun

## React Suite Tasarım Sistemi: v6 CSS Değişkenleri Referansı

### v6 CSS Değişkenleri Referansı

Bu belirtim, eski bir Less öğreticisinden değil, yüklü v6 CSS sürümünden alınmıştır. Tipografi, aralık, köşe yarıçapı, palet ve anlamsal rollerin tümü --rs değişkenleri olarak kullanılabilir. Varsayılan gövde metni, 0.875rem olan küçük yazı boyutunu kullanırken kök boyut on altı piksel olarak kalır. Bu fark, varsayılan bir bileşen yüzeyinin on altı piksellik bir içerik makalesine kıyasla neden daha sıkışık görünebileceğini açıklar.

Sayfa, --rs-bg-card panellerinin arkasında --rs-bg-well; ajanda ayırıcılarında ise --rs-border-primary kullanır. İşaretçi primary-500 rengini, alan hatası ise text-error anlamsal rolünü kullanır. Referans, sağlayıcı teması değerleri değiştirdiğinde rollerin anlaşılır kalması için metin ve yüzey takma adlarını korur.

Destekleyici belirtimi okuyun

## React Suite Tasarım Sistemi: Takvim Çevresinde Kitaplığın Ölçeğini Kullanın

### Takvim Çevresinde Kitaplığın Ölçeğini Kullanın

Gerçek köşe yarıçapı skalasında varsayılan kök boyutta sm ile xl arasında dört, altı, sekiz ve on iki piksellik değerler bulunur. Temel aralık artışı 0.25rem'dir. Sağlanan CSS, bunları dekoratif bir palet gibi ele almak yerine çevresindeki ajanda ve yardımcı içerikte gerçek yüzey ve metin değişkenlerini kullanır.

Uygulamanın başlığı, satır yüksekliği 1.2 olan ve açıkça 32px seçilmiş bir değerdir; dar ekranlarda 28px'e düşürülür. Oturum başlıkları, kompakt ajanda satırlarına sığması için on yedi piksel kullanır. Bu sayfa tercihleri kitaplığın genel tipografi değişkenlerini geçersiz kılmaz. Böylece Calendar etiketleri ve iletişim kutusu kontrolleri yerel bileşen boyutlarını korur.

Destekleyici belirtimi okuyun

## React Suite Tasarım Sistemi: Seçili Tarihi UTC Kayması Olmadan Denetleyin

### Seçili Tarihi UTC Kayması Olmadan Denetleyin

Calendar bir Date değeri alır; onSelect ise bu seçili değeri günceller. isoWeek, görünür haftayı pazartesi günü başlatır. Sabit başlangıç değeri new Date(2026,9,14) kullanır; dokuz, JavaScript ayları sıfır tabanlı olduğundan Ekim ayına karşılık gelir. Sayfa, bugünün takvimine ilişkin bir iddia değil, bilerek sabit tutulmuş bir örnektir.

Anahtar işlevi, yerel YYYY-MM-DD anahtarı oluşturmak için getFullYear, getMonth ve getDate kullanır. Bazı saat dilimlerinde yerel takvim gününü kaydırabilen UTC dönüşümünden kaçınmak için toISOString().slice(0,10) kullanmaz. Bu kayıtlar günün belirli bir saati olmaksızın tarihleri temsil eder; dolayısıyla örtük bir UTC dönüşümü eklemek, veride bulunmayan bir anlam yaratır.

Destekleyici belirtimi okuyun

## React Suite Tasarım Sistemi: Tarih İşaretçileri ve Seçili Gün İçeriği

### Tarih İşaretçileri ve Seçili Gün İçeriği

renderCell, yerel kayıtlarda o tarihe ait bir kayıt olup olmadığını denetler ve küçük bir etkinlik işaretçisi döndürür. Bu işaretçi yardımcı niteliktedir: Tarihi seçmek, gerçek başlıkları ajandada gösterir. Tek başına renkli bir nokta, kullanıcıya ne planlandığını söylemez veya doğru öğeyi kaldırmasına olanak tanımaz.

Kompakt takvim, mobil görünümde de dar kalır. Ajanda; tarih başlığı, oturum kartları ve yerel bir ekleme eylemi içeren ayrı bir Panel'dir. Özgün 760px kırılma noktasında takvimin altına geçer. Bu düzen, tam bir etkinlik başlığının her takvim hücresine sıkıştırılmasını veya okunaksız bir yatay takvim oluşturulmasını önler.

1. Navigation review oturumunun bulunduğu örnek günü seçin.

2. Noktaya güvenmek yerine oturum başlığını ajandada inceleyin.

3. Oturumu kaldırın ve kayıt kalmadığında tarih işaretinin kaybolduğunu doğrulayın.

Destekleyici belirtimi okuyun

## React Suite Tasarım Sistemi Uygulamasında Zamanlama Kuralları Açıkça Belirtilmiştir

### Uygulamanın Zamanlama Kuralları Açıkça Tanımlanmıştır

getDay() değerleri sıfır ve altı kullanılarak hafta sonu zamanlaması devre dışı bırakılır. Ajanda, gün çalışmıyor izlenimi vermek yerine kuralı açıklayabilsin diye bu tarihlerin seçilmesine yine de izin verir. Bir uyarı mesajı gösterilir ve ekleme düğmesi devre dışı bırakılır. Bu, React Suite Calendar'ın bir kısıtlaması değil, yerel bir ekip politikasıdır.

Oturum bulunmayan bir hafta içi gün için özel bir boş durum gösterilir ve ekleme işlemi kullanılabilir kalır. Bir oturumu kaldırmak kayıtları günceller ve yerel bir bildirim gösterir. Katılımcıya bildirim gönderildiği iddia edilmez. Date nesneleri, kayıt dizisi ve basit politika kaynakta görünür; böylece gerçek bir ürün için bilinçli olarak değiştirilebilir.

Destekleyici belirtimi okuyun

## React Suite Tasarım Sistemi: Doğrulamalı, Odaklanmış Bir Giriş Penceresi

### Doğrulama İçeren Odaklanmış Bir Kayıt İletişim Kutusu

İnceleme oturumu ekle penceresi açıldığında başlık ve önceki hata temizlenir. Modal; Header, Title, Body ve Footer bileşenlerinden oluşur, açılma ve onClose davranışı React durumu tarafından kontrol edilir. Girdinin ilişkili bir etiketi, geçersiz durum işareti ve hata açıklaması vardır. Kırpılmış hâliyle üç karakterden kısa olan bir başlık, pencerenin açık kalmasına ve bir uyarı gösterilmesine neden olur.

Geçerli bir gönderim, seçili tarih için bir kayıt ekler, pencereyi kapatır ve bilgilendirme mesajı gösterir. Modal bileşeni, Escape ve odak yönetimi de dâhil olmak üzere iletişim kutusunun davranışını yönetir. İptal yalnızca taslağı kapatır. Uygulama, kendi başlık kuralının karşılanıp karşılanmadığını öğrenmeden pencereyi kapatmaz.

- İptal, kaydedilmemiş başlığı siler.

- Reddedilen başlık, düzeltilmek üzere korunur.

- Geçerli bir başlık yerel kayıtlara eklenir ve takvim işareti güncellenir.

Destekleyici belirtimi okuyun

## React Suite Tasarım Sistemi: v6 Stillerini ve Uygulamanın Tamamını Yükleyin

### v6 Stillerini ve Uygulamanın Tamamını Yükleyin

Bir React projesine rsuite@6.2.4 yükleyin ve rsuite/dist/rsuite.min.css dosyasını içe aktarın. App örneğinde bu içe aktarma, özgün style.css dosyası ve CustomProvider sarmalayıcısı bulunur. Kurulum girişinde React createRoot kullanılır ve uzak bir CDN'e bağlı değildir. Bağımsız önizleme, aynı yerel bileşenleri ve CSS öğesini yerel olarak paketler.

React Suite ayrıca sıfırlama içermeyen bir stil sayfası dağıtımı da sunar. Bu örnekte standart stil sayfası bilerek kullanılmıştır; her iki dağıtımı birlikte kullanmak stilleri yineler ve sayfayı hangi sıfırlamanın yönettiğini belirsizleştirir. Mevcut bir uygulamada, çevresindeki stil mimarisine uygun dağıtımı seçin ve formlarla başlıkları birlikte doğrulayın.

Destekleyici belirtimi okuyun

## React Suite Tasarım Sistemi: Gerçek Bir Takvim İçin Ek Alan Durumu Gerekir

### Gerçek Bir Takvim İçin Ek Alan Durumu Gerekir

Bağlı bir zamanlayıcıda saatler, saat dilimleri, katılımcılar, izinler ve kalıcılık sonucu bulunmalıdır. Yalnızca tarih içeren bu örnek, bu alanları uydurmaz ve başarılı bir durum güncellemesinin davetiye gönderdiğini öne sürmez. Alt bilgi ve bildirimler, işlemin yerel kapsamını açıkça belirtir. Yerel tarih anahtarı işlevi bu kayıtlar için uygundur ancak saat dilimini dikkate alan toplantılar için eksiksiz bir strateji değildir.

Uzak istek ekliyorsanız, doğrulanmış bir sonuç alınana kadar taslak penceresini açık tutun veya kurtarılabilir bir hata gösterin. Yinelenen gönderimleri önleyin ve hata sonrasında seçili tarihi ve başlığı koruyun. Kitaplık arayüz ilkellerini sağlar; uygulamanın doğruluğu, bu ilkellerin gerçek işlemle ilişkilendirilmesine bağlıdır.

Destekleyici belirtimi okuyun

## React Suite Tasarım Sistemi Bileşen Örnekleri

### Eksiksiz takvim ve ajanda uygulaması

Tarih hücresi işaretleyicileri, yerel tarih anahtarları ve modal giriş akışı içeren kontrollü Calendar.

```
import React,{useState} from 'react';
import {CustomProvider,Calendar,Panel,Button,Modal,Input,Message,Tag} from 'rsuite';
import 'rsuite/dist/rsuite.min.css';
import './style.css';
const key=d=>`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
export default function App(){const[date,setDate]=useState(new Date(2026,9,14)),[open,setOpen]=useState(false),[title,setTitle]=useState(''),[error,setError]=useState(''),[notice,setNotice]=useState(''),[events,setEvents]=useState([{id:1,date:'2026-10-14',title:'Navigation review'},{id:2,date:'2026-10-16',title:'Prototype handoff'}]);const selected=events.filter(e=>e.date===key(date));const weekend=[0,6].includes(date.getDay());function save(){if(title.trim().length<3){setError('Use at least three characters for the session title.');return;}setEvents([...events,{id:Date.now(),date:key(date),title:title.trim()}]);setOpen(false);setNotice('Added to the local calendar only. No invitation was sent.');}
return <CustomProvider><main className='schedule'><header><div><p className='eyebrow'>REACT SUITE / TEAM CADENCE</p><h1>Give the work a place in the week.</h1><p>Select a day to inspect its sessions. Weekend scheduling is disabled in this example.</p></div><Tag color='blue'>Local calendar</Tag></header>{notice&&<Message type='info' closable onClose={()=>setNotice('')}>{notice}</Message>}<div className='schedule-grid'><Panel bordered className='calendar-panel'><Calendar compact bordered isoWeek value={date} onSelect={setDate} renderCell={d=>events.some(e=>e.date===key(d))?<span className='event-dot' aria-label='Has a session'/>:null}/><p className='calendar-legend'><span className='event-dot'/> A date with one or more local sessions</p></Panel><Panel bordered className='agenda-panel'><p className='eyebrow'>{date.toLocaleDateString('en',{weekday:'long'})}</p><h2>{date.toLocaleDateString('en',{month:'long',day:'numeric',year:'numeric'})}</h2>{weekend&&<Message type='warning'>The sample team does not schedule weekend reviews.</Message>}<div className='agenda'>{selected.length?selected.map(e=><article key={e.id}><div><span className='event-kind'>Review session</span><h3>{e.title}</h3></div><Button appearance='subtle' size='sm' aria-label={'Remove '+e.title} onClick={()=>{setEvents(events.filter(x=>x.id!==e.id));setNotice('Removed from the local calendar. No attendee was notified.')}}>Remove</Button></article>):<div className='empty'><h3>No sessions for this day.</h3><p>Choose another date or add a local review session.</p></div>}</div><Button appearance='primary' disabled={weekend} onClick={()=>{setTitle('');setError('');setOpen(true)}}>Add review session</Button></Panel></div><footer>Native React Suite Calendar, Panel, Modal, Input, Message and Button. All dates are local calendar dates; no remote calendar connection.</footer><Modal open={open} onClose={()=>setOpen(false)} size='sm'><Modal.Header><Modal.Title>Add review session</Modal.Title></Modal.Header><Modal.Body><p>For {key(date)}. This adds a record only in the preview.</p><label htmlFor='session-title'>Session title</label><Input id='session-title' value={title} onChange={v=>{setTitle(v);setError('')}} aria-invalid={!!error} aria-describedby='title-error' autoFocus/>{error&&<p id='title-error' role='alert' className='field-error'>{error}</p>}</Modal.Body><Modal.Footer><Button onClick={()=>setOpen(false)} appearance='subtle'>Cancel</Button><Button onClick={save} appearance='primary'>Add locally</Button></Modal.Footer></Modal></main></CustomProvider>}
```

Kod referansı

- new Date içindeki ay değerleri sıfır tabanlıdır.

- Tarih anahtarları UTC dönüşümü yerine yerel takvim alanlarını kullanır.

- Hafta sonu kısıtlamaları uygulama davranışıdır.

### Duyarlı takvim düzeni

Yerel bileşenlerle birlikte gerçek React Suite anlamsal değişkenlerini kullanır.

```
body{background:var(--rs-bg-well)}.schedule{max-width:1120px;margin:auto;padding:32px;color:var(--rs-text-primary)}header{display:flex;gap:24px;justify-content:space-between;align-items:start;margin-bottom:24px}h1{font-size:32px;line-height:1.2;letter-spacing:-.03em;max-width:650px;margin:8px 0 16px}h2{font-size:24px;line-height:1.3;margin:8px 0 24px}.eyebrow{font-size:11px;letter-spacing:.11em;font-weight:700;color:var(--rs-text-secondary)}.schedule-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:20px}.calendar-panel,.agenda-panel{background:var(--rs-bg-card)}.calendar-panel .rs-panel-body{padding:20px}.event-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rs-primary-500)}.calendar-legend{font-size:12px;color:var(--rs-text-secondary);margin-top:16px}.calendar-legend .event-dot{margin-right:6px}.agenda{margin-bottom:24px}.agenda article{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rs-border-primary);padding:20px 0}.agenda h3{font-size:17px;line-height:1.3;margin:6px 0}.event-kind{color:var(--rs-text-secondary);font-size:12px}.empty{padding:24px 0;color:var(--rs-text-secondary)}footer{margin-top:24px;font-size:12px;color:var(--rs-text-secondary)}.field-error{color:var(--rs-text-error);font-size:13px;margin-top:8px}label{display:block;margin-bottom:8px;font-weight:600}@media(max-width:760px){.schedule{padding:20px 16px}.schedule-grid{grid-template-columns:1fr}header{flex-direction:column}h1{font-size:28px}.calendar-panel .rs-panel-body{padding:12px}}
```

Kod referansı

- Sayfa başlığı ve 760px kesme noktası özgün tercihlerdir.

## React Suite Tasarım Sistemi AI Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

React 19 ve React Suite 6.2.4 ile oluşturulmuş yerel örnek. Harici takvim hizmeti kullanılmaz. Uygulamanın tamamı ve stilleri yukarıda verilmiştir.

```
// Create the project first:
// npm create vite@latest react-suite-specimen -- --template react
// cd react-suite-specimen && npm install
// In a React project:
// npm install rsuite@6.2.4
// Save the complete App example as App.jsx and the CSS example as style.css.
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App/>);
// index.html needs <div id="root"></div> and the Vite module entry.
// App.jsx imports rsuite/dist/rsuite.min.css and wraps CustomProvider.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### Projeniz İçin Bir İstem

```
CustomProvider ve yerel stil sayfasıyla React Suite 6.2.4 Calendar ve ajanda bileşimini kullanın. Yerel bir inceleme kaydı için hafta içi günlerin seçilebilmesini, hafta sonlarının devre dışı olmasını ve Modal/Input akışını koruyun. Seçili tarihi ve ajanda kayıtlarını uygulama durumunda tutun, eklemeden önce girilen inceleme bilgilerini doğrulayın ve iptal edildiğinde ajandayı değiştirmeyin. Duyarlı takvim düzenini ve tarihe özgü ajanda çıktısını koruyun. Takvim davetiyesi veya harici zamanlama hizmeti olduğunu öne sürmeyin.
```

## React Suite Tasarım Sistemi Kaynakları ve Kapsamı

React Suite 6.2.4. Özgün hafta sonu politikası ve örnek kayıtlar içeren, yalnızca yerel tarihleri kapsayan takvim; davetiye veya harici zamanlama yoktur.

- Hızlı başlangıç Paket ve stil sayfası kurulumu.

- CSS değişkenleri v6 tipografisi, rengi, boşlukları ve köşe yarıçapı.

- Calendar Kontrollü tarih ve hücre render API.

- Modal Bileşik modal ve odak davranışı.

- Input Metin girişi bileşeni.

- CustomProvider Sağlayıcı düzeyinde bileşen yapılandırması.

## React Suite Tasarım Sistemiyle İlgili Kaynaklar

### Skeleton

Eksiksiz bir okuma masasında Skeleton 5.0.1’in gerçek Cerberus, Mint ve Rose temalarını karşılaştırın; belirteçleri canlı inceleyin, koyu yüzey eşleşmelerini görün ve yerel durumu geri alın.

### Tabler

Gerçek 1.6 tema değişkenleri, zaman çizelgesi kartları, veri ızgarası bağlamı, modal doğrulama ve yerel kontrol noktalarıyla güncellenebilen açık/koyu kompozisyon içeren yerel bir Tabler proje günlüğü.

### Tamagui

Doğrulama, ilerleme takibi ve boş durumdan kurtarma özelliklerine sahip eksiksiz, yerel bileşenlerle oluşturulmuş bir alışkanlık panosunda Tamagui’ın gerçek v5 belirteç kategorilerini ve açık/koyu mavi temalarını keşfedin.


- [Uygulama başvurusu](https://www.rsuitejs.com/components/calendar/)
- [Kaynak](https://www.rsuitejs.com/guide/css-variables/)
- [Kaynak](https://www.rsuitejs.com/components/calendar/)
- [Destekleyici belirtimi okuyun](https://www.rsuitejs.com/guide/usage/)
- [Destekleyici belirtimi okuyun](https://www.rsuitejs.com/guide/css-variables/)
- [Destekleyici belirtimi okuyun](https://www.rsuitejs.com/components/calendar/)
- [Destekleyici belirtimi okuyun](https://www.rsuitejs.com/components/modal/)
- [Kod referansı](https://www.rsuitejs.com/components/calendar/)
- [Kod referansı](https://www.rsuitejs.com/guide/css-variables/)
- [Hızlı başlangıç Paket ve stil sayfası kurulumu.](https://www.rsuitejs.com/guide/usage/)
- [CSS değişkenleri v6 tipografisi, rengi, boşlukları ve köşe yarıçapı.](https://www.rsuitejs.com/guide/css-variables/)
- [Calendar Kontrollü tarih ve hücre render API.](https://www.rsuitejs.com/components/calendar/)
- [Modal Bileşik modal ve odak davranışı.](https://www.rsuitejs.com/components/modal/)
- [Input Metin girişi bileşeni.](https://www.rsuitejs.com/components/input/)
- [CustomProvider Sağlayıcı düzeyinde bileşen yapılandırması.](https://www.rsuitejs.com/components/custom-provider/)