# daisyUI Tasarım Sistemi

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

Emerald, Lo-fi ve Night temaları arasında geçiş yapın, atölye kartını değiştirin ve yerel taslağı inceleyin.

## daisyUI Tasarım Sistemi Tasarım Referansı

Tailwind CSS 4.3.3 ile oluşturulmuş daisyUI 5.7.47. Listelenen renk ve geometri değerleri, pakete eklenen Emerald temasına aittir; Lo-fi ve Night temaları bilerek farklı değerler tanımlar. Sayfa tipografisi ve boşlukları, Tailwind ile uyumlu ölçüler kullanan özgün tercihlerdir.

### Emerald anlamsal renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --color-base-100 | oklch(100% 0 0) | Ana bileşen yüzeyi. |
| --color-base-200 | oklch(93% 0 0) | Bu örnekteki sayfa yüzeyi. |
| --color-base-300 | oklch(86% 0 0) | Yüzey sınırı. |
| --color-base-content | oklch(35.519% 0.032 262.988) | Temel yüzeylerdeki metin. |
| --color-primary | oklch(76.662% 0.135 153.45) | Ana eylem ve davet arka planı. |
| --color-primary-content | oklch(33.387% 0.04 162.24) | Birincil renkle eşleşen metin. |
| --color-secondary | oklch(61.302% 0.202 261.294) | İkincil rol. |
| --color-secondary-content | oklch(100% 0 0) | İkincil renkle eşleştirilen metin. |
| --color-accent | oklch(72.772% 0.149 33.2) | Vurgu rolü. |
| --color-accent-content | oklch(0% 0 0) | Vurgu rengiyle eşleştirilen metin. |
| --color-neutral | oklch(35.519% 0.032 262.988) | Nötr vurgu. |
| --color-neutral-content | oklch(98.462% 0.001 247.838) | Nötr renkle eşleştirilen metin. |
| --color-info | oklch(72.06% 0.191 231.6) | Bilgi rolü. |
| --color-success | oklch(64.8% 0.15 160) | Başarı rolü. |
| --color-warning | oklch(84.71% 0.199 83.87) | Uyarı rolü. |
| --color-error | oklch(71.76% 0.221 22.18) | Hata rolü. |
### Emerald bileşen geometrisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --radius-selector | 1rem | Onay kutusu, aç/kapat denetimi ve benzeri seçicilerin köşe yuvarlaklığı. |
| --radius-field | 0.5rem | Girdi/düğme türündeki alanların köşe yuvarlaklığı. |
| --radius-box | 1rem | Kart/modal kutusu köşe yuvarlaklığı. |
| --size-selector | 0.25rem | Bileşen hesaplamalarında kullanılan seçici temel boyutu. |
| --size-field | 0.25rem | Bileşen hesaplamalarında kullanılan alan temel boyutu. |
| --border | 1px | Bileşen kenarlık genişliği. |
| --depth | 0 | Emerald, derinlik efektlerini devre dışı bırakır. |
| --noise | 0 | Emerald, doku efektlerini devre dışı bırakır. |
### Özgün davet düzeni ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Page spacing | 32px desktop / 24px 16px mobile | Özgün kompozisyon; ayrı bir daisyUI boşluk belirteci sistemi değildir. |
| Main heading | 36px / 1.1; 30px below 700px | Bileşen varsayılanlarının üzerinde özgün hiyerarşi. |
| Invitation title | 34px / 1.15; 30px on mobile | Uzun sözcüklerin satıra bölünmesini sağlayan özgün büyük punto. |
| Supporting copy | 14px / 1.6 | Özgün, okunabilir açıklayıcı metin. |
| Layout breakpoint | 700px | Özgün, yatay düzenden dikey düzene geçiş kırılma noktası; bir daisyUI kırılma noktası belirteci değildir. |
## daisyUI Tasarım Sistemi Eksiksiz Rehber

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

## daisyUI Tasarım Sistemi: Tailwind CSS Üzerinde Anlamsal Bileşen Sınıfları

