İçeriğe geç

React Bilesen ve Css Kutuphaneleri

React ile birlikte çeşitli CSS ve Bileşen (component) kütüphaneleri kullanmak mümkündür. Bu kütüphaneler ile uygulamanızı daha hızlı hazırlayabilirsiniz.

Asagida en cok kullanilan Bilesen (Component) ve CSS kutuphanelerini bulabilirsiniz.

Bileşen & CSS Kütüphaneleri

Bileşenler (Components) react projelerinde en önemli kısmını oluştururlar. React’da hemen hemen her bir icerik bir bileşen ile hazırlanır. Tüm bu bileşenleri kendimiz yazabilir veya hazır kütüphaneler kullanarak projemizi daha hızlı bitirebiliriz.

CSS kütüphaneleri (Tailwind, Bootstrap vb.) ise kendi Css’lerimizi yazmak yerine hazır css’leri kullanmak icin yaratılmışlardır.

Bilesen ve CSS kutuphanerini karıstırmamak gerekö adı üzerinde biri size hazır bileşenler verirken diğeri hazır CSS ler verir. Diger taraftan asagidaki bazi kütüphaneler bileşenler ile birlikte kendi CSS kütüphanelerini kullanırlar veya 3.taraf CSS kütüphanelerini (Tailwind, Bootstrap gibi) eklemenize ve birlikte çalısmasına izin verirler.

Shadcn UI

Gunumuzde populerligi hizla artmaktadir. Hemen hemen tum ihtiyac duyacaginiz bilesenleri barindirir.

https://ui.shadcn.com/

Radix UI

Cok kullanilan bir diger bilesen kutuphanesi.

https://www.radix-ui.com/

Asagida Radix ile yaptigim bir calisma mevcut: https://github.com/ozayo/Chas-Radix-Dashboard

Next UI

Henuz kullanmadim ancak listemde.

https://nextui.org/

Chakra UI

Chakra UI bir baska populer kutuphane.

https://chakra-ui.com/

Tailwind UI

Tailwind bir cok projede vazgecilmez bir CSS kutuphanesi oldu. Eger projenizde Tailwind kullaniyorsaniz bilesen kutuphanesi icin de Tailwind UI kullanabilirsiniz.

https://tailwindui.com/

Tailwind CSS

Tailwind cok populer bir CSS kutuphanesidir. Bir cok JS framework’u ile birlikte kullanilabilir. Ancak Tailwind CSS bir css kutuphanesidir, dolayisiyla yukaridaki bilesen kutuphaneleri ile karistirilmamasi gerek.

https://tailwindcss.com/

React Npm Paketleri

Çeşitli amaçlar için geliştirilmiş ve React ile kullanabileceğiniz bazi npm paketleri listesi:

React awesome listeleri

Kaynaklar