---
title: Eski Uygulamalarda Kullanım
description: ikas App UI'ı Next.js 12–14, React 18 ya da antd kullanan mevcut bir uygulamaya ekleyin.
---

ikas App UI, shadcn/ui'ın güncel standardına göre yazılmıştır: Next.js 15+, React 19 ve Tailwind CSS v4. Yeni uygulamalarda [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımları yeterlidir.

Daha eski bir uygulamaya eklerken iki tür uyarlama gerekir:

- **Sürümden gelenler:** Next.js 12–14 ve React 18. Uygulamayı yükseltince ortadan kalkar.
- **Eski bileşen kütüphanesinden gelenler:** antd ve `@ikas/components`. Next.js sürümünden bağımsızdır.

## Bileşenleri ekleyin

Kurulum aynıdır. Tema ve bileşenler shadcn CLI ile eklenir:

```bash
npx shadcn@latest add @ikas/theme @ikas/button @ikas/record-table
```

## Next.js 12–14 ve React 18

| Belirti | Neden | Uyarlama |
|---|---|---|
| `Syntax error: Unexpected token` | Next.js 12'nin Babel'i `import { X, type Y }` ve `satisfies` yazımını tanımaz | `type` içeren import ve export'ları ayrı `import type` / `export type` satırına bölün. `... satisfies Tip` kısımlarını silin; çalışan kod değişmez. |
| Dropdown, popover ve tooltip ekranın dışında açılır | React 18'de düz fonksiyon bileşen `ref` almaz | Tetikleyici olarak kullandığınız `Button`'ı `React.forwardRef` ile sarın ve `ref`'i `<Comp>`'a verin. |
| `next build` tip hatası verir | Eski `@types/react` ve tsconfig `target: es5` | `@types/react`'ı 18.2+ sürümüne yükseltin ve tsconfig'de `target`'ı `es2017` ya da üstü yapın. |
| Tailwind v4 derlenmez | Next.js 12'nin PostCSS'i eskidir | Tailwind CLI ile ayrı bir CSS dosyası derleyin (aşağıda). |

## antd ve `@ikas/components` ile birlikte

Bu kütüphanelerin global CSS'i layer dışındadır ve Tailwind'in layer içindeki class'larını ezer. Butonlar, sekmeler ve kart boşlukları bozuk görünür, kenarlıklar siyah olur. CSS'i şöyle kurun:

<Steps>
<Step>
### Giriş dosyasını yazın

Preflight `layer(base)` içinde kalır, böylece yalnızca tarayıcı varsayılanlarını sıfırlar ve mevcut ekranlara dokunmaz. Utility'ler layer dışında yüklenir ve eski CSS'in önüne geçer.

```css title="src/ikas-ui/tailwind.css"
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "./ikas-base.css";
@import "tailwindcss/utilities.css";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@source "../";
```

`components.json` içindeki `tailwind.css` alanını bu dosyaya yöneltin; `@ikas/theme` değişkenlerini buraya yazar.
</Step>

<Step>
### Kenarlık rengini bileşenlere verin

Eski CSS reset'leri (`table, tr, td { border: 0 }` gibi) kenarlık rengini sıfırlar. Kuralı yalnızca ikas App UI bileşenlerine (`data-slot`) verin:

```css title="src/ikas-ui/ikas-base.css"
[data-slot],
[data-slot] *,
[data-slot] ::before,
[data-slot] ::after {
  border-color: var(--border);
}
```
</Step>

<Step>
### Derleyin ve import edin

Next.js 15+ kullanıyorsanız Tailwind'i PostCSS ile kurabilirsiniz. Next.js 12'de CLI ile derleyin:

```bash
npx @tailwindcss/cli -i src/ikas-ui/tailwind.css -o src/ikas-ui/ikas-ui.css --watch
```

```tsx title="src/pages/_app.tsx"
import "@ikas/components/build/src/styles/global.css"
import "../ikas-ui/ikas-ui.css" // en sonda
```
</Step>
</Steps>

<Callout type="info">
Bu kurulumla eski bileşenler (Section, IkasAlert, Select, Input, Button) aynı görünmeye devam eder. Yeni ekranları ikas App UI ile yazıp eskileri zamanla taşıyabilirsiniz.
</Callout>

## Yükseltme

Kalıcı çözüm Next.js 15+ ve React 19'a geçmektir; sürümden gelen uyarlamaların hepsi ortadan kalkar. Next.js 16'da React 18 desteği deprecated'dır ve Next.js 17'de kaldırılacaktır. Geçişten önce mobx-react, styled-components, antd ve `@ikas/components` sürümlerinin React 19 uyumunu kontrol edin.