İçeriğe atla
devcards.space
Frontend

daisyUI Nedir? Tailwind CSS ile Hızlı Component Sistemi

daisyUI ile Tailwind utility class'larının üzerine hazır bileşen ve tema sistemi ekleyin. Kurulum, Vite plugin yapılandırması ve örnek bileşenlerin pratik rehberi.

5 dakika okuma
daisyUI infografiği: Tailwind CSS üzerine kurulu component plugin, kurulum ve tema sistemini gösteren 12 bölümlü genel bakış

daisyUI, Tailwind CSS'in üzerine kurulu, hazır bileşen sınıfları ve tema sistemi sunan resmi bir plugin'dir. Tailwind utility'lerinin esnekliğini koruyarak buton, kart, modal gibi yaygın bileşenler için kısa ve okunabilir class'lar verir; üstelik onlarca temayı tek satırla aktif edersiniz. Bu rehberde infografikteki bölümleri açarak React + Vite üzerinde nasıl kurulup kullanılacağını gösteriyoruz.

daisyUI Nedir?

Tailwind CSS plugin'i olarak çalışan ve hazır bileşen class'ları sağlayan bir kütüphanedir. btn, card, modal, alert gibi semantik class'lar Tailwind utility'leriyle birleştiğinde sıfırdan tasarım sistemi kurma derdi ortadan kalkar.

  • Tailwind tabanlı component plugin
  • Önceden tanımlı bileşenler
  • Tailwind ile birlikte çalışır, yerine geçmez
  • React, Vue, HTML — framework agnostic

Neden daisyUI Kullanmalı?

Tailwind sıfırdan her şeyi yazmanızı gerektirir; bu küçük projelerde verimli olsa da büyük ekiplerde tekrar eden class kombinasyonları yorucu hale gelir. daisyUI bu tekrarı semantik class'larla soğurur.

  • Tailwind'i daha hızlı yapar
  • Built-in tema desteği (light/dark + 30+ tema)
  • Tailwind utility'lerine tam uyumlu
  • Karanlık mod hazır gelir
  • Daha az custom CSS yazmanız gerekir

Kurulum: React + Vite

Bir React + Vite projesi başlatmak için resmi Vite şablonu yeterli. daisyUI'yi sonradan ekleyeceğiz.

bash
npm create vite@latest my-app -- --template react
cd my-app
npm install

Tailwind + daisyUI Kurulumu

Tailwind CSS'i kurup daisyUI'yi plugin olarak ekleyin.

bash
npm install -D tailwindcss @tailwindcss/vite daisyui@latest

Vite Plugin Yapılandırması

Vite config içinde Tailwind plugin'ini ekleyin; daisyUI Tailwind tarafından otomatik tüketilecek.

vite.config.ts
ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

CSS'e daisyUI'yi Ekleme

Tailwind v4 syntax'ı ile @plugin yönergesi kullanarak daisyUI'yi etkinleştirin. Bu satır temaları ve component class'larını otomatik dahil eder.

src/index.css
css
@import "tailwindcss";
@plugin "daisyui";

Örnek Bileşen: Button

btn class'ı temel buton stilini, btn-primary varyant rengini, btn-outline kontur stilini sağlar. Birleştirerek istediğiniz çeşitliliği elde edersiniz.

tsx
<button className="btn btn-primary">
  Click me
</button>

<button className="btn btn-outline btn-secondary">
  Outline
</button>

Liste Bileşeni

menu class'ı navigation menüleri için optimize edilmiş bir liste sunar. base class ile çevreleyip içine li/a ekleyerek dakikalar içinde yan menü oluşturabilirsiniz.

tsx
<ul className="menu bg-base-200 rounded-box w-56">
  <li><a>Dashboard</a></li>
  <li><a>Projects</a></li>
  <li><a>Tasks</a></li>
  <li><a>Settings</a></li>
</ul>

Temel Özellikler

daisyUI'nin paketle birlikte gelen güçleri:

  • Semantik class isimleri (btn, card, modal)
  • 30+ hazır tema (cupcake, dracula, forest, …)
  • Tailwind utility'lerle tam uyum
  • Karanlık mod hazır
  • Component varyantları ve boyutları

Temalar

Bir tema değiştirmek için CSS plugin satırına theme listesi vermek yeterli. data-theme attribute'u ile çalışma anında geçiş de mümkün.

html
<html data-theme="dracula">
  <body>...</body>
</html>

Kullanım Alanları

daisyUI'nin parladığı senaryolar:

  • Admin paneli ve dashboard'lar
  • MVP ve hızlı prototipler
  • İç araçlar ve B2B uygulamalar
  • SaaS ürünlerinin marketing/onboarding sayfaları

Özet

daisyUI; Tailwind CSS deneyimini hızlandırır, daha az kod yazmanızı sağlar ve tutarlı bir tasarım sistemi kurmanıza yardım eder. Tailwind'in özgürlüğünü kaybetmeden bileşen ergonomisi kazandırır — özellikle hızlı geliştirme ve MVP'ler için ideal.

Sıkça Sorulan Sorular

Bu konuda en çok merak edilenler.

daisyUI Tailwind'in yerine geçer mi?

Hayır, Tailwind plugin'idir; üzerine eklenir. Hâlâ tüm Tailwind utility'lerini kullanabilirsiniz. daisyUI sadece sık kullanılan class kombinasyonlarına semantik isim verir.

shadcn/ui ile farkı nedir?

shadcn/ui Radix tabanlı, projeye kopyalanan headless componentlerdir. daisyUI ise saf CSS class kütüphanesidir. shadcn daha esnek/erişilebilir, daisyUI daha hızlı kurulur ve framework bağımsızdır.

Tema sayısı ne kadar?

Resmi temalar 30'dan fazla. Kendi temanızı `themes` config'inde tanımlayabilir veya CSS değişkenlerini override edebilirsiniz. Light/dark otomatik olarak prefers-color-scheme'e bağlanabilir.

Bundle boyutu büyür mü?

Tailwind purge (content) doğru yapılandırıldığında sadece kullandığınız class'lar bundle'a girer. daisyUI'nin genel etkisi az; tema CSS değişkenleri minimal yer kaplar.

React Native ile çalışır mı?

Hayır — daisyUI saf CSS olduğundan React Native'de doğrudan çalışmaz. RN için NativeWind, Tamagui veya Restyle gibi alternatifler vardır.

İlgili İçerikler

Bu konuyla bağlantılı diğer infografikler.

Daha fazla developer infografiği keşfedin

Yeni içerikleri kaçırmamak için ana sayfayı ziyaret edin.

Tüm infografikleri gör