# gluestack UI Tasarım Sistemi

## gluestack UI Tasarım Sistemi Arayüz Önizlemesi

Benzersiz bir öğe ekleyin, paketlendi olarak işaretleyin ve hesaplanan ilerlemeyi inceleyin.

## gluestack UI Tasarım Sistemi Tasarım Referansı

Referansta belgelenmiş v5 açık renkleri, kurulu temel oluşturucudan API ayrı tutulur. Doğrudan oluşturucular CLI temasını otomatik olarak uygulamaz. Önizlemede listelenen renkler özgün stillere açıkça eşlenir ve daha belirgin, özel bir odak çerçevesi kullanılır. Geometri ve görseller uygulamaya özgü tercihlerdir.

### Belgelenmiş v5 açık renk rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| background | #ffffff | Sayfa tuvali. |
| foreground | #0a0a0a | Normal, okunabilir metin. |
| card | #ffffff | Kart yüzeyi. |
| popover | #ffffff | Katman yüzeyi; bu incelemede açılır pencere kullanılmıyor. |
| popover-foreground | #0a0a0a | Katman yüzeyiyle birlikte kullanılan metin. |
| muted | #f5f5f5 | Özgün görsel paneli dâhil, destekleyici yüzeyler. |
| muted-foreground | #737373 | İkincil açıklamalar ve durum ayrıntıları. |
| destructive | #e7000b | Geçersiz giriş bildirimi; hata metin olarak da gösterilir. |
| border | #e5e5e5 | Kart kenarlıkları ve liste ayırıcıları. |
| input | #e5e5e5 | Alan kenarlığının normal durumu. |
| ring | #d4d4d4 | Belgelenmiş varsayılan halka rengi; bu incelemede daha belirgin, özgün #737373 odak çerçevesi kullanılır. |
| primary | #171717 | Ana eylem yüzeyi ve ilerleme dolgusu. |
| primary-foreground | #fafafa | Koyu eylem yüzeyiyle birlikte kullanılan metin. |
| secondary | #f5f5f5 | Daha az vurgulu eylem yüzeyi. |
| secondary-foreground | #171717 | İkincil yüzeylerle birlikte kullanılan metin. |
| accent | #f7f7f7 | Ek vurgu yüzeyi rolü. |
| accent-foreground | #343434 | Vurgu rolüyle birlikte kullanılan metin. |
### Temel Button fabrikası ve durumları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| createButton | { Root, Text, Group, Spinner, Icon } | Gerçek ana bileşenleri sağlayın; oluşturucu, eksiksiz bir tema değil davranış ekler. |
| Button.Text | Text host | Düğme metnini kendi durum bağlamında tutar. |
| Button.Group | Group host | Düğmeleri gruplamak için üretilen alt bileşen; bu düzende kullanılmıyor. |
| Button.Spinner | Spinner host | Üretilen yükleme göstergesi; anında gerçekleşen yerel bir eylem için göstermeyin. |
| Button.Icon | Icon host | Üretilen simge alt bileşeni; önizlemede açık metin eylemleri kullanılır. |
| Button isDisabled | boolean | Yalnızca görünümünü değil, gerçek basma davranışını devre dışı bırakır. |
| Button data-focus-visible | true / false | Özgün CSS, klavye odağı için görünür bir çerçeve uygular. |
| Button data-active | true / false | Biçimlendirme için basılı etkileşim durumunu sunar. |
### Temel Input bağlamı ve ana bileşen özellikleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| createInput | { Root, Icon, Slot, Input } | Alan bağlamını ve ilgili yuvaları oluşturur. |
| Input.Input | TextInput host | Oluşturucunun döndürdüğü metin giriş bileşeni. |
| isInvalid | Input root boolean | Geçersiz bağlamı ve aria-invalid değerini alana aktarır. |
| isRequired | Input root boolean | Gerekli durumunu aktarır; uygulama ayrıca kendi boşlukları temizleme doğrulamasını yapar. |
| value / onChangeText | Controlled TextInput props | Taslak metni React durumunda tutun. |
| onSubmitEditing | TextInput callback | Bu tarayıcı örneğinde Enter tuşuna basıldığında bir öğe ekler. |
| maxLength | 60 in the original study | Bu uygulama için seçilmiş bir TextInput sınırı; gluestack varsayılanı değildir. |
| aria-label | Item name in the original study | Görünür bir etiketle birlikte giriş alanını adlandırır. |
## gluestack UI Tasarım Sistemi Eksiksiz Kılavuzu

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ı.

