CSS'ten Shadcn'e anlamlı bir yolculuk: 🗺️ Bir button macerası! JSX'e Shadcn kurulumu nasıl? ✨

Selam millet! Bu videoda, hepimizin kullandığı o basit ama hayati bileşenlerden biri olan button'ı ele alıyoruz. Ama sıradan bir "button yapımı" videosu değil bu! Önce vanilla CSS ile temelleri atacağız, sonra Tailwind CSS ile işleri nasıl hızlandırabileceğimize bakacağız. Ve finalde, beklenen an geliyor: shadcn/ui ile tanışıp, bu güzelliği JSX projemize nasıl kuracağımızı adım adım göstereceğim.
Bu arada, sadece düğme yapmakla kalmayacağız. Component Variant Authority (CVA) denen ilginç bir aracı da inceleyeceğiz ve design system'inizi planlarken nelere dikkat etmeniz gerektiği konusunda ipuçları vereceğim. Hem sadece CSS ile bir tasarım sistemi kurmanın temellerine değineceğiz, hem de shadcn ile bu süreci nasıl daha verimli hale getirebileceğimize bakacağız.
Bu videoda neler bulacaksınız:
🧱 Sadece CSS kullanarak temel bir button component oluşturma
💨 Tailwind CSS ile button stillerini daha hızlı ve kolay yönetme
✨ Component Variant Authority (CVA) nedir ve nasıl kullanılır?
🗺️ Kendi design system'inizi planlamanın püf noktaları (hem CSS hem de shadcn ile)
🚀 EN ÖNEMLİSİ: shadcn/ui'ı bir JSX projesine kurmanın adım adım rehberi! (React, Next.js vb.)
Kodlar: 🖥️
CSS Son Hali: github.com/gok...
Tailwind Son Hali: github.com/gok...
shadcn Son Hali: github.com/gok...
Eğer siz de projelerinizi bir sonraki seviyeye taşımak, daha organize ve tutarlı arayüzler geliştirmek istiyorsanız, bu video tam size göre! Videoyu beğenmeyi, kanala abone olmayı ve yorumlarda düşüncelerinizi paylaşmayı unutmayın! İyi seyirler!
#css #tailwindcss #shadcn #shadcnui #react #nextjs #javascript #frontend #webdevelopment #designsystem #cva #componentvariants #tutorial #turkce

[@dodokod]

Kısa hali gelsin mi? Sadece kurulum? :)

[@dodokod]

Linkler:
- Shadcn/UI Renk teması oluşturan site: oxidus.vercel.app