Kurulum
Bloxa bileşenleri paket olarak değil, kaynak kod olarak projene eklenir. shadcn CLI ile kurulur, kod senin reponda kalır.
1. Projeni hazırla
Tailwind CSS v4 kullanan bir Next.js ya da React projesinde shadcn'i başlat:
npx shadcn@latest init2. Bloxa registry'sini ekle
components.json dosyasına Bloxa'yı ekle:
{
"registries": {
"@bloxa": "https://bloxa.dev/r/{name}.json"
}
}3. Bileşen ekle
Tema, yardımcı fonksiyonlar ve bağımlılıklar bileşenle birlikte otomatik kurulur.
npx shadcn@latest add @bloxa/buttonBloxa CLI
npx @bloxa/cli registry ayarını senin yerine yapar ve bileşenleri adıyla ekler.
npx @bloxa/cli init
npx @bloxa/cli add button select date-picker
npx @bloxa/cli listYa da npm'den import et
Kod kopyalamak yerine paket mi tercih edersin? @bloxa/react'i kur, temayı ekle ve bileşenleri doğrudan import et. Yalnız Free bileşenler.
npm install @bloxa/react@import "tailwindcss";
@import "@bloxa/react/theme.css";
@source "../node_modules/@bloxa/react/dist";import { BloxaProvider, Button, DatePicker } from "@bloxa/react";
export default function Page() {
return (
<BloxaProvider locale="tr-TR">
<Button>Başla</Button>
<DatePicker clearable />
</BloxaProvider>
);
}Bileşenler
Grid
Bootstrap mantığında Container, Row ve Col: 12 sütunlu duyarlı grid, boşluklar, kaydırma ve sıralama.
Button
Varyantlar, boyutlar, baş/son ikon, yükleniyor durumu ve ButtonGroup içeren buton. asChild destekler.
Toggle Group
Kayan vurgulu segment kontrolü, ayrıca çerçeveli ve sade araç çubuğu; tekli veya çoklu seçim.
Dropdown Menu
İkon, kısayol, seçilebilir öğe, etiket, ayraç ve alt menü destekli açılır menü.
Context Menu
Sağ tık / uzun basmayla açılan; alt menülü, onay kutulu ve kısayollu menü.
Field
Erişilebilir form alanları için Label, Field, FieldDescription ve FieldError.
Input
Baş/son ikon, temizle düğmesi, şifre göster/gizle, karakter sayacı ve boyut seçenekleri olan metin alanı.
Input Group
İki yanına metin ya da düğme eki alan input; kenarlar ve köşeler birleşir.
Textarea
İçeriğe göre uzayabilen, isteğe bağlı karakter sayaçlı çok satırlı metin alanı.
Checkbox
Animasyonlu tik, yarı seçili durum ve etiketli, açıklamalı, kart görünümlü CheckboxField.
Radio Group
Animasyonlu seçim ve etiketli, açıklamalı, kart görünümlü RadioField içeren radyo grubu.
Switch
İki boyutlu, tutamacın içine ikon konabilen açma/kapama anahtarı.
Select
İkonlu, açıklamalı, gruplu, aramalı ve silinebilir chip'li çoklu seçim destekli seçim listesi.
Combobox
Filtreleyen, eşleşeni vurgulayan, klavyeyle seçilen, yeni değer oluşturabilen ve async yüklemeli otomatik tamamlama alanı.
Color Picker
Doygunluk alanı, ton çubuğu, hex alanı, hazır renkler ve ekrandan renk seçen damlalık.
Rating
Yarım yıldızlı, üzerine gelince önizlemeli, etiketli, klavyeyle ve salt okunur kullanılabilen puanlama.
Slider
Tek değer veya aralık, değer balonu, adımlar ve etiketli işaretler içeren kaydırıcı.
Number Input
+/− düğmeli, min/max, adım, birim, basılı tutunca hızlanan ve klavyeyle artırılabilen sayı alanı.
OTP Input
Kutucuklu, gruplanabilen, gizlenebilen, yapıştırma ve SMS otomatik doldurma destekli tek kullanımlık kod alanı.
Tag Input
Yazıp Enter'a basarak etiket ekleme; ayraçlar, yapıştırma, doğrulama, öneriler ve en fazla sayı.
File Upload
Tür ve boyut doğrulamalı, görsel önizlemeli, dosya listeli ve ilerleme çubuklu sürükle-bırak alanı.
Calendar
Bağımlılıksız takvim: tek tarih ve aralık seçimi, dile göre ay/gün adları, min/max, kapalı günler ve klavyeyle gezinme.
Date Picker
Calendar ve Popover üzerine kurulu, Intl ile yerelleştirilmiş tarih ve tarih aralığı seçici.
Tabs
Hap ve alt çizgi stilli sekmeler.
Nav Menu
İkonlu, rozetli, iç içe açılır gruplu ve aktif sayfada kayan vurgu gösteren dikey menü.
Sidebar
Masaüstünde ikon şeridine daralan (⌘B), mobilde soldan açılan çekmeceye dönüşen uygulama kenar çubuğu.
Breadcrumb
Ortası menüye daralan, ikonlu, ayraç seçenekli ve arama motorları için yapılandırılmış veri üreten konum yolu.
Pagination
Üç noktalı, kayan aktif sayfa göstergeli, ilk/son düğmeli, kompakt modlu ve SEO uyumlu bağlantılı sayfalama.
Stepper
Yatay veya dikey çok adımlı ilerleme; dolan bağlantılar, hata ve isteğe bağlı adımlar.
Popover
Bir tetikleyiciye bağlı, yumuşak büyüyerek açılan yüzen panel.
Tooltip
Üzerine gelince ve odaklanınca çıkan kısa etiket; kısayol tuşları, ok ve paylaşılan gecikme.
Dialog
Boyut seçenekli, arkası bulanık, büyüyerek açılıp küçülerek kapanan ve odağı içinde tutan modal pencere.
Alert Dialog
Yanıtlanması gereken onay penceresi; silme ve uyarı tonları, dışına tıklayınca kapanmaz.
Drawer
Dört kenardan yaylı hareketle kayarak açılan, sürükleyerek kapatılabilen panel.
Alert
Bilgi, başarı, uyarı ve hata için sayfa içi mesaj; aksiyonlu ve kapatılabilir.
Toast
toast() ile her yerden bildirim: türler, aksiyon, promise, üzerine gelince duraklama ve kaydırarak kapatma.
Command
Arama, gruplar, kısayollar ve klavyeyle gezinmeli komut paleti; ⌘K ile açılır.
Table
Çizgili, hover, kenarlıklı, sıkı, sabit başlıklı ve mobilde karta dönüşen duyarlı tablo.
Data Table
Arama, sütun filtresi, sıralama, sayfalama, satır seçimi ve sütun gizleme özellikli tablo.
Badge
Durum ve etiketler için küçük hap biçimli etiket.
Avatar
Renkli baş harf yedeği, boyutlar, durum noktası ve +N gösteren AvatarGroup.
Kbd
Klavye tuşları ve kısayollar; mod tuşu platforma göre ⌘ ya da Ctrl olur.
Timeline
İkonlu, tonlu, zamanlı ve kaydırınca belirerek gelen etkinlik akışı.
Tree View
Açılır klasörlü, seçimli, kılavuz çizgili ve tam klavye destekli dosya ağacı.
Carousel
Kaydırma kilitli slayt: dokunmatik kaydırma, fareyle sürükleme, oklar, noktalar, otomatik oynatma ve döngü. Ek kütüphane yok.
Image
Yüklenirken yer tutucu, yumuşak belirme, hata durumunda yedek görünüm, en-boy oranı, alt yazı ve üzerine gelince yakınlaşma.
Hover Card
Üzerine gelince ya da odaklanınca açılan zengin önizleme kartı; gecikmeli açılır, isteğe bağlı oklu.
Line Chart
Yumuşak ya da düz çizgiler; üzerine gelince tooltip, noktalar ve açılıp kapanan seriler.
Area Chart
Geçişli, düz ya da dolgusuz alan; yığılabilir.
Bar Chart
Büyüyerek gelen gruplu ya da yığılmış çubuklar; üzerine gelinen sütun vurgulanır.
Combo Chart
Çubuklar ve sağ eksende çizgiler: Pareto, hacim ve oran, gerçekleşen ve hedef.
Scatter Chart
İki sayısal eksende noktalar; balon boyutu ve renkli gruplar.
Donut Chart
Animasyonlu dilimli halka ya da pasta; üzerine gelinen dilim ortada.
Radar Chart
Birden çok ölçüyü aynı anda karşılaştırır; her seri bir çokgen.
Funnel Chart
Kullanıcılar azaldıkça daralan aşamalar ve adım adım dönüşüm oranı.
Gauge
Renkli aralıklı, isteğe bağlı ibreli yarım daire KPI göstergesi.
Heatmap
Takvim ısı haritası (katkı grafiği); ay ve gün adları yerelleştirilmiş.
Spark Chart
Tablo ve kartlar için küçük çizgi, alan ya da çubuk trendi.
Bar List
Ad, ikon ve değerli sıralı yatay çubuklar.
Tracker
Çalışma süresi ve günlük kontroller için durum blokları.
Stat
Sayarak artan değer, renkli değişim yüzdesi ve küçük trend grafiği olan metrik kartı.
Progress
Animasyonlu dolgulu çizgi ve daire ilerleme; etiket, yerelleştirilmiş değer ve belirsiz mod.
Spinner
Halka, nokta ve çubuk stillerinde, boyut ve renk seçenekli, yerelleştirilmiş etiketli yükleniyor göstergesi.
Skeleton
İçerik yüklenirken bloklar, avatarlar ve metin satırları için nabız gibi atan yer tutucular.
Empty
İkon, başlık, açıklama ve aksiyonlarla boş durum ekranı.
Card
Başlık, açıklama, içerik ve alt bölüm parçalarından oluşan yüzey kapsayıcı.
Accordion
Çizgi, kart ve sade stillerde; ikonlu, açıklamalı ve yumuşak yükseklik animasyonlu açılır bölümler.
Collapsible
İçeriği animasyonlu yükseklik ve dönen okla gösterip gizler.
Separator
İçerik arasında çizgi; ortada etiket, kesikli veya geçişli stil.
Bento Grid
Açılış sayfaları için farklı boyutlu özellik kutuları; görsel alanı ve üzerine gelince beliren bağlantı.
Scroll Area
İnce, tema renkli kaydırma çubuklu ve isteğe bağlı kenar solmalı kaydırma alanı.
Reveal
İçeriği kaydırırken yumuşakça belirip yükselterek gösterir. Hareket azaltma tercihine uyar.
Number Ticker
Görünüme girince sayıya kadar sayan, yerelleştirilmiş ve hareket azaltmaya uyan sayaç.
Text Animate
Kelime ya da harf harf belirme (bulanık, yukarı, kayma, ölçek), dönen kelime ve daktilo efekti; erişilebilir ve hareket azaltmaya uyumlu.
Marquee
Her yöne akan, üzerine gelince yavaşlayıp duran sonsuz logo/yorum şeridi.
Spotlight Card
Yüzeyde ve kenarda imleci izleyen ışıklı kart; kenarda dönen ışık için BorderBeam.
Tilt Card
İmlece doğru 3B eğilen, yay fiziğiyle geri dönen ve parlama efektli kart.
Dock
İmleç geçtikçe ikonları büyüyen macOS tarzı dock.
Theme Provider
Açık/koyu/sistem modu, marka rengi, köşe ve yazı tipini tüm uygulamaya uygulayan, ziyaretçi başına hatırlayan ve açılışta renk sıçraması yapmayan tema sağlayıcı. ThemeCustomizer ile kullanıcı kendisi değiştirir.