## gluestack UI Tasarım Sistemi Sürümleri, Oluşturucular ve Üretilen Bileşenler

### Gerçek uygulama yolunu seçin

> gluestack birden fazla katmandan oluşur. Standart kurulum akışı, stillendirilmiş bileşenleri bir uygulamaya üretir. Bu incelemede ise kurulu temel paketten createButton ve createInput içe aktarılır ve React Native Web ana bileşenleri sağlanır. Bu ayrım önemlidir: yalnızca core paketini kurmak, üretilen düğme varyantlarını veya eksiksiz temayı sağlamaz.

Çalışan örnekte core 5.0.15 ve utils 5.0.6 sürümleri sabitlenmiştir. Örneğin React Native Web bağdaştırıcıları gerçek bileşenlerdir; uygulama kabuğu ve durum mantığı ise özgündür. Eksiksiz bir Expo veya Next.js uygulaması oluştururken kurulum belgelerini kullanın; bu tarayıcı incelemesini yeniden oluşturmak için buradaki dosyaların tamamından yararlanın.

## gluestack UI Tasarım Sistemi Anlamsal Renkleri ve Açık Stil Kullanımı

### Dekoratif seçimlere geçmeden önce rolleri eşleştirin

Sayfada beyaz bir tuval, koyu renkli birincil eylem, yumuşak tonlu destek alanları ve görünür kenarlık rolleri kullanılır. Bu değerler belgelenmiş v5 açık renk paletinden alınır, ardından React Native stiller ve sıradan CSS aracılığıyla açıkça atanır. Bunları sessizce uygulayan bir çalışma zamanı sağlayıcısı yoktur.

Geçersiz bir alanda, yıkıcı renkte kenarlık okunabilir bir açıklama ve odağı geri taşıma davranışıyla birlikte kullanılır. Özgün odak çerçevesi, belgelenmiş varsayılan halkadan daha koyudur; bu nedenle stil sayfasında bir kitaplık belirteciymiş gibi sunulmak yerine bu tercih açıkça belirtilir.

### Geçişleri bilinçli biçimde yönetin

Sayısal palet adları kullanan eski örnekler, v5’in anlamsal adlandırma sözlüğüyle gelişigüzel biçimde bir arada kullanılmamalıdır. Belirteç adını değiştirmeden önce kurulu üretilmiş yapılandırmayı ve yükseltme kılavuzunu inceleyin. Doğrudan oluşturucu incelemesi, eksiksiz bir uygulama geçişinin tamamlandığını kanıtlamadan davranışı gösterebilir.

## gluestack UI Tasarım Sistemi Button Bileşimi ve Klavye Eylemleri

### Oluşturucuya gerekli tüm ana bileşenleri verin

createButton; Pressable, Text, View, ActivityIndicator ve bir simge ana bileşeni alır. Button ile Text, Group, Spinner ve Icon alt bileşenlerini döndürür. Eksiksiz örnekte, basılabilir köke düz metin yerleştirmek yerine Button.Text kullanılır.

Paketleme eşzamanlı bir durum geçişidir; bu nedenle yapay bir yükleme göstergesi veya kaydetme gecikmesi yoktur. Her eylemin erişilebilir etiketi, öğe adını içerir. Sıradaki etkinin net kalması için görünür eylem Pack item ile Unpack arasında değişir.

### Oluşturulan davranışı doğrulayın

1. Pack item eylemine Sekme tuşuyla gidin ve Boşluk tuşuna basın.

2. Hem metinle belirtilen paketlenme durumunun hem de ilerleme değerinin değiştiğini doğrulayın.

3. Unpack eylemini kullanın ve aynı öğenin listede kaldığını doğrulayın.

4. Klavye desteğinin olduğunu fareyle üzerine gelmenin kanıtladığını varsaymak yerine odak çerçevesini inceleyin.

## gluestack UI Tasarım Sistemi Input Bağlamı ve Eksiksiz Doğrulama

### Saklanacak değeri doğrulayın

Giriş alanı, value ve onChangeText üzerinden denetimli kalır. Ekleme sırasında önce taslak metindeki boşluklar temizlenir, boş sonuç reddedilir ve ardından adlar büyük-küçük harf duyarsız biçimde karşılaştırılır. Reddedilen değer, kullanıcının düzeltebilmesi için alanda kalır.

Köke isInvalid ve isRequired verilir; gerçek alana etiket, açıklama başvurusu ve odağı geri yüklemek için bir ref sağlanır. Doğrulama uygulamaya aittir: temel bir giriş alanını gerekli olarak işaretlemek, yinelenen ad kuralını oluşturmaz.

### Görünür tüm alan durumlarını yönetin

- Başlangıç: alan boştur ve uzunluk ipucu görünür.

- Geçersiz: açıklama bir uyarıda görünür ve alan odağı alır.

- Düzenleme: kullanıcı taslağı değiştirdikçe eski hata metni temizlenir.

- Kabul edildi: paketlenmemiş yeni bir satır eklenir, alan temizlenir ve durum bildirimi eklenen öğeyi belirtir.

## gluestack UI tasarım sistemi Kararlı Kimlik ve Hesaplanan İlerleme

### Öğeleri saklayın, özeti hesaplayın

Her öğenin kararlı bir sayısal id değeri, adı ve packed bayrağı vardır. Yeni id değerleri için bir ref kullanılır; görüntülenen ad, React anahtarı olarak kullanılmaz. Değiştirme işlemi id üzerinden eşleştirme yapar; böylece birbiriyle ilgisiz iki arayüz güncellemesi yanlışlıkla farklı bir satırı değiştirmez.

İlerleme payı packed bayraklarından, paydası ise geçerli listeden hesaplanır. Paketlenmemiş bir öğe eklemek, önceden paketlenmiş öğeleri kaybetmeden yüzdeyi düşürebilir. Bu, daha büyük bir kontrol listesinin beklenen sonucudur; animasyon hatası değildir.

### Sıfırlamayı açık bir yerel eylem olarak uygulayın

Sıfırlama, örnek öğeleri geri yükler; taslağı ve hatayı temizler, sıradaki id değerini sıfırlar ve sonucu duyurur. Sayfa yeniden yüklendiğinde de örnek durumuyla başlar. Bu önizlemenin arkasında sunucu, hesap eşitlemesi veya kalıcı depolama yoktur.

## gluestack UI tasarım sistemi Duyarlı Düzen ve Özgün Görseller

### Ana bileşen davranışını sayfa geometrisinden ayırın

Masaüstü düzeninde kontrol listesi giriş panelinin yanında yer alır. 700 pikselde tek sütuna dönüşür. Satırlar gerektiğinde kaydırılır ve uzun öğe adları kullanılabilir alan içinde satır kırar; sabit genişlikli bir eylem tüm belgenin yatay kaymasına neden olmamalıdır.

Defter ve kalem, gluestack marka görsellerinden kopyalanmamış, özgün CSS şekillerdir. Kartın 14 piksellik köşe yarıçapı, panel aralığının 24 piksel olması ve başlık ölçeği bu incelemede alınmış tasarım kararlarıdır. Referans tablosunda bunlar belgelenmiş renk rollerinden ayrı tutulur.

## gluestack UI tasarım sistemi Tarayıcı Erişilebilirliği ve Platform Kapsamı

### Gerçekte temsil edilen ortamda test edin

Önizleme React Native Web kullanılarak oluşturulmuş ve tarayıcıda kontrol edilmiştir. Yerel iOS veya Android davranışını doğrulamaz. Bir Expo uygulamasında dokunma hedefleri, ekran okuyucu duyuruları, klavyeden kaçınma ve platform gezinmesi ayrıca doğrulanmalıdır.

İlerleme öğesi adını, minimum, maksimum ve mevcut değerini içerir. Canlı durum bildirimi, okuyucuyu kontrol listesinden uzaklaştırmadan tamamlanan işlemleri açıklar. Form, reddedilen girişte taslağı korur ve odağı alana geri verir. Bunlar, yerel temel davranışın üzerine eklenen uygulama sorumluluklarıdır.

## gluestack UI Tasarım Sistemi: Tam Derleme ve Bağımlılık Sınırı

### Bu çalışmayı birebir yeniden oluşturun

Component Examples bölümündeki dört dosyayı aynı dizine kaydedin ve aşağıda belirtilen sabitlenmiş paketleri yükleyin. Temel bileşenler içeride yerel modül adını kullandığından, derleme react-native adını react-native-web ile eşler. Kaynak, tarayıcı barındırıcılarını doğrudan içe aktarır ve hiçbir zaman Expo çalışma zamanını yüklemez.

Web'e özel bu alt kümedeki dar kapsamlı paket kurulumu, eski eş bağımlılık çözümlemesini kullanır. Bu, eksiksiz bir yerel uygulama için öneri değildir: tam kitaplık, bu iki oluşturuculu paketin kullanmadığı yerel, SVG ve güvenli alan entegrasyonları için eş bağımlılıklar bildirir. Bileşen kümesini genişletirken uygun eş bağımlılıkları ekleyin.

### Her seferinde tek katmanı değiştirin

1. Dosyaları değiştirmeden derleyin; ekleme, yinelenen öğeyi reddetme, paketleme ve sıfırlama işlemlerini doğrulayın.

2. Oluşturucu bağlantılarını olduğu gibi koruyarak özgün düzeni veya uygulama içeriğini değiştirin.

3. Oluşturulan NativeWind bileşenlerini kullanacaksanız stil ve sağlayıcı kurulumunu ayrı bir entegrasyon adımı olarak değiştirin.

4. Bu değişiklikten sonra klavye davranışını ve gerçek hedef platformları yeniden kontrol edin.

## gluestack UI Tasarım Sistemi Bileşen Örnekleri

### app.jsx — temel bileşenlerin eksiksiz örneği

Gerçek oluşturucu bağlantıları ve kontrol listesinin tüm durum modeli.

```
import React,{useState,useRef} from 'react';
import{createRoot}from'react-dom/client';
import{Pressable,Text,View,TextInput,ActivityIndicator}from'react-native-web';
import{createButton}from'@gluestack-ui/core/button/creator';
import{createInput}from'@gluestack-ui/core/input/creator';
const Button=createButton({Root:Pressable,Text,Group:View,Spinner:ActivityIndicator,Icon:View});
const Input=createInput({Root:View,Input:TextInput,Slot:Pressable,Icon:View});
const seed=[{id:1,name:'Sketchbook',packed:true},{id:2,name:'Pencil roll',packed:false},{id:3,name:'Water bottle',packed:false}];
function App(){const[items,setItems]=useState(seed),[name,setName]=useState(''),[error,setError]=useState(''),[message,setMessage]=useState('Pack each item when it is ready.');const next=useRef(4),field=useRef(null);const count=items.filter(x=>x.packed).length;
function add(){const v=name.trim();if(!v||items.some(x=>x.name.toLowerCase()===v.toLowerCase())){setError(!v?'Enter the name of an item.':'That item is already in the kit.');field.current.focus();return}setItems([...items,{id:next.current++,name:v,packed:false}]);setName('');setError('');setMessage(v+' added to this local kit.')}
return <main><header><p className="eyebrow">GLUESTACK UI / CORE COMPONENT STUDY</p><h1>A small kit.<br/>A clearer start.</h1><p className="intro">Prepare a drawing kit with actual gluestack core Button and Input creators. Your checklist stays in this browser session.</p></header><div className="layout"><section className="panel"><div className="sectionhead"><h2>Your field kit</h2><span className="badge">{count} of {items.length} packed</span></div><div className="meter" role="progressbar" aria-label="Packed items" aria-valuemin={0} aria-valuemax={items.length} aria-valuenow={count}><i style={{width:100*count/items.length+'%'}}/></div><ul>{items.map(item=><li key={item.id}><div><strong>{item.name}</strong><span>{item.packed?'Packed and ready':'Still to pack'}</span></div><Button onPress={()=>{setItems(items.map(x=>x.id===item.id?{...x,packed:!x.packed}:x));setMessage(item.name+(item.packed?' marked to pack.':' marked packed.'))}} style={item.packed?styles.secondary:styles.primary} aria-label={(item.packed?'Unpack ':'Pack ')+item.name}><Button.Text style={{color:item.packed?'#171717':'#fafafa',fontSize:14,fontWeight:600}}>{item.packed?'Unpack':'Pack item'}</Button.Text></Button></li>)}</ul><p className="status" role="status">{message}</p></section><aside className="panel"><div className="drawing" aria-hidden="true"><span className="book">FIELD<br/>NOTES</span><i className="pencil"/></div><h2>Add one useful thing</h2><label htmlFor="kit-name">Item name</label><Input isInvalid={!!error} isRequired style={styles.input}><Input.Input id="kit-name" aria-label="Item name" aria-describedby={error?'kit-error':'kit-hint'} ref={field} value={name} onChangeText={v=>{setName(v);setError('')}} onSubmitEditing={add} maxLength={60} style={styles.field}/></Input><p id="kit-hint" className="hint">Use a short, unique name. Maximum 60 characters.</p>{error&&<p id="kit-error" className="error" role="alert">{error}</p>}<Button onPress={add} style={styles.primary}><Button.Text style={styles.primaryText}>Add to kit</Button.Text></Button><Button onPress={()=>{setItems(seed);setName('');setError('');setMessage('Example kit restored.');next.current=4}} style={styles.reset}><Button.Text style={{color:'#737373',fontSize:14}}>Reset example kit</Button.Text></Button></aside></div><p className="scope">Native @gluestack-ui/core 5.0.15 behavior rendered through React Native Web. Original OpenDesign layout and artwork; explicitly styled with documented v5 light color roles. This is a web-only study, not an Expo build or the CLI-generated NativeWind component set.</p></main>}
const styles={primary:{backgroundColor:'#171717',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},secondary:{backgroundColor:'#f5f5f5',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},primaryText:{color:'#fafafa',fontSize:14,fontWeight:600},input:{borderWidth:1,borderColor:'#e5e5e5',borderRadius:8,marginTop:8},field:{padding:12,fontSize:16,color:'#0a0a0a',outlineStyle:'none'},reset:{paddingVertical:16,alignItems:'center'}};
createRoot(document.getElementById('app')).render(<App/>);
```

Kod referansı

### style.css — özgün düzen ve açık tema rolleri

Eksiksiz duyarlı iskelet, görseller, durum çerçeveleri ve tarayıcı odak stili.

```
*{box-sizing:border-box}body{margin:0;background:#fff;color:#0a0a0a;font-family:Arial,sans-serif}main{max-width:1100px;margin:auto;padding:40px}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:700}.intro{max-width:62ch;color:#737373;line-height:1.6}h1{font-size:52px;line-height:1.03;letter-spacing:-.045em;margin:24px 0}h2{font-size:22px;margin:0 0 20px}.layout{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;margin-top:32px}.panel{border:1px solid #e5e5e5;border-radius:14px;padding:24px;min-width:0}.sectionhead{display:flex;gap:12px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}.badge{font-size:12px;background:#f5f5f5;padding:6px 10px;border-radius:20px}.meter{height:6px;border-radius:8px;background:#f5f5f5;margin:6px 0 24px;overflow:hidden}.meter i{display:block;height:100%;background:#171717}ul{list-style:none;padding:0;margin:0}li{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid #e5e5e5}li>div:first-child{min-width:0;flex:1}li strong{display:block;font-size:16px;overflow-wrap:anywhere}li span{display:block;font-size:13px;color:#737373;margin-top:8px}.status{font-size:14px;line-height:1.6;margin-top:24px}.hint,.scope{font-size:12px;line-height:1.6;color:#737373}.scope{margin-top:28px}.error{font-size:14px;color:#e7000b;line-height:1.5}label{font-size:14px}.drawing{height:130px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:24px}.book{display:block;background:#171717;color:#fafafa;border-left:5px solid #737373;width:80px;height:96px;padding:22px 12px;font-size:12px;line-height:1.6;transform:rotate(-8deg)}.pencil{height:90px;width:8px;background:#a3a3a3;transform:rotate(14deg)}[data-focus-visible=true]{outline:3px solid #737373;outline-offset:3px}[data-invalid=true]{border-color:#e7000b!important}input:focus-visible{outline:2px solid #737373!important;outline-offset:3px}@media(max-width:700px){main{padding:20px}h1{font-size:40px}.layout{grid-template-columns:1fr}.panel{padding:20px}li{gap:12px;flex-wrap:wrap}li>div:first-child{flex-basis:120px}}
```

Kod referansı

### build.mjs — eksiksiz web paketleyici yapılandırması

app.jsx barındırıcılarını React Native Web üzerinden içe aktarsa da yerel içe aktarma takma adı gereklidir.

```
import { build } from 'esbuild';
await build({entryPoints:['app.jsx'],bundle:true,minify:true,outfile:'app.js',alias:{'react-native':'react-native-web'},resolveExtensions:['.web.js','.js','.jsx','.ts','.tsx','.json'],loader:{'.js':'jsx'},define:{'process.env.NODE_ENV':'"production"'}});
```

Kod referansı

### index.html — eksiksiz tarayıcı giriş dosyası

Bu dosyayı style.css ve oluşturulan app.js dosyasının yanına koyun.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>gluestack field kit</title><link rel="stylesheet" href="style.css"></head><body><div id="app"></div><script src="app.js"></script></body></html>
```

Kod referansı

## gluestack UI Tasarım Sistemi Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Önce dört eksiksiz dosyayı kaydedin. Bu kurulum, gösterilen tarayıcı alt kümesiyle sınırlıdır; NativeWind, Uniwind, Expo veya oluşturulmuş bir bileşen kayıt defteri başlatmaz.

```
npm init -y
npm install react@19.3.0 react-dom@19.3.0 react-native-web@0.21.3 @gluestack-ui/core@5.0.15 @gluestack-ui/utils@5.0.6 esbuild@0.28.2 --legacy-peer-deps
node build.mjs
python3 -m http.server 8000
# Open http://localhost:8000/
```

### Projeniz İçin Bir İstem

```
createButton/createInput ve React Native Web barındırıcılarını kullanarak gluestack core 5.0.15 alan-kiti tarayıcı örneğinin tamamını uygulayın. Kararlı kimlikleri, denetlenen taslak metnini, boşlukları temizleme ve yinelenenleri doğrulama işlemlerini, odak geri yüklemeyi, türetilmiş paketlenmiş öğe sayısını, yerel sıfırlamayı ve açık v5 açık tema rol eşlemesini koruyun. Özgün düzen tercihlerini kitaplık varsayılanlarından ayrı tutun. Yerel mobil test yapıldığını veya arka uç kalıcılığını iddia etmeyin.
```

## gluestack UI Tasarım Sistemi Kaynakları ve Kapsamı

React Native Web 0.21.3 üzerinden gerçek @gluestack-ui/core 5.0.15 davranışı. Alan-kitinin düzeni, görselleri ve durum modeli özgün OpenDesign çalışmadır. Doğrudan oluşturucu kullanan bu tarayıcı örneği açık stiller kullanır; CLI tarafından oluşturulan NativeWind/Uniwind bileşen kümesi değildir ve iOS ya da Android'de test edilmemiştir.

- Kurulum Oluşturulan bileşenler için standart kurulum yolu.

- v5 anlamsal belirteçleri Güncel açık tema renk rolleri ve özelleştirme.

- Düğme API Düğme anatomisi, etkileşim ve durum öznitelikleri.

- Temel Button fabrikası Yüklenmiş 5.0.15 oluşturucusunun tam uygulaması.

- Temel Input uygulaması Denetlenen alan, geçersiz durum ve erişilebilirlik bağlantıları.

- v5'e yükseltme Sürüm geçişi ve adlandırma değişiklikleri.

## gluestack UI Tasarım Sistemiyle İlgili Kaynaklar

### Headless UI

Headless UI; iletişim kutuları, liste kutuları ve anahtarlar için stilsiz React etkileşim bileşenleri sunar. Bu kılavuz, belge paylaşımı akışını örnek alarak yerel odak, seçim ve açılır pencere davranışlarını sıradan CSS ile bir araya getirmeye odaklanır.

### HeroUI

Gerçek anlamsal CSS değişkenleri, bileşik React kontrolleri, açık ve koyu yüzeyleri ve çalışan bir görsel dışa aktarma tarifiyle HeroUI v3 başvuru kaynağı.

### Ionic Framework

Doğrulanmış renk rolleri, iOS ve Material aralık geometrisi, gerçek segment ve anahtar davranışı ile yazı tipi, boyut ve kâğıt tercihlerine göre değişen bir makale içeren yerel bir Ionic okuma tercihleri arayüzü.


- [Uygulama başvurusu](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Kaynak](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Kaynak](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Kaynak](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [Kod referansı](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Kod referansı](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Kod referansı](https://github.com/gluestack/gluestack-ui)
- [Kurulum Oluşturulan bileşenler için standart kurulum yolu.](https://gluestack.io/ui/docs/home/getting-started/installation)
- [v5 anlamsal belirteçleri Güncel açık tema renk rolleri ve özelleştirme.](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Düğme API Düğme anatomisi, etkileşim ve durum öznitelikleri.](https://gluestack.io/ui/docs/components/button)
- [Temel Button fabrikası Yüklenmiş 5.0.15 oluşturucusunun tam uygulaması.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Temel Input uygulaması Denetlenen alan, geçersiz durum ve erişilebilirlik bağlantıları.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [v5'e yükseltme Sürüm geçişi ve adlandırma değişiklikleri.](https://gluestack.io/ui/docs/guides/more/upgrade-to-v5)