---
title: "Animated Number"
description: "Değişince kayan sayı: artış aşağıdan, azalış yukarıdan gelir. Yön bir bakışta okunur."
---

<Callout type="info" title="Ne zaman kullanılır">
Kullanıcının bir aksiyonuyla değişen toplamlar ve sayaçlar: sepet toplamı, seçili kayıt sayısı.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/animated-number
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Sepet toplamı

format ile para birimi biçimi verilir.

**Örnek: Sepet toplamı** (`animated-number/cart-total`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/animated-number/cart-total)

```tsx
import * as React from "react"
import { MinusIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { AnimatedNumber } from "@/components/ikas/animated-number"

const money = new Intl.NumberFormat("tr-TR", { style: "currency", currency: "TRY" }).format
const unitPrice = 649.9

export default function AnimatedNumberCartTotal() {
  const [qty, setQty] = React.useState(2)

  return (
    <div className="flex w-full max-w-xs flex-col gap-4 rounded-xl bg-card p-5 shadow-card">
      <div className="flex items-center justify-between text-sm">
        <span className="text-muted-foreground">Keten gömlek × {qty}</span>
        <div className="flex gap-1">
          <Button variant="outline" size="icon-xs" aria-label="Bir adet çıkar" disabled={qty <= 1} onClick={() => setQty((q) => q - 1)}>
            <MinusIcon />
          </Button>
          <Button variant="outline" size="icon-xs" aria-label="Bir adet ekle" onClick={() => setQty((q) => q + 1)}>
            <PlusIcon />
          </Button>
        </div>
      </div>
      <div className="flex items-baseline justify-between border-t pt-4">
        <span className="text-sm font-medium">Sepet toplamı</span>
        <AnimatedNumber value={qty * unitPrice} format={money} className="text-xl font-semibold tracking-[-0.02em]" />
      </div>
    </div>
  )
}
```

### Sayaç

Varsayılan biçim tr-TR gruplama (1.208).

**Örnek: Sayaç** (`animated-number/counter`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/animated-number/counter)

```tsx
import * as React from "react"
import { MinusIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { AnimatedNumber } from "@/components/ikas/animated-number"

export default function AnimatedNumberCounter() {
  const [count, setCount] = React.useState(1208)

  return (
    <div className="flex items-center gap-4">
      <Button variant="outline" size="icon" aria-label="Azalt" onClick={() => setCount((c) => c - 1)}>
        <MinusIcon />
      </Button>
      <div className="flex min-w-28 flex-col items-center">
        <AnimatedNumber value={count} className="text-3xl font-semibold tracking-[-0.03em]" />
        <span className="text-[13px] text-muted-foreground">sipariş</span>
      </div>
      <Button variant="outline" size="icon" aria-label="Artır" onClick={() => setCount((c) => c + 1)}>
        <PlusIcon />
      </Button>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Sadece kullanıcının tetiklediği değişikliklerde kullanın.

**Yapmayın:**

- Sayfa açılışında sayıları sıfırdan saydırmayın; veri hemen okunabilir olmalı.

## API

### `AnimatedNumber`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `value` (zorunlu) | `number` | - | Gösterilecek sayı. |
| `format` | `(value: number) => string` | `defaultFormat` | Görüntü biçimi. |