Merhaba dostlar,
Son zamanlarda ShadCN/ui kütüphanesini kullanmaya başladım ve bu modern UI bileşenleri kütüphanesinin sunduğu kolaylıkları sizlerle paylaşmak istiyorum.
ShadCN/ui, özellikle React tabanlı projeler için geliştirilmiş bir UI bileşeni kütüphanesi olup, tasarımları hızlıca oluşturmamızı sağlıyor.
Hem tasarım hem de kullanım açısından oldukça verimli.
Ancak, burada bahsedeceğim kullanım, tamamen JavaScript odaklı olacak. React ile entegre bir şekilde çalışabilen bu kütüphane, özellikle JavaScript geliştiricileri için büyük kolaylık sağlıyor. Şayet TypeScript kullanıyorsanız, bu kütüphane ile sorunsuz bir entegrasyon elde edebilirsiniz.
ShadCN/ui'nin JavaScript ile kullanımını daha verimli ve hızlı hale getiren özellikler, projelerinizde şık ve duyarlı tasarımlar oluşturmanıza olanak tanıyacak. Örneğin, butonlar, modallar, formlar gibi temel UI bileşenlerini birkaç satır kodla projelerinizde kullanabilirsiniz.
Daha hızlı anlamanız için bir örnek vereyim:
Diyelim ki siz bir buton yazmak istiyorsunuz ve bu şık dursun diye 20-30-40 satır CSS kodu yazıyorsunuz, örnek olarak
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
font-weight: 600;
border-radius: 4px;
font-size: 13px;
height: 30px;
background-color: #0000000d;
color: #0e0e10;
padding: 0 10px;
:hover {
background-color: #0000001a;
}
Fakat ShadCN/ui ile birlikte bu artık çok kolay
Ufak bir kod veee;
import { Button } from "@/components/ui/button" export function ButtonDemo() { return <Button>Button</Button>}
Sonuç:
Gördüğünüz gibi, sadece bir satırda şık ve işlevsel bir buton oluşturabiliyoruz. ShadCN/ui ile, tüm UI bileşenlerini kolayca kullanabilir, zaman kaybetmeden projelerinizde şıklık ve fonksiyonellik sağlayabilirsiniz.
İyi Forumlar Dilerim <3
