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:

Terminal
npx shadcn@latest init

2. Bloxa registry'sini ekle

components.json dosyasına Bloxa'yı ekle:

components.json
{
  "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.

Terminal
npx shadcn@latest add @bloxa/button

Bloxa CLI

npx @bloxa/cli registry ayarını senin yerine yapar ve bileşenleri adıyla ekler.

Terminal
npx @bloxa/cli init
npx @bloxa/cli add button select date-picker
npx @bloxa/cli list

Ya 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.

Terminal
npm install @bloxa/react
app/globals.css
@import "tailwindcss";
@import "@bloxa/react/theme.css";
@source "../node_modules/@bloxa/react/dist";
app/page.tsx
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.