---
title: Kurulum
description: ikas App UI'ı bir ikas Admin Uygulamasına kurun.
---

ikas App UI, `ikas-app-examples` ile oluşturulan her ikas uygulamasında çalışır (Next.js, Tailwind CSS v4 ve shadcn/ui). Çalışma zamanına ek paket eklenmez.

<Callout type="info" title="Registry adresi">
Registry `https://builders.ikas.com/r/{name}.json` adresinden sunulur. Kaynak kodu [ikascom/ikas-app-ui](https://github.com/ikascom/ikas-app-ui) reposundadır.
</Callout>

<Steps>
<Step>
### `@ikas` registry'sini ekleyin

`@ikas`, shadcn registry dizininde listelenene kadar namespace'i projenize bir kez kaydedin. Komut, adresi `components.json` dosyanıza ekler:

```bash
npx shadcn@latest registry add "@ikas=https://builders.ikas.com/r/{name}.json"
```

Ya da elle ekleyin:

```json title="components.json"
{
  "registries": {
    "@ikas": "https://builders.ikas.com/r/{name}.json"
  }
}
```
</Step>

<Step>
### Temayı kurun

`globals.css` içindeki CSS değişkenlerini ikas token'larıyla değiştirir; renk paletini ve durum renklerini (`bg-success-subtle`, `text-danger-subtle-foreground` gibi) ekler.

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

<Callout type="warning">
Tema, mevcut CSS değişkenlerinizin üzerine yazar.
</Callout>
</Step>

<Step>
### Inter fontunu kullanın

ikas paneli Inter kullanır. Fontu `next/font` ile yükleyin ve `--font-sans` değişkenini ona yönlendirin.

```tsx title="src/app/layout.tsx"
import { Inter } from "next/font/google"

const inter = Inter({ variable: "--font-inter", subsets: ["latin", "latin-ext"] })

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="tr" className={inter.variable}>
      <body>{children}</body>
    </html>
  )
}
```

```css title="src/app/globals.css"
@theme inline {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  /* ... */
}
```
</Step>

<Step>
### Bileşenleri ekleyin

Bağımlılıklar (diğer bileşenler ve npm paketleri) otomatik kurulur.

<Callout type="warning" title="npm paketi değildir">
`@ikas/...` adları shadcn registry adresleridir; shadcn CLI ile kurulur, `npm install` ile kurulmaz. npm'deki `@ikas/admin-api-client` ve `@ikas/app-helpers` gibi paketler bunlardan bağımsızdır.
</Callout>

```bash
npx shadcn@latest add @ikas/page @ikas/layout @ikas/record-table @ikas/empty-state @ikas/banner @ikas/unsaved-bar
```

`@ikas/button` gibi temel bileşenler `components/ui` içindeki aynı adlı shadcn dosyasının yerine geçer. Ekran kalıpları `components/ikas` klasörüne kurulur.
</Step>

<Step>
### Toast ve Tooltip için provider'ları ekleyin

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

```tsx title="src/app/layout.tsx"
import { Toaster } from "@/components/ui/sonner"
import { TooltipProvider } from "@/components/ui/tooltip"

// <body> içinde
<TooltipProvider>
  {children}
  <Toaster position="bottom-right" />
</TooltipProvider>
```
</Step>

<Step>
### AI agent'ınızı bilgilendirin

Kural dosyasını kurun ve `AGENTS.md` ya da `CLAUDE.md` içinden ona referans verin. Ayrıntılar için [AI Agent ile Kullanım](https://builders.ikas.com/tr/docs/app-development/ui-kit/ai-agent) sayfasına bakın.

```bash
npx shadcn@latest add @ikas/ui-rules
```
</Step>
</Steps>