---
title: "Temel bileşenler"
description: "ikas temasına göre yeniden stillenmiş shadcn/ui temel bileşenleri: Dialog, Sheet, Tooltip, Table ve diğerleri."
---

<Callout type="info" title="Ne zaman kullanılır">
Bu bileşenler [shadcn/ui](https://ui.shadcn.com/docs/components) ile aynı API'ye sahiptir; yalnızca ikas paneline göre boyutlandırılmış ve renklendirilmiştir. Kullanım ayrıntıları için shadcn/ui belgelerine bakabilirsiniz. Kendi sayfası olan temel bileşenler: [Button](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/button), [Badge](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/badge), [Card](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/card), [Form controls](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/form) ve [Toast](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/toast).
</Callout>

`components/ui` içindeki aynı adlı shadcn dosyasının yerine kurulurlar. Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Geri bildirim

### Alert

İkon, başlık, açıklama ve isteğe bağlı aksiyonlu satır içi uyarı. Sayfa düzeyindeki mesajlar için [Banner](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/banner) kullanın.

```bash
npx shadcn@latest add @ikas/alert
```

### Progress

Yatay ilerleme çubuğu. Limit ve kota göstermek için [Meter](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/meter) daha uygundur.

```bash
npx shadcn@latest add @ikas/progress
```

### Skeleton

İçerik yüklenirken yerini tutan nabız animasyonlu blok.

```bash
npx shadcn@latest add @ikas/skeleton
```

### Spinner

Butonlarda ve küçük alanlarda yükleniyor göstergesi.

```bash
npx shadcn@latest add @ikas/spinner
```

## Katmanlar

### Dialog

Odaklı görevler ve onaylar için modal pencere; başlık, alt bilgi ve kapatma butonuyla.

```bash
npx shadcn@latest add @ikas/dialog
```

### Sheet

Kenardan açılan panel. Ana ekranı kaybetmeden düzenleme ve detay için.

```bash
npx shadcn@latest add @ikas/sheet
```

### Popover

Bir öğeye bağlı, tıklamayla açılan küçük katman.

```bash
npx shadcn@latest add @ikas/popover
```

### Dropdown Menu

İkincil aksiyonları toplayan menü; alt menü, onay kutulu ve radyo öğeleriyle.

```bash
npx shadcn@latest add @ikas/dropdown-menu
```

### Tooltip

Hover veya klavye odağında görünen kısa ipucu. Uygulamayı `TooltipProvider` ile sarın (bkz. [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation)).

```bash
npx shadcn@latest add @ikas/tooltip
```

## Veri gösterimi

### Table

Ham tablo parçaları. Liste ekranları için [Record Table](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/record-table) kullanın.

```bash
npx shadcn@latest add @ikas/table
```

### Avatar

Görsel veya baş harflerle kullanıcı/mağaza simgesi; grup ve rozet desteğiyle.

```bash
npx shadcn@latest add @ikas/avatar
```

### Kbd

Klavye kısayollarını gösteren etiket.

```bash
npx shadcn@latest add @ikas/kbd
```

### Chart

Recharts kapsayıcısı, tooltip ve lejantı tema renklerine bağlar; ikas grafiklerinin temelidir. Hazır grafikler için [Area Chart](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/area-chart) ve diğerlerine bakın.

```bash
npx shadcn@latest add @ikas/chart
```

## Yerleşim ve gezinme

### Separator

Yatay veya dikey ayırıcı çizgi.

```bash
npx shadcn@latest add @ikas/separator
```

### Tabs

İçerik bölümleri arasında geçiş. Kart başlığında hareketli seçim için [Segmented Control](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/segmented-control) kullanın.

```bash
npx shadcn@latest add @ikas/tabs
```

### Button Group

İlişkili butonları tek bir grup olarak birleştirir.

```bash
npx shadcn@latest add @ikas/button-group
```

## Form

### Radio Group

Az sayıda seçenekten birini seçmek için. Diğer form kontrolleri [Form controls](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/form) sayfasında.

```bash
npx shadcn@latest add @ikas/radio-group
```