--- title: Tüm Bileşenler description: ikas Admin Uygulamaları için ekran kalıpları, grafikler ve temel bileşenler. --- Her component sayfasında canlı önizleme, kaynak kodu, kurulum komutu, kullanım ilkeleri ve API tablosu bulunur. Bileşenleri kurmadan önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın. ## Sayfa yerleşimi Her ekranın dış çerçevesi, kolon düzenleri ve içerik yüzeyi. - [Page](https://builders.ikas.com/docs/app-development/ui-kit/components/page) — Her ekranın dış çerçevesi: genişlik ön ayarı, başlık, geri gezinme, durum rozetleri ve aksiyonlar. - [Layout](https://builders.ikas.com/docs/app-development/ui-kit/components/layout) — Sayfa içeriği için sütun ön ayarları ve ayar ekranları için numaralanabilen SettingsGroup. - [Card](https://builders.ikas.com/docs/app-development/ui-kit/components/card) — İçerik yüzeyi. ## Veri gösterimi Kayıt listeleri, metrikler ve detay ekranları. - [Record Table](https://builders.ikas.com/docs/app-development/ui-kit/components/record-table) — Kayıt listelemenin standart yolu: arama ve filtreler, toplu aksiyonlu seçim, yükleme iskeletleri, boş durum ve sayfalama tek kartta. - [Stat Card](https://builders.ikas.com/docs/app-development/ui-kit/components/stat-card) — Etiketi ve önceki döneme göre değişimiyle bir metrik. - [Description List](https://builders.ikas.com/docs/app-development/ui-kit/components/description-list) — Detay ekranları için etiket ve değer çiftleri. ## Aksiyonlar ve formlar Butonlar, durum etiketleri ve ayar formlarının parçaları. - [Button](https://builders.ikas.com/docs/app-development/ui-kit/components/button) — Beş varyant, yedi renk, beş boyut. - [Badge](https://builders.ikas.com/docs/app-development/ui-kit/components/badge) — Durum etiketleri. - [Form controls](https://builders.ikas.com/docs/app-development/ui-kit/components/form) — ikas paneline göre boyutlandırılmış ve renklendirilmiş Field, Input, InputGroup, Select, Checkbox, Switch ve Textarea. - [Setting Row](https://builders.ikas.com/docs/app-development/ui-kit/components/setting-row) — Başlığı, açıklaması ve sağa hizalı kontrolüyle tek bir ayar. ## Geri bildirim Mağaza sahibine durumu, boş ekranları ve kaydedilmemiş değişiklikleri anlatan bileşenler. - [Banner](https://builders.ikas.com/docs/app-development/ui-kit/components/banner) — Uygulamanın veya bir sayfanın durumu hakkında kalıcı, duruma göre renklenen mesaj. - [Toast](https://builders.ikas.com/docs/app-development/ui-kit/components/toast) — Kısa süreli onay mesajı. - [Empty State](https://builders.ikas.com/docs/app-development/ui-kit/components/empty-state) — Bir görünümün neden boş olduğunu açıklar ve sonraki adımı sunar. - [Unsaved Bar](https://builders.ikas.com/docs/app-development/ui-kit/components/unsaved-bar) — Formda kaydedilmemiş değişiklik varken görünür ve Kaydet / Vazgeç aksiyonlarını taşır. ## Uygulama blokları ikas uygulamalarında tekrar eden hazır bloklar: opt-in modüller, ilk kurulum adımları, storefront script'i. - [Toggle Section](https://builders.ikas.com/docs/app-development/ui-kit/components/toggle-section) — Açılıp kapanan bir özellik: başlıkta switch, ayarları yalnızca açıkken altında açılır. - [Launchpad](https://builders.ikas.com/docs/app-development/ui-kit/components/launchpad) — Uygulama ana sayfasının üstündeki ilk adımlar. - [Script Installer](https://builders.ikas.com/docs/app-development/ui-kit/components/script-installer) — Storefront script'ini kur, güncelle, kaldır. ## Grafikler Doğrulanmış paletle panel ve analitik grafikleri. - [Area Chart](https://builders.ikas.com/docs/app-development/ui-kit/components/area-chart) — Zaman içindeki değişim. - [Sparkline](https://builders.ikas.com/docs/app-development/ui-kit/components/sparkline) — Eksensiz, ızgarasız küçük bir trend çizgisi. - [Bar Chart](https://builders.ikas.com/docs/app-development/ui-kit/components/bar-chart) — Kategorileri karşılaştıran sütun ve çubuk grafik. - [Bar List](https://builders.ikas.com/docs/app-development/ui-kit/components/bar-list) — Sıralı yatay liste: etiket hafif bir çubuğun üstünde, değer sağda. - [Chart Card](https://builders.ikas.com/docs/app-development/ui-kit/components/chart-card) — Panel grafiklerinin çerçevesi: başlık, dönen ana değer, değişim rozeti, zaman aralığı seçimi ve grafik. - [Donut Chart](https://builders.ikas.com/docs/app-development/ui-kit/components/donut-chart) — Az sayıda kategorinin bütüne oranı. - [Meter](https://builders.ikas.com/docs/app-development/ui-kit/components/meter) — Bir limite göre kullanım. - [Chart Kit](https://builders.ikas.com/docs/app-development/ui-kit/components/chart-kit) — ikas grafiklerinin ortak parçaları: renkler, dolgular, lejant, tooltip, yükleniyor durumu ve giriş animasyonu. ## Animasyonlu kontroller Kayan seçimler, açılan bölümler, sayı ve ikon animasyonlarıyla etkileşimli kontroller. Hareketin ilkeleri için [Hareket](https://builders.ikas.com/tr/docs/app-development/ui-kit/motion) sayfasına bakın. - [Segmented Control](https://builders.ikas.com/docs/app-development/ui-kit/components/segmented-control) — 2–5 seçenekten birini seçtirir. - [Number Stepper](https://builders.ikas.com/docs/app-development/ui-kit/components/number-stepper) — −/+ butonlu sayı girişi. - [Animated Number](https://builders.ikas.com/docs/app-development/ui-kit/components/animated-number) — Değişince kayan sayı: artış aşağıdan, azalış yukarıdan gelir. - [Collapse](https://builders.ikas.com/docs/app-development/ui-kit/components/collapse) — Yüksekliği 0 ile auto arasında yaylı geçişle açar. - [Icon motion](https://builders.ikas.com/docs/app-development/ui-kit/components/animated-check) — Herhangi bir lucide ikonuna data-anim verin; ikon, en yakın buton veya link hover ya da klavye odağı aldığında kısa bir mikro animasyon oynatır. - [Expandable Search](https://builders.ikas.com/docs/app-development/ui-kit/components/expandable-search) — Dinlenirken tek bir arama ikonu; tıklayınca yay animasyonuyla input'a açılır. - [Action Bar](https://builders.ikas.com/docs/app-development/ui-kit/components/action-bar) — Sadece ikonlu bir araç çubuğu. - [Confirm Button](https://builders.ikas.com/docs/app-development/ui-kit/components/confirm-button) — Dialog gerektirmeyen yıkıcı aksiyonlar için iki adımlı satır içi onay. ## shadcn/ui bileşenleri ikas temasına göre yeniden stillenmiş Dialog, Sheet, Tooltip, Table ve diğer temel bileşenler. - [Temel bileşenler](https://builders.ikas.com/docs/app-development/ui-kit/components/primitives) — ikas temasına göre yeniden stillenmiş shadcn/ui temel bileşenleri: Dialog, Sheet, Tooltip, Table ve diğerleri.