300 bileşen · shadcn registry · MIT lisanslı

shadcn/ui için animasyonlu ikonlar

Her useAnimations ikonu bir shadcn registry’sinde yer alır. Tek bir CLI komutu projenize tipli bir React bileşeni ekler: ikonun kendisi için tasarlanan hover, tıklama ya da döngü etkileşimi, azaltılmış hareket desteği ve temanızı izleyen renklerle. Kod, diğer shadcn/ui bileşenleri gibi doğrudan sizin repository’nize girer.

İkon ekleme

shadcn CLI’ı ikonun registry URL’siyle çalıştırın:

npx shadcn@latest add https://useanimations.com/r/checkmark.json

import { AnimatedCheckmark } from '@/components/animations/checkmark';

<AnimatedCheckmark size={24} />

Bileşenin adı Animated + PascalCase yazılmış ikon id’sidir (check-box → AnimatedCheckBox) ve components/animations/<id>.tsx dosyasına eklenir. CLI ayrıca ortak components/use-animation.tsx wrapper’ını ekler ve kendi oynatıcısıyla gelen react-useanimations paketini kurar: lottie-web gerekmez.

Registry namespace’iyle kısa adlar

Registry’yi bir kez components.json dosyasına ekleyin, sonra ikonları adlarıyla, birkaçını birden ekleyin:

{
  "registries": {
    "@useanimations": "https://useanimations.com/r/{name}.json"
  }
}

npx shadcn@latest add @useanimations/menu @useanimations/heart @useanimations/loading

/r/registry.json adresindeki registry dizini her öğeyi başlığı, kategorisi ve etkileşimiyle listeler.

shadcn Button içinde kullanım

Bileşenler UseAnimations ile aynı prop’ları alır. Menü ikonu gibi bir geçiş ikonu için active geçin ve state’i düğmenizde tutun; ikon her değişiklikte animasyon oynatır:

npx shadcn@latest add https://useanimations.com/r/menu.json

"use client"

import { useState } from "react"
import { AnimatedMenu } from "@/components/animations/menu"
import { Button } from "@/components/ui/button"

export function MenuToggle() {
  const [open, setOpen] = useState(false)
  return (
    <Button
      variant="ghost"
      size="icon"
      aria-label={open ? "Menüyü kapat" : "Menüyü aç"}
      aria-expanded={open}
      onClick={() => setOpen(!open)}
    >
      <AnimatedMenu size={20} active={open} />
    </Button>
  )
}

İkonlar metin rengini izler; text-primary ya da text-muted-foreground onları yeniden renklendirir ve karanlık mod için ek bir şey gerekmez. Diğer prop’lar ve kalıplar dokümantasyonda.

shadcn/ui için popüler ikonlar

300 ikonun tamamı →

Her ikon sayfası kendi shadcn komutunu gösterir.

Sık sorulan sorular

shadcn/ui animasyonlu ikonları ücretsiz mi?

Evet. 300 ikonun tamamı ve bileşen kodu MIT lisanslıdır; kişisel ve ticari projelerde kullanılabilir. Registry için hesap ya da API anahtarı gerekmez.

shadcn CLI projeme neler ekler?

components/animations/<id>.tsx içinde ikon bileşenini, components/use-animation.tsx içinde ortak UseAnimation oynatıcı wrapper’ını (registry bağımlılığı olarak, bir kez) ve npm’den react-useanimations@^3.1.1 paketini. lottie-web gerekmez: paketin kendi 8 kB’lık oynatıcısı var.

Bileşenler Next.js server component’leriyle çalışır mı?

Evet. Bileşenler "use client" olarak işaretlidir ve animasyonu yalnızca tarayıcıda çizer; bu yüzden onları server component’lerden ve sayfalardan dynamic import ya da ssr: false olmadan render edebilirsiniz.

İkonların görünümünü ve hareketini değiştirebilir miyim?

Kod sizin, kendi repository’nizde. Bileşenler UseAnimations’ın prop’larını alır: size, strokeColor, fillColor, interaction, active, autoplay, loop ve speed. İkonlar metin rengini izlediği için text-primary ya da text-muted-foreground gibi Tailwind class’ları onları yeniden renklendirir.