### Tailwind CSS Üzerinde Anlamsal Bileşen Sınıfları

> daisyUI, Tailwind eklentisi aracılığıyla bileşen sınıfları sağlar. Beşinci sürümde kurulum CSS içinde yer alır: tailwindcss’i içe aktarın, ardından daisyui eklentisini ve etkin temaları tanımlayın. Örnek; bu bileşenlerin görünümünü özel seçicilerle yeniden oluşturmak yerine btn, card, fieldset, range, checkbox, join ve modal sınıflarını kullanır.

Eklenti, uygulamanın durum yönetimini sağlamaz. Yerel girdiler, tarayıcı doğrulaması, iletişim kutusu yöntemleri ve küçük bir JavaScript modülü bu davet stüdyosunu etkileşimli hâle getirir. Kütüphane seçerken bu ayrım önemlidir: bileşen katmanı CSS olduğu için kütüphane çeşitli çerçevelerle kullanılabilir; ancak tek başına bir sınıf adı sunucu işlemini gerçekleştirmez.

Destekleyici belirtimi okuyun

## daisyUI Tasarım Sistemi: Renkli Her Yüzeyi İçerik Rolüyle Eşleştirin

### Renkli Her Yüzeyi İçerik Rolüyle Eşleştirin

Davet kartında bg-primary ve text-primary-content birlikte kullanılır. Rol şeridinde de bu eşleşme secondary, accent ve neutral için tekrarlanır. Bunlar, her bileşene kopyalanması gereken tek ve sabit bir palet değil, birbiriyle uyumlu anlamsal rollerdir. Etkin başka bir tema seçildiğinde kart işaretlemesi değişmeden alttaki değişkenler güncellenir.

Emerald temasında primary açık yeşil, primary-content ise koyu yeşildir. Her primary arka planında otomatik olarak beyaz metin kullanmak, temanın amaçlanan içerik rolünü göz ardı eder. Özellik tablosunda, kurulu Emerald temasındaki gerçek OKLCH değerleri korunmuştur; bunlar tahminî onaltılık marka renklerine dönüştürülmemiştir.

Destekleyici belirtimi okuyun

## daisyUI Tasarım Sistemi: Sunmayı Planladığınız Temaları Derleyin

### Sunmayı Planladığınız Temaları Derleyin

CSS eklentisinin yapılandırması, varsayılan olarak Emerald’ı; ayrıca Lo-fi ve Night temalarını etkinleştirir. Bir seçim denetimi, belge öğesindeki data-theme değerini değiştirir. Menüde yalnızca derlenen temalar sunulur; hiç derlenmemiş bir adın seçilmesi, karşılık gelen CSS temasını kendiliğinden oluşturmaz.

Temalar; yarıçap, alan boyutu, kenarlık ve efekt değişkenlerini de içerir. Bu nedenle Emerald’dan Lo-fi’ye geçiş, renk örneğinden fazlasını değiştirir. Bir temayı gömülü bir bölgeyle sınırlamak için data-theme, html yerine o bölgeye eklenebilir. Bu bağımsız örnekte tema bilerek belgenin tamamına uygulanır.

1. İstenen temaları daisyUI eklenti bloğunda derleyin.

2. Bileşen işaretlemesinde anlamsal arka plan ve içerik sınıflarını kullanın.

3. data-theme değerini değiştirin ve kontrolleri, yüzeyleri ve metinleri birlikte inceleyin.

Destekleyici belirtimi okuyun

## daisyUI Tasarım Sistemi: Seçici, Alan ve Kutu Köşe Yarıçapları Birbirinden Ayrıdır

### Seçici, Alan ve Kutu Köşe Yarıçapları Birbirinden Ayrıdır

