# Chakra UI Tasarım Sistemi ## Chakra UI Tasarım Sistemi Arayüz Önizlemesi Boş alan doğrulamasını, kaydetme işleminin başarısız olduğu benzetimini, girişin korunmasını, başarılı yerel onayı ve görünüm değiştirmeyi deneyin. ## Chakra UI Tasarım Sistemi Tasarım Referansı Chakra UI 3.37.0 varsayılan tema referansları ve açıkça belirtilmiş OpenDesign uygulama belirteçleri. rem değerleri kök yazı tipi boyutuna göredir; piksel karşılıklarında 16px varsayılmıştır. Bu, seçilmiş bir çalışma referansıdır; dışa aktarılan temanın tamamını içermez. ### Varsayılan anlamsal renkler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | bg | white / black | Açık/koyu sayfa arka planı. | | bg.panel | white / gray.950 | Açık/koyu kart yüzeyi. | | bg.subtle | gray.50 / gray.950 | Sade yüzey. | | fg | black / gray.50 | Birincil metin. | | fg.muted | gray.600 / gray.400 | Yardımcı metin. | | border | gray.200 / gray.800 | Panel ve kontrol sınırı. | | fg.error | red.500 / red.400 | Hata metni. | | bg.error | red.50 / red.950 | Hata yüzeyi. | | teal.fg | teal.700 / teal.300 | Belirgin olmayan turkuaz yüzey üzerindeki metin. | | teal.subtle | teal.100 / teal.900 | Geçerli adımın görünümü. | ### Bu örnekte kullanılan temel değerler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | gray.50 | #fafafa | Açık arka plan. | | gray.200 | #e4e4e7 | Açık kenarlık. | | gray.800 | #27272a | Koyu kenarlık. | | gray.950 | #111111 | Koyu arka plan. | | teal.700 | #0c5d56 | Özel açık eylem bu değere başvurur. | | teal.300 | #5eead4 | Özel koyu eylem bu değere başvurur. | ### Varsayılan aralıkların bir bölümü | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | spacing.1 | 0.25rem / 4px | Durum öğesinin dikey dolgusu. | | spacing.2 | 0.5rem / 8px | Satır içi kontroller arasındaki boşluk. | | spacing.3 | 0.75rem / 12px | Eylem grubu boşluğu. | | spacing.4 | 1rem / 16px | Küçük görünüm alanının dolgusu. | | spacing.6 | 1.5rem / 24px | Form alanları arasındaki boşluk. | | spacing.8 | 2rem / 32px | Ana düzen boşluğu. | | spacing.10 | 2.5rem / 40px | Kullanılabilir daha geniş aralık. | | spacing.12 | 3rem / 48px | Kullanılabilir bölüm aralığı. | ### Varsayılan tipografinin bir bölümü | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | fonts.body / fonts.heading | Inter, system fallbacks | Yazı tipi belirteci tek başına Inter yazı tipini indirmez. | | fontSizes.xs | 0.75rem | Örnek açıklaması. | | fontSizes.sm | 0.875rem | Yardımcı metin. | | fontSizes.md | 1rem | Girişler ve normal okuma metni. | | fontSizes.lg | 1.125rem | Kullanılabilir daha büyük gövde metni. | | fontSizes.xl | 1.25rem | Kart başlığı. | | fontSizes.2xl | 1.5rem | Örnek başlığı. | | fontWeights.medium / semibold | 500 / 600 | Etiket hiyerarşisi. | | lineHeights.shorter / moderate | 1.25 / 1.5 | Başlık/paragraf ritmi. | | letterSpacings.wide | 0.025em | Küçük üst etiket. | ### Varsayılan köşe yarıçapları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | radii.sm | 0.25rem / 4px | Dar kenar. | | radii.md | 0.375rem / 6px | Bu örnekteki durum rozeti. | | radii.lg | 0.5rem / 8px | Orta düzeyde yuvarlatma. | | radii.xl | 0.75rem / 12px | Bu örnekteki profil kartı. | | radii.full | 9999px | Formda kullanılmayan kapsül biçimi. | ### Varsayılan duyarlı eşikler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | sm | 480px | Eylem satırı yatay düzene geçebilir. | | md | 768px | İlerleme sütunu formun yanında yer alır. | | lg | 1024px | Kullanılabilir geniş düzen eşiği. | | xl | 1280px | Kullanılabilir masaüstü eşiği. | | 2xl | 1536px | Kullanılabilir ekstra geniş eşik. | ### Uygulama anlamsal belirteçleri: aşağıda tanımlanmıştır | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | workspace.canvas | gray.50 / gray.950 | Özel açık/koyu arka plan eşlemesi. | | workspace.action | brand.700 / brand.300 | Özel eylem arka planı; marka temel değerleri theme.js içinde tanımlanır. | | workspace.onAction | white / gray.950 | Arka planla eşleşen özel eylem metni. | ## Chakra UI 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ı. ## Chakra UI Tasarım Sistemi v3 Sistemi: Yapılandırma, Belirteçler ve Bileşenler ### Eski bir tema nesnesini aktarmak yerine bir sistem oluşturun > Uygulama üç katmandan oluşur: theme.js tasarım kararlarını tanımlar, main.jsx ortaya çıkan sistemi sağlar ve App.jsx formu bir araya getirir. createSystem(defaultConfig, config), uygulama yapılandırmasını birleştirirken varsayılan bileşen tariflerini korur. Baştan oluşturulmuş özel bir sistem için daha fazla tanım gerekir; burada varsayılanları genişletmek bilinçli bir tercihtir. Önizlemede görsel taklitler yerine Chakra bileşenleri kullanılır. Kenar çubuğu, uygulamaya özgü sıralı bir ilerleme listesidir; Chakra Steps bileşeninin kullanıldığı iddiası değildir. Profil kartı, alanlar, seçim kutusu, uyarılar ve düğmeler yerel Chakra bileşimleridir. Destekleyici belirtimi okuyun ### Her katmanda neler bulunur? - tokens: örnekteki iki marka rengi de dahil olmak üzere yeniden kullanılabilir temel değerler. - semanticTokens: tek tek ekranlardan bağımsız, workspace.action gibi koşullara duyarlı roller. - recipes: yeniden kullanılabilir bileşen varyantları; uygulamadaki React durumu, formun geçersiz, beklemede, başarısız veya onaylanmış olup olmadığını belirler. ## Chakra UI Tasarım Sistemi Temel Renkleri ve Anlamsal Tema Rolleri ### Görünüm değiştiğinde rolleri kullanın bg.panel ve fg.muted, yüzey ve metin işlevlerini belirtir; gray.950 ve gray.400 ise bunların temel değerleridir. Referans tablosunda bu değerlerin açık ve koyu temadaki karşılıkları gösterilir. Demoda belge kökünü açık ve koyu modlar arasında değiştirmek, her Field veya Card bileşenini yeniden yazmadan koşullu değerleri etkinleştirir. Bu yerel değiştirme özellikle kalıcılık veya sistem tercihi entegrasyonu içermez. workspace.* rolleri uygulamaya eklenmiştir. Açık yüzeyde koyu turkuaz, koyu yüzeyde açık turkuaz eylem rengi ve bunlarla eşleşen bir metin rengi seçerler. Bunlar resmî Chakra belirteç adları değildir. Eşleşen iki rengi temada tutmak, arka planı değişip etiketi beyaz kalan bir koyu mod düğmesini önler. Destekleyici belirtimi okuyun ### Referans sözdizimi, bileşen kısa gösteriminden farklıdır Belirteç tanımlarında tam referans olan {colors.gray.950} biçimini kullanın. Stil özelliğinde bg="workspace.canvas", renk kategorisi içinde çözümlenir. Bileşik bir CSS değerinde tam belirteç yolunu yeniden kullanmak gerekir. Bu ayrım, bir metin dizgesinin tema referansı sanılmasını önler. ``` ``` Kod referansı ## Chakra UI Tasarım Sistemi Açık Belirteçlerle Okunabilir Bir Yazı Ölçeği ### Ölçeği bu düzene uyarlayın Başlıkta fontSize="2xl" ve lineHeight="shorter"; kart başlığında xl, yardımcı metinde sm, örnek açıklamasında xs kullanılır. Bu seçimler anlamsal başlık düzeylerini değiştirmeden hiyerarşi oluşturur: ekran başlığı h1, form başlığı h2 düzeyindedir. Form içeriğinin normal metin boyutu varsayılan gövde ölçeğinde kalır. Chakra'nın varsayılan gövde ve başlık yazı tipi yığını Inter ile başlar, ardından platform yazı tiplerine geçer. Kendi içinde çalışan demo haricî yazı tipi isteği yapmadığından görüntülenen yedek yazı tipi işletim sistemine göre değişebilir. Tipografinin tam olarak belirlenmesi gerekiyorsa uygun lisanslı bir yazı tipini yerel olarak sunun; yalnızca yazı tipi belirteci ayarlamak, yazı tipi dosyalarını sağlamaz. Destekleyici belirtimi okuyun ### Tipografiyi ve anlamı birbirinden bağımsız tutun Geçerli adım rozeti, ana yönerge değil, kısa bir üst veridir. Zorunlu alan ve hata mesajları, okunabilir bir boyutta alanın yanında kalır. Üst etiketin harf aralığını değiştirmek form etiketlerini etkilemez; uzun bir çalışma alanı adı da çevresindeki kartın genişliğini değiştirmek yerine giriş alanının içinde tutulur. ## Chakra UI Tasarım Sistemi Field, NativeSelect, Card ve Alert Bileşenlerini Birleştirin ### Field, stillendirilmiş bir giriş alanı değil, bileşenler arası ilişkidir Field.Root; etiketi, kontrolü, yardımcı metni ve hata mesajını gruplar. Zorunlu işareti ve RequiredIndicator, alanın zorunlu olduğunu belirtir; invalid ise hata durumunu denetler. Örnekte giriş, React üzerinden kontrollü tutulur ve çalışma alanı adı hatası Field.ErrorText içinde gösterilir. Hata stilleri, bağımsız bir paragrafa ayrı olarak uygulanmaz. Ekip büyüklüğü için NativeSelect.Root, NativeSelect.Field ve NativeSelect.Indicator kullanılır. Böylece kısa ve sabit seçenek listesi için yerel seçim kutusu davranışı korunur. Aranabilir uzak sonuçlar sunuyormuş gibi davranmaz; bu, farklı bir kontrol ve veri etkileşimi gerektirir. Destekleyici belirtimi okuyun ### Geri bildirim ayrı bir bileşimdir Card.Header formun kimliğini, Card.Body ise düzenlenebilir içeriği barındırır. Alert.Root hata veya başarı durumunu seçer; Alert.Indicator simgesini sağlar ve Alert.Content başlıkla açıklamayı gruplar. Kaydetme hatası uyarısı, alan doğrulamasından ayrıdır; çünkü benzetimdeki gönderim başarısız olsa bile çalışma alanı adı geçerli olabilir. Destekleyici belirtimi okuyun ## Chakra UI Tasarım Sistemi Aralık Belirteçlerini ve Duyarlı Stil Özelliklerini Uygulayın ### Somut bir boşluk politikası Alan grupları arasında gap="6", eylemler arasında gap="3" ve ilerleme sütunuyla form arasında gap="8" kullanın. Sayfa, md noktasında p="4" değerinden p="8" değerine geçer. Kök yazı tipi boyutu 16px olduğunda bunlar sırasıyla 24px, 12px, 32px, 16px ve 32px karşılıklarına gelir. rem tabanlı değerler, kullanıcının kök yazı tipi boyutuna göre ölçeklenir. Kartta rounded="xl", durum etiketinde ise rounded="md" kullanılır. Farklı yarıçaplar bilinçli olarak seçilmiştir: büyük kapsayıcıyla kompakt etiketin geometrileri farklıdır. Bu kullanım tercihlerini tüm Chakra uygulamalarının uyması gereken varsayılan kurallar olarak değerlendirmeyin. Destekleyici belirtimi okuyun ### Düzeni md noktasında değiştirin Izgara, md noktasının altında tek sütun kullanır; md noktasından itibaren ise esnek bir formun yanında 220px genişliğinde bir ilerleme sütunu yer alır. minmax(0, 1fr), formun ızgara içinde küçülmesine olanak tanır. Eylem yığını sm noktasında değişir. Bu nesne değerleri, cihaza göre algılama değil, mobil öncelikli geçersiz kılmalardır. ``` … … ``` Kod referansı ## Chakra UI Tasarım Sistemi: Doğrulama, Yükleme ve Kurtarma ### Önizlemenin durum makinesi Kırpılmış adı boş olan form gönderildiğinde invalid ayarlanır ve giriş alanına odaklanılır. Geçerli gönderim pending durumuna geçer, düzenlemeyi devre dışı bırakır ve Button loadingText değerini gösterir. Yerel zamanlayıcının ardından hata onay kutusu, örneğin failed mı yoksa complete mi göstereceğini belirler. Bu dalların hiçbiri ağ isteği göndermez veya veri kaydetmez. Başarısız sonuçta denetlenen ad ve seçilen boyut korunur. Hata simülasyonunu kapatmak yeniden denemeyi sağlar. Tamamlandığında profil alanları devre dışı kalır ve ilk ilerleme etiketi değişir; Reset düzenleme durumuna döndürür. Bu, görünür durumların bileşimini kanıtlar; arka uçta kayıt yapılacağına ilişkin bir sözleşme değildir. Destekleyici belirtimi okuyun ### Durumları sırayla deneyin 1. Formu sıfırlayın ve ad girmeden gönderin; alan iletisini ve odağın giriş alanında olduğunu inceleyin. 2. Bir ad girin, başarısız kayıt simülasyonunu etkinleştirin ve gönderin; hata sonrasında değerlerin korunduğunu doğrulayın. 3. Başarısızlık simülasyonunu devre dışı bırakıp yeniden gönderin; onay özetini inceleyin, ardından görünümü değiştirin. ## Chakra UI Tasarım Sistemi: Bileşim Boyunca Yerel Anlamsal Yapıyı Koruyun ### Doğrulama ve ilerleme anlaşılır kalır Bu örnek, özel Field hata akışını göstermek ve tarayıcının doğrulama arayüzünde durmamak için noValidate kullanır. Field aracılığıyla etiket alanla ilişkili kalır ve ilk geçersiz giriş alanına odaklanılır. Bekleyen işlem, canlı bir durum bölgesiyle bildirilir; yalnızca bir dönen simgeyle ifade edilmez. İlerleme listesi sıralı liste anlamını kullanır ve etkin öğede aria-current="step" bulunur. Mevcut olmayan ekranlara yönlendiren sahte bağlantılar içermez. Önizlemedeki ikinci ve üçüncü adımlar bağlamı açıklar ancak tıklanabilir değildir. Böylece gösterimin sınırları görünür olur. Destekleyici belirtimi okuyun ### Odak, özel eylem tarifinin bir parçasıdır Başlangıç varyantı, açık bir focus-visible dış çizgisi ve ofset tanımlar. Koyu görünümde, eylem rolüyle birlikte dış çizgi rolü de değişir. Yerel onay kutusu ve seçme alanı klavyeyle kullanılabilir. Tüketici uygulamada odağı, alan duyurularını, yakınlaştırmayı ve ekran okuyucu çıktısını da inceleyin; bileşen düzeyindeki bir örnek, başlangıç ürününün tamamının erişilebilir olduğunu kanıtlayamaz. ## Chakra UI Tasarım Sistemi: Tarifler, Sağlayıcı Yapılandırması ve Sürüm Sınırları ### Button'ı genişletin; Status'ı yerel olarak tanımlayın Başlangıç Button varyantı theme.recipes.button altında eklenir. Yapılandırma defaultConfig'i genişlettiğinden outline gibi mevcut varyantlar kullanılmaya devam eder. Durum etiketi, defineRecipe ve useRecipe kullanılarak yerel olarak tanımlanır: durum varyantları current, complete ve waiting değerlerini farklı anlamsal rollere eşler. Bu bir uygulama bileşenidir, Chakra dışa aktarımı değildir. Tek öğeli bir tarif, tek bir stil nesnesi döndürür. Field gibi birden çok parçalı bileşenlerin çeşitli yuvaları vardır; parçaları birlikte temalandırılacaksa yuva tarifleri gerekir. Düğme benzeri bir tarifi tüm Field'a uygulamak; etiket, denetim ve hata öğelerini ayrı ayrı yönetmez. Destekleyici belirtimi okuyun ### Sağlanan dosyaları birlikte kullanın Kurulum komutlarıyla Vite React projesini oluşturun, varsayılan App ve main modüllerini aşağıdaki örneklerle değiştirin ve theme.js dosyasını ekleyin. JSX örneği JavaScript kullanır; böylece özel belirteç ve varyant adları için oluşturulmuş TypeScript bildirimleri gerekmez. Bir TypeScript uyarlaması, Chakra CLI typegen komutunu tema dosyasına karşı çalıştırmalıdır. v2 extendTheme kurulumunu içe aktarmayın veya bu v3 sağlayıcısına theme={...} aktarmayın. Gerçek kök bileşen ChakraProvider value={system} kullanır. Örneğe bilerek ikinci bir renk modu sağlayıcısı eklenmemiştir: yerel açık/koyu sınıf değiştiricisi bu yalıtılmış önizleme için yeterlidir; gerçek bir uygulamada kalıcı tercih ve sunucu tarafında oluşturma desteği gerekebilir. Destekleyici belirtimi okuyun ## Chakra UI Tasarım Sistemi: Temayı ve Formu Birlikte Doğrulayın ### Bu örneğin kanıtladıkları Anlamlı inceleme birimi, her iki görünümdeki profil kartının tamamıdır: etiket, giriş alanı, yardımcı metin, geçersiz geri bildirimi, bekleyen düğme, hata uyarısı ve başarı özeti. Tek bir düğme; anlamsal arka planın eksik olduğunu veya denetimin hata durumunun etiketiyle ilişkilendirilmediğini gösteremez. Başvuru tablosunu oluşturulan arayüzle karşılaştırın. Özel turkuaz eylem, varsayılan outline eyleminden farklı olmalı; 6 boşluğu alanları ayırmalı; md noktasının altında ızgara tek sütuna geçmelidir. Bu kontroller, yazılı kuralları oluşturulan çıktıya bağlar. ### Örneğin kapsamadıkları Önizlemede hesap oluşturma, davetiye gönderme, kalıcı depolama, kimlik doğrulama veya başka bir başlangıç ekranıyla entegrasyon yoktur. Zamanlayıcının bir simülasyon olduğu açıkça belirtilmiştir. Gerçek bir uç noktaya bağlarken gösterilen alan ve istek durumu ayrımını koruyun, zamanlayıcıyı istekle değiştirin ve tamamlanmanın yerel olarak kabul, uzaktan kaydedilme veya tam etkinleştirme anlamına gelip gelmediğini tanımlayın. ## Chakra UI Tasarım Sistemi Bileşen Örnekleri ### theme.js — temel belirteçler, anlamsal roller ve tarifler Örneğin eksiksiz uygulama teması. Çalışma alanı rolleri ve başlangıç varyantı özgün eklemelerdir; defaultConfig, Chakra'nın standart temasını sağlar. ``` import { createSystem, defaultConfig, defineConfig, defineRecipe } from '@chakra-ui/react'; export const statusRecipe = defineRecipe({ base: { display: 'inline-flex', px: '2', py: '1', rounded: 'md', fontSize: 'xs', fontWeight: 'semibold' }, variants: { state: { current: { bg: 'teal.subtle', color: 'teal.fg' }, complete: { bg: 'bg.success', color: 'fg.success' }, waiting: { bg: 'bg.muted', color: 'fg.muted' }, }, }, defaultVariants: { state: 'waiting' }, }); const config = defineConfig({ theme: { tokens: { colors: { brand: { 700: { value: '#0c5d56' }, 300: { value: '#5eead4' } } } }, semanticTokens: { colors: { 'workspace.canvas': { value: { base: '{colors.gray.50}', _dark: '{colors.gray.950}' } }, 'workspace.action': { value: { base: '{colors.brand.700}', _dark: '{colors.brand.300}' } }, 'workspace.onAction': { value: { base: '{colors.white}', _dark: '{colors.gray.950}' } }, } }, recipes: { button: defineRecipe({ variants: { variant: { onboarding: { bg: 'workspace.action', color: 'workspace.onAction', _hover: { opacity: 0.9 }, _focusVisible: { outline: '2px solid', outlineColor: 'workspace.action', outlineOffset: '2px' }, }, } } }), }, }, }); export const system = createSystem(defaultConfig, config); ``` Kod referansı - Marka değerleri, başvurulan turkuaz temel değerleriyle bilerek eşleştirilmiştir. - Durum tarifi yereldir; Button varyantı sistemde kayıtlıdır. ### App.jsx — yerel anlamsal yapıyı koruyan eksiksiz form ve durum örneği Önizlemede kullanılan gerçek React bileşimi. Tema değiştirme, Field doğrulaması, yerel seçme alanı, bekleme geri bildirimi, başarısızlık simülasyonu, onay ve sıfırlama içerir. ``` import React, { useEffect, useRef, useState } from 'react'; import { Box, Button, Card, Field, Grid, Heading, Input, NativeSelect, Stack, Text, Alert, chakra, useRecipe } from '@chakra-ui/react'; import { statusRecipe } from './theme'; function Status({ state, children }) { const recipe = useRecipe({ recipe: statusRecipe }); return {children}; } export default function App() { const [dark, setDark] = useState(false); useEffect(() => { document.documentElement.className = dark ? 'dark' : 'light'; }, [dark]); const [name, setName] = useState('Northstar Studio'); const [size, setSize] = useState('2–10'); const [invalid, setInvalid] = useState(false); const [phase, setPhase] = useState('editing'); const [simulateFailure, setSimulateFailure] = useState(false); const nameInput = useRef(null); const pending = phase === 'pending'; const complete = phase === 'complete'; const save = (event) => { event.preventDefault(); if (!name.trim()) { setInvalid(true); nameInput.current?.focus(); return; } setInvalid(false); setPhase('pending'); window.setTimeout(() => setPhase(simulateFailure ? 'failed' : 'complete'), 600); }; return CHAKRA UI · NATIVE SPECIMENSet up your workspace {complete ? 'Complete' : 'Current'}1. Workspace profileName and team size Next2. Invite your teamAvailable in the full product Optional3. Connect toolsComplete this later Scale in this specimenField gap 6 · Card padding 6
Page gap 8 · Radius xl Workspace profileThe name appears on your team's workspace.
Workspace name {setName(e.target.value);setInvalid(false);}} autoComplete='organization' /> Use a name your teammates will recognize. Enter a workspace name. Team size setSize(e.target.value)}> Used only for this local preview summary. {phase === 'failed' && Demo save failedYour values are still here. Turn off failure simulation and retry.} {complete && Profile confirmed in this preview{name.trim()} · {size} people. Nothing was sent or stored.} {pending ? 'Simulating a response. No network request is made.' : complete ? 'Profile step complete. Reset to try another state.' : 'Try an empty name, a failed save, or a different appearance.'}
Actual Chakra UI 3.37.0 components. Custom workspace semantic tokens and button recipe. Memory-only demonstration. ; } ``` Kod referansı - İstek gönderilmez; 600ms gecikme, bekleme arayüzünü gösterir. - Sonraki adımlar işlevsel gezinme öğeleri değil, bağlam belirten etiketlerdir. ## Chakra UI Tasarım Sistemi AI Ajanı Kurulumu ### Uygulamaya Başlangıç Noktası Yüklü Vite sürümünün ve Chakra'nın desteklediği Node.js sürümünü kullanın (Chakra, Node 20 veya üzeri sürümleri belgelendirir). Bu blok, terminal komutlarını src/main.jsx dosyasından ayrı tutar. Eksiksiz tema ve App dosyaları yukarıda verilmiştir; gizli bir sağlayıcı parçacığına veya harici bir CSS öğesine gerek yoktur. ``` # Terminal: create a JavaScript React application npm create vite@latest chakra-profile -- --template react cd chakra-profile npm install npm install @chakra-ui/react@3.37.0 @emotion/react # Save the two complete examples as src/theme.js and src/App.jsx. # Replace src/main.jsx with: import React from 'react'; import { createRoot } from 'react-dom/client'; import { ChakraProvider } from '@chakra-ui/react'; import { system } from './theme'; import App from './App'; createRoot(document.getElementById('root')).render(); # Start from the project directory: npm run dev ``` ### Projeniz İçin Bir İstem ``` Başlangıç noktası olarak Chakra UI 3.37.0 sürümünü ve sağlanan theme.js ile App.jsx dosyalarını kullanın. Çalışma alanının anlamsal rollerini, Field bileşimini, yerel seçme alanını ve geçersiz girdi ile başarısız gönderim arasındaki ayrımı koruyun. Yalnızca simüle edilen zamanlayıcıyı gerçek kalıcılık API çözümümüzle değiştirin; onaylanmış sonuç alınmadan profilin tamamlandığını belirtmeyin. Klavye odağını, duyarlı base/md düzenini ve açık/koyu değerleri koruyun. Yeni belirteçleri veya tarif varyantlarını açıklayın. ``` ## Chakra UI Tasarım Sistemi Kaynakları ve Kapsamı Belgelenmiş Chakra UI v3 temellerini kullanan özgün OpenDesign uygulama kılavuzu. Varsayılan belirteç başvuruları uygulamaya özgü çalışma alanı rollerinden ayrılmıştır. Yerel önizleme, yerel durumları gösterir; çalışma alanı verilerini kaydetmez veya başlangıç yolculuğunun tamamını uygulamaz. - Mimari Mimari için resmi Chakra UI başvuru kaynağı. - Tasarım belirteçleri Belirteçler için resmi Chakra UI başvuru kaynağı. - Anlamsal Anlamsal yapıya ilişkin resmi Chakra UI başvuru kaynağı. - Renkler Renkler için resmi Chakra UI başvuru kaynağı. - Boşluklar Boşluklar için resmi Chakra UI başvuru kaynağı. - Tipografi Tipografi için resmi Chakra UI başvuru kaynağı. - Köşe yarıçapları Köşe yarıçapları için resmi Chakra UI başvuru kaynağı. - Ekran genişliği eşikleri Kesme noktaları için resmi Chakra UI başvuru kaynağı. - Tarifler Tarifler için resmi Chakra UI başvuru kaynağı. - Özel tarifler Özel tarifler için resmi Chakra UI başvuru kaynağı. - Field Field için resmi Chakra UI başvuru kaynağı. - Button Button için resmi Chakra UI başvuru kaynağı. - Card Card için resmi Chakra UI başvuru kaynağı. - Yerel seçme alanı Yerel seçme alanı için resmi Chakra UI başvuru kaynağı. - Alert Uyarılar için resmi Chakra UI başvuru kaynağı. - Duyarlı tasarım Duyarlı tasarım için resmi Chakra UI başvuru kaynağı. - Kurulum Kurulum için resmi Chakra UI başvuru kaynağı. ## Chakra UI Tasarım Sistemi İlgili Kaynaklar ### CoreUI Gerçek 5.9 tema değişkenleri, yerel sekmeler ve toplu onay kutusu seçimiyle oluşturulmuş CoreUI inceleme kuyruğu; son yerel arşivleme işlemini geri alabilen kalıcı bir toast da içerir. ### daisyUI CSS ile yerel çalışan bu davet stüdyosu; daisyUI 5 anlamsal temasını, eşleştirilmiş içerik renklerini, radyo düğmesi gruplarını, aralık kontrollerini, tarayıcı doğrulamasını ve gerçek bir inceleme iletişim penceresi adımını gösterir. ### Element Plus Modül seçimi için bir çalışma alanı oluştururken Element Plus’ın gerçek Transfer modelini, filtrelerini ve devre dışı seçeneklerini kullanın; doğrulanmış renkler, yazı boyutları ve kontrol ölçüleriyle destekleyin. - [Uygulama başvurusu](https://chakra-ui.com/docs/components/field) - [Kaynak](https://chakra-ui.com/docs/theming/colors) - [Kaynak](https://chakra-ui.com/docs/theming/spacing) - [Kaynak](https://chakra-ui.com/docs/theming/typography) - [Kaynak](https://chakra-ui.com/docs/theming/radii) - [Kaynak](https://chakra-ui.com/docs/theming/breakpoints) - [Kaynak](https://chakra-ui.com/docs/theming/semantic-tokens) - [Destekleyici belirtimi okuyun](https://chakra-ui.com/docs/theming/overview) - [Destekleyici belirtimi okuyun](https://chakra-ui.com/docs/theming/semantic-tokens) - [Kod referansı](https://chakra-ui.com/docs/theming/tokens) - [Destekleyici belirtimi okuyun](https://chakra-ui.com/docs/theming/typography) - [Destekleyici belirtimi okuyun](https://chakra-ui.com/docs/components/field) - [Destekleyici belirtimi okuyun](https://chakra-ui.com/docs/components/alert) - [Destekleyici belirtimi okuyun](https://chakra-ui.com/docs/theming/spacing) - [Kod referansı](https://chakra-ui.com/docs/styling/responsive-design) - [Destekleyici belirtimi okuyun](https://chakra-ui.com/docs/components/button) - [Destekleyici belirtimi okuyun](https://chakra-ui.com/docs/theming/recipes) - [Kod referansı](https://chakra-ui.com/docs/theming/overview) - [Kod referansı](https://chakra-ui.com/docs/components/field) - [Mimari Mimari için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/overview) - [Tasarım belirteçleri Belirteçler için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/tokens) - [Anlamsal Anlamsal yapıya ilişkin resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/semantic-tokens) - [Renkler Renkler için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/colors) - [Boşluklar Boşluklar için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/spacing) - [Tipografi Tipografi için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/typography) - [Köşe yarıçapları Köşe yarıçapları için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/radii) - [Ekran genişliği eşikleri Kesme noktaları için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/breakpoints) - [Tarifler Tarifler için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/recipes) - [Özel tarifler Özel tarifler için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/theming/customization/recipes) - [Field Field için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/components/field) - [Button Button için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/components/button) - [Card Card için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/components/card) - [Yerel seçme alanı Yerel seçme alanı için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/components/native-select) - [Alert Uyarılar için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/components/alert) - [Duyarlı tasarım Duyarlı tasarım için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/styling/responsive-design) - [Kurulum Kurulum için resmi Chakra UI başvuru kaynağı.](https://chakra-ui.com/docs/get-started/installation)