Emerald; radius-selector için bir rem, radius-field için yarım rem ve radius-box için bir rem tanımlar. size-selector ve size-field ise bileşen hesaplamalarında kullanılan çeyrek rem temel birimleridir. Bu değerler, sayfa bölümleri arasındaki boşluklarla birbirinin yerine kullanılamaz. Özellikler, bileşen geometrisini özgün çalışma alanı düzeninden ayrı olarak gösterir.

Çevredeki sayfada sistem sans yazı tipi yığını, büyük bir editoryal başlık ve iki sütunlu bir düzen kullanılır. daisyUI bu başlık hiyerarşisini gerektirmez. Orijinal 700px kırılma noktasında sayfa, düzenleyiciyi davetin üzerine alacak şekilde dikey olarak düzenlenir; ekran görüntüsüne sığması için ayarları gizlemek yerine tüm girişleri ve eylemleri korur.

Destekleyici belirtimi okuyun

## daisyUI tasarım sistemi A Gerçek Radyo Girdileriyle Gruplara Katılma

### Birleştirme Bileşeni Gerçek Radyo Girdilerini Gruplar

Biçim seçenekleri, ortak bir name değerini ve join-item ile btn sınıflarını kullanan radyo girdileridir. Studio session veya Online circle seçildiğinde yerel işaretli durumu ve önizleme metni değişir. Kalıcı bir seçim durumu olmayan biçimlendirilmiş düğmelerden oluşan bir sıra, bu karşılıklı dışlayıcı seçimi aynı açıklıkta yansıtmaz.

Seats, dörtten yirmi dörde kadar ikişer artan değerler kullanan yerel bir range girdisidir. Bir output öğesi geçerli sayıyı yansıtır; uç nokta etiketleri ise hedeflenen buluşma büyüklüğünü açıklar. Malzeme denetimi gerçek bir onay kutusudur. Durumu yalnızca onay kutusunun rengini değiştirmekle kalmaz, davet altbilgisini de değiştirir.

Destekleyici belirtimi okuyun

## daisyUI tasarım sistemi CSS Doğrulama Tarayıcı Kısıtlarını Yansıtır

### CSS Doğrulama Tarayıcı Kısıtlarını Yansıtır

Başlık girdisi zorunludur ve minimum ile maksimum uzunluk kısıtlarına sahiptir. validator sınıfı ve validator-hint geçersiz durumu gösterir; yerel kısıtın uygulanmasından yine tarayıcı sorumludur. Form, inceleme düğmesindeki genel bir tıklama işleyicisiyle geçerlilik denetimini atlamaz.

Olağan doğrulama başarıyla tamamlandıktan sonra submit işleyicisi başlığı kırpar ve anlamlı uzunluğunu denetler. Böylece kırpılmamış bir minlength koşulunu karşılayabilen boşluk dizeleri de yakalanır. Düzeltilmiş bir başlığın gönderilebilmesi için bir sonraki input olayında özel geçerlilik iletisi temizlenir. Kullanıcı içeriği HTML olarak eklenmek yerine textContent aracılığıyla görüntülenir.

Destekleyici belirtimi okuyun

## daisyUI tasarım sistemi Gerçek Bir İletişim Kutusunda İnceleme Anlık Görüntüsü

### Gerçek Bir İletişim Kutusunda İnceleme Anlık Görüntüsü

Davetin geçerli başlığı, biçimi, koltuk sayısı ve malzeme bilgileri bir anlık görüntüye kopyalanır, ardından dialog.showModal çağrılır. Modal sınıfı daisyUI biçimlendirmesini sağlarken yerel iletişim kutusu davranışını tarayıcı sağlar. Başlık, iletişim kutusunu aria-labelledby aracılığıyla etiketler; Escape tuşu da incelemeyi kaydetmeden kapatabilir.

Düzenlemeye devam et, iletişim kutusunu kapatır ve formu değiştirmez. Yerel taslağı kaydet, iletişim kutusunu kapatır ve tam anlık görüntüyü bir durum bölgesinde bildirir. İleti, hiçbir davetin gönderilmediğini belirtir. Bu, bilerek e-posta gönderilmiş gibi bir başarı simülasyonu yapmaz: örnekte alıcı listesi veya gönderim hizmeti yoktur.

Destekleyici belirtimi okuyun

## daisyUI tasarım sistemi Sıfırlama ve Düzenleme Gözlemlenebilir Etkiler Yaratır

### Sıfırlama ve Düzenleme Gözlemlenebilir Etkiler Yaratır

Bir alanın değiştirilmesi kartı anında günceller ve daha önce kaydedildiğine ilişkin bildirimi gizler. Böylece eski bir başarı iletisinin, kaydedilmemiş daha yeni bir daveti açıklıyor gibi görünmesi önlenir. Sıfırlama, tarayıcının varsayılan form değerlerini geri yüklemesini bekler ve ardından önizlemeyi bu gerçek değerlerden yeniden oluşturur. Bağımsız olarak seçilmiş temayı değiştirmez.

Üç şekilden oluşan dekoratif görsel, dolgu rengini primary-content değerinden alır; bu nedenle tipografiyle birlikte tema değişikliklerine de tepki verir. Koltuk sayısı veya biçim hakkında bilgi katmadığından aria-hidden olarak işaretlenmiştir. Anlamlı içeriği, görünür önizleme başlığı ve altbilgisi taşır.

- Geçersiz girdi incelemeyi engeller ve başlık alanını belirtir.

- Escape, kayıtlı bir sonuç oluşturmadan incelemeyi kapatır.

- Kaydetme işleminden sonra düzenleme yapmak, geçerli temayı korurken eski sonucu temizler.

Destekleyici belirtimi okuyun

## daisyUI tasarım sistemi Açık Kaynak Keşfiyle Küçük Bir CSS Derlemesi

### Açık Kaynak Keşfiyle Küçük Bir CSS Derlemesi

Sağlanan kurulumda Tailwind CLI, yerel bir input.css dosyası ve yukarıda gösterilen üç kaynak dosyası kullanılır. source(none), geniş kapsamlı otomatik taramayı devre dışı bırakır; açık source yönergesi ise bileşeni ve yardımcı sınıfları içeren HTML konumunu gösterir. Böylece oluşturulan CSS, örneğin gerçek işaretlemesine bağlı olur.

Derleme çıktısı özgün düzen stil sayfasıyla birleştirilir; etkileşimi düz JavaScript yönetir. Bağımsız önizleme, sonucu satır içine alır ve uzaktaki kaynaklara bağımlı değildir. Vite, Astro veya React projesi bunun yerine olağan Tailwind entegrasyonunu kullanabilir; ancak etkin tema listesini korumalı ve sınıf içeren kaynak dosyalarının kapsama alındığından emin olmalıdır.

Destekleyici belirtimi okuyun

## daisyUI tasarım sistemi Bileşen Örnekleri

### Anlamsal HTML bileşen bileşimi

Fieldset’ler, radyo düğmeleriyle katılma, yerel aralık girdisi, onay kutusu, kart ve iletişim kutusu.

```
<main class="workshop"><header class="page-heading"><div><p class="eyebrow">DAISYUI · SEMANTIC THEMES</p><h1>A small gathering,<br>a considered invitation.</h1><p class="muted">Compose a local workshop card and watch the theme roles follow.</p></div><label class="fieldset">Theme<select id="theme" class="select"><option value="emerald">Emerald</option><option value="lofi">Lo-fi</option><option value="night">Night</option></select></label></header><div class="workbench"><form id="invitation" class="card bg-base-100 border border-base-300"><div class="card-body"><h2 class="card-title">Workshop details</h2><fieldset class="fieldset"><legend class="fieldset-legend">Workshop title</legend><input id="title" class="input validator w-full" required minlength="5" maxlength="52" value="Making room for ideas" aria-describedby="title-help"><p id="title-help" class="validator-hint">Use 5–52 characters.</p></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Format</legend><div class="join"><input class="join-item btn" type="radio" name="format" value="Studio session" aria-label="Studio session" checked><input class="join-item btn" type="radio" name="format" value="Online circle" aria-label="Online circle"></div></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Seats <output id="seat-count" for="seats">12</output></legend><input id="seats" class="range range-primary w-full" type="range" min="4" max="24" step="2" value="12" aria-label="Number of seats"><div class="range-labels"><span>4 · intimate</span><span>24 · open room</span></div></fieldset><label class="extras"><input id="materials" class="checkbox checkbox-primary" type="checkbox" checked><span>Include a materials pack<small>Paper, pencils and a small printed prompt.</small></span></label><div class="card-actions"><button class="btn btn-primary" type="submit">Review invitation</button><button class="btn btn-ghost" type="reset">Reset</button></div></div></form><section class="specimen" aria-label="Invitation preview"><div class="invitation-card card bg-primary text-primary-content"><div class="card-body"><div class="card-top"><span class="badge badge-outline">OPEN STUDIO</span><span>LOCAL DRAFT</span></div><div class="shape-art" aria-hidden="true"><i></i><i></i><i></i></div><p class="preview-kicker">A WORKSHOP FOR CURIOUS PEOPLE</p><h2 id="preview-title">Making room for ideas</h2><p id="preview-format">Studio session</p><div class="invite-footer"><strong id="preview-seats">12 seats</strong><span id="preview-materials">Materials included</span></div></div></div><div class="role-strip" aria-label="Theme color roles"><span class="bg-primary text-primary-content">Primary</span><span class="bg-secondary text-secondary-content">Secondary</span><span class="bg-accent text-accent-content">Accent</span><span class="bg-neutral text-neutral-content">Neutral</span></div><p class="muted specimen-note">The same semantic classes use each theme’s background and matching content colors.</p></section></div><div id="result" class="alert alert-success" role="status" hidden></div><dialog id="review" class="modal" aria-labelledby="review-title"><div class="modal-box"><h2 id="review-title">Review your local invitation</h2><p id="review-copy"></p><p class="muted">This prepares a local draft. No invitations are sent.</p><div class="modal-action"><button id="back" class="btn">Keep editing</button><button id="approve" class="btn btn-primary">Save local draft</button></div></div></dialog></main>
```

Kod referansı

- Birincil arka planlarda her zaman birincil içerik metni kullanılır.

- Aralık denetimi; min, max ve step değerlerine sahip yerel bir girdi olarak kalır.

- İletişim kutusu, yalnızca görsel bir open sınıfıyla değil, showModal aracılığıyla açılır.

### Yerel taslak davranışı

Canlı önizleme, sabit inceleme anlık görüntüsü, tema seçimi ve yerel doğrulama.

```
const q=s=>document.querySelector(s),form=q('#invitation'),dialog=q('#review');let snapshot;
function update(){const title=q('#title').value.trim(),seats=q('#seats').value,format=q('[name="format"]:checked').value,materials=q('#materials').checked;q('#preview-title').textContent=title||'Your workshop title';q('#seat-count').value=seats;q('#preview-seats').textContent=`${seats} seats`;q('#preview-format').textContent=format;q('#preview-materials').textContent=materials?'Materials included':'Bring your own materials';q('#result').hidden=true;}
q('#theme').addEventListener('change',e=>document.documentElement.dataset.theme=e.target.value);form.addEventListener('input',update);form.addEventListener('reset',()=>setTimeout(update,0));form.addEventListener('submit',e=>{e.preventDefault();snapshot={title:q('#title').value.trim(),seats:q('#seats').value,format:q('[name="format"]:checked').value,materials:q('#materials').checked};if(snapshot.title.length<5){q('#title').setCustomValidity('Enter at least five non-space characters.');q('#title').reportValidity();return;}q('#review-copy').textContent=`${snapshot.title} · ${snapshot.format} · ${snapshot.seats} seats · ${snapshot.materials?'Materials included':'Bring your own materials'}`;dialog.showModal();});q('#title').addEventListener('input',()=>q('#title').setCustomValidity(''));q('#back').onclick=()=>dialog.close();q('#approve').onclick=()=>{dialog.close();q('#result').hidden=false;q('#result').textContent=`Local draft saved: ${snapshot.title}, ${snapshot.seats} seats. No invitations were sent.`;};update();
```

Kod referansı

- daisyUI JavaScript çalışma zamanı içe aktarılmaz.

- Tüm kullanıcı dizeleri textContent ile atanır.

- Kaydetme işlemi yalnızca bellekte yerel bir sonuç oluşturur.

### Özgün düzen stil sayfası

Yerel CSS bileşenleri çevresinde duyarlı düzen ve dekoratif geometri.

```
body{margin:0;background:var(--color-base-200);color:var(--color-base-content);font-family:ui-sans-serif,system-ui,sans-serif}.workshop{max-width:1100px;margin:auto;padding:32px}.page-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:32px}.eyebrow,.preview-kicker{font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:36px;line-height:1.1;margin:14px 0}h2{font-size:20px;font-weight:650}.muted{opacity:.7;font-size:14px;line-height:1.6}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:28px}.fieldset{margin:8px 0;min-width:0}.card-body{gap:12px}.fieldset-legend{gap:8px}.range-labels{display:flex;justify-content:space-between;font-size:11px;opacity:.7}.extras{display:flex;gap:12px;font-size:14px;margin:16px 0}.extras small{display:block;opacity:.65;margin-top:4px}.card-actions{margin-top:12px}.card-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.1em}.shape-art{height:135px;position:relative;display:flex;justify-content:center;align-items:center;margin:16px 0}.shape-art i{width:95px;height:95px;background:var(--color-primary-content);opacity:.8;border-radius:50%;margin-right:-20px}.shape-art i:nth-child(2){border-radius:0;transform:rotate(45deg);opacity:.3}.shape-art i:nth-child(3){border-radius:50% 50% 0 0;opacity:.55}.invitation-card h2{font-size:34px;line-height:1.15;margin:4px 0;overflow-wrap:anywhere}.invite-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid currentColor;padding-top:20px;margin-top:20px;font-size:12px}.role-strip{display:flex;gap:8px;margin-top:16px}.role-strip span{padding:8px;font-size:10px;border-radius:4px;flex:1;text-align:center}.specimen-note{margin-top:12px}.alert{margin-top:24px}.alert[hidden]{display:none}.modal-box p{margin:16px 0}.join{display:flex}.join .btn{flex:1;font-size:12px;padding-inline:12px}@media(max-width:700px){.workshop{padding:24px 16px}.page-heading{flex-direction:column;gap:8px}.page-heading .fieldset{width:100%}h1{font-size:30px}.workbench{grid-template-columns:1fr}.card-body{padding:20px}.invitation-card h2{font-size:30px}}
```

Kod referansı

- Sayfa düzeni ve başlık ölçeği, uygulamaya özgü kararlardır.

### Eksiksiz index.html belgesi

Yukarıda sağlanan stil sayfası derlemesi ve eksiksiz etkileşim kaynağıyla birlikte kullanın.

```
<!doctype html>
<html lang="en" data-theme="emerald"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>daisyUI specimen</title><link rel="stylesheet" href="output.css"><link rel="stylesheet" href="style.css"></head><body>
<main class="workshop"><header class="page-heading"><div><p class="eyebrow">DAISYUI · SEMANTIC THEMES</p><h1>A small gathering,<br>a considered invitation.</h1><p class="muted">Compose a local workshop card and watch the theme roles follow.</p></div><label class="fieldset">Theme<select id="theme" class="select"><option value="emerald">Emerald</option><option value="lofi">Lo-fi</option><option value="night">Night</option></select></label></header><div class="workbench"><form id="invitation" class="card bg-base-100 border border-base-300"><div class="card-body"><h2 class="card-title">Workshop details</h2><fieldset class="fieldset"><legend class="fieldset-legend">Workshop title</legend><input id="title" class="input validator w-full" required minlength="5" maxlength="52" value="Making room for ideas" aria-describedby="title-help"><p id="title-help" class="validator-hint">Use 5–52 characters.</p></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Format</legend><div class="join"><input class="join-item btn" type="radio" name="format" value="Studio session" aria-label="Studio session" checked><input class="join-item btn" type="radio" name="format" value="Online circle" aria-label="Online circle"></div></fieldset><fieldset class="fieldset"><legend class="fieldset-legend">Seats <output id="seat-count" for="seats">12</output></legend><input id="seats" class="range range-primary w-full" type="range" min="4" max="24" step="2" value="12" aria-label="Number of seats"><div class="range-labels"><span>4 · intimate</span><span>24 · open room</span></div></fieldset><label class="extras"><input id="materials" class="checkbox checkbox-primary" type="checkbox" checked><span>Include a materials pack<small>Paper, pencils and a small printed prompt.</small></span></label><div class="card-actions"><button class="btn btn-primary" type="submit">Review invitation</button><button class="btn btn-ghost" type="reset">Reset</button></div></div></form><section class="specimen" aria-label="Invitation preview"><div class="invitation-card card bg-primary text-primary-content"><div class="card-body"><div class="card-top"><span class="badge badge-outline">OPEN STUDIO</span><span>LOCAL DRAFT</span></div><div class="shape-art" aria-hidden="true"><i></i><i></i><i></i></div><p class="preview-kicker">A WORKSHOP FOR CURIOUS PEOPLE</p><h2 id="preview-title">Making room for ideas</h2><p id="preview-format">Studio session</p><div class="invite-footer"><strong id="preview-seats">12 seats</strong><span id="preview-materials">Materials included</span></div></div></div><div class="role-strip" aria-label="Theme color roles"><span class="bg-primary text-primary-content">Primary</span><span class="bg-secondary text-secondary-content">Secondary</span><span class="bg-accent text-accent-content">Accent</span><span class="bg-neutral text-neutral-content">Neutral</span></div><p class="muted specimen-note">The same semantic classes use each theme’s background and matching content colors.</p></section></div><div id="result" class="alert alert-success" role="status" hidden></div><dialog id="review" class="modal" aria-labelledby="review-title"><div class="modal-box"><h2 id="review-title">Review your local invitation</h2><p id="review-copy"></p><p class="muted">This prepares a local draft. No invitations are sent.</p><div class="modal-action"><button id="back" class="btn">Keep editing</button><button id="approve" class="btn btn-primary">Save local draft</button></div></div></dialog></main>

<script src="app.js" defer></script></body></html>
```

Kod referansı

- Sağlanan etkileşim kodunu app.js olarak kaydedin.

- Görünüm alanı ve yerel varlık yüklemesi dahildir.

## daisyUI tasarım sistemi Agent Kurulumu

### Uygulamaya Başlangıç Noktası

daisyUI 5.7.47 ve Tailwind CSS 4.3.3 ile doğrulanmıştır. Kart görseli ve sayfa düzeni özgündür; bileşen CSS ve Emerald tema değerleri yerel olarak sunulur.

```
/* npm install -D tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 daisyui@5.7.47 */
/* Save the HTML example as body.html in the same directory as input.css. */
/* input.css */
@import "tailwindcss" source(none);
@source "./body.html";
@plugin "daisyui" {
  themes: emerald --default, lofi, night;
}
/* Build: npx @tailwindcss/cli -i ./input.css -o ./output.css --minify */
/* In index.html, link output.css then style.css; include body.html markup. */
/* Load the supplied app.js with <script src="app.js" defer></script>. */
/* Set <html lang="en" data-theme="emerald"> and a viewport meta tag. */
```

### Projeniz İçin Bir İstem

```
Davet stüdyosunu yeniden oluşturmak için daisyUI 5.7.47 sürümünü sağlanan Tailwind 4 derlemesiyle ve Emerald, Lo-fi ile Night temalarıyla kullanın. Anlamsal arayüz yüzeyi renklerini karşılık gelen içerik rolleriyle eşleştirin. Birbirine bağlı yerel radyo girdilerini, çift adımlı koltuk aralığını, malzeme onay kutusunu ve başlık doğrulamasını koruyun. İnceleme, geçerli daveti yerel bir iletişim kutusunda yakalar; Yerel taslağı kaydet bu anlık görüntüyü onaylar, sonraki düzenlemeler ise iletiyi temizler. Formu seçili temadan bağımsız olarak sıfırlayın ve davetlerin gönderildiğini iddia etmeyin.
```

## daisyUI tasarım sistemi Kaynakları ve Kapsamı

daisyUI 5.7.47 ve Tailwind CSS 4.3.3. Emerald değerleri temaya özeldir. Yerel taslak verileri kalıcı olarak saklamaz ve davet göndermez.

- Kurulum CSS eklenti kurulumu.

- Temalar Tema yapılandırması ve anlamsal değişkenler.

- Renkler Arka plan/içerik rolü eşleştirmesi.

- Aralık Yerel aralık bileşeni sınıfları.

- Doğrulayıcı Tarayıcı geçerlilik durumu stilleri.

- Modal Yerel iletişim kutusu bileşimi.

- Düzen ve tipografi Uygulama düzeni ve tipografi sınırı.

## daisyUI tasarım sistemi İlgili Kaynaklar

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

### Flowbite

Doğrulanmış anlamsal tema takma adları, kalıcı bir paketleme kontrol listesi ve erişilebilir, yerel bir malzeme notu iş akışı içeren yerel bir Flowbite 4 akordeon ve çekmece düzeni.

### Fomantic UI

Doğrulanmış derlenmiş tema değerleri, jQuery açılır menü ve puanlama modülleri, açık klavye desteği ve kalıcı yerel kısa liste içeren yerel bir Fomantic UI okuma rafı.


- [Uygulama başvurusu](https://daisyui.com/docs/themes/)
- [Kaynak](https://daisyui.com/docs/themes/)
- [Kaynak](https://daisyui.com/docs/layout-and-typography/)
- [Destekleyici belirtimi okuyun](https://daisyui.com/docs/install/)
- [Destekleyici belirtimi okuyun](https://daisyui.com/docs/colors/)
- [Destekleyici belirtimi okuyun](https://daisyui.com/docs/themes/)
- [Destekleyici belirtimi okuyun](https://daisyui.com/docs/layout-and-typography/)
- [Destekleyici belirtimi okuyun](https://daisyui.com/components/join/)
- [Destekleyici belirtimi okuyun](https://daisyui.com/components/validator/)
- [Destekleyici belirtimi okuyun](https://daisyui.com/components/modal/)
- [Destekleyici belirtimi okuyun](https://daisyui.com/components/card/)
- [Kod referansı](https://daisyui.com/components/fieldset/)
- [Kod referansı](https://daisyui.com/components/modal/)
- [Kod referansı](https://daisyui.com/docs/layout-and-typography/)
- [Kod referansı](https://daisyui.com/)
- [Kurulum CSS eklenti kurulumu.](https://daisyui.com/docs/install/)
- [Temalar Tema yapılandırması ve anlamsal değişkenler.](https://daisyui.com/docs/themes/)
- [Renkler Arka plan/içerik rolü eşleştirmesi.](https://daisyui.com/docs/colors/)
- [Aralık Yerel aralık bileşeni sınıfları.](https://daisyui.com/components/range/)
- [Doğrulayıcı Tarayıcı geçerlilik durumu stilleri.](https://daisyui.com/components/validator/)
- [Modal Yerel iletişim kutusu bileşimi.](https://daisyui.com/components/modal/)
- [Düzen ve tipografi Uygulama düzeni ve tipografi sınırı.](https://daisyui.com/docs/layout-and-typography/)