300 komponen · registry shadcn · Berlisensi MIT

Ikon animasi untuk shadcn/ui

Setiap ikon useAnimations tersedia di registry shadcn. Satu perintah CLI menambahkan komponen React bertipe ke proyek Anda, lengkap dengan interaksi hover, klik, atau loop yang dirancang untuknya, dukungan reduced motion, dan warna yang mengikuti tema Anda. Kodenya masuk ke repositori Anda, sama seperti komponen shadcn/ui lainnya.

Menambahkan ikon

Jalankan CLI shadcn dengan URL registry ikonnya:

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

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

<AnimatedCheckmark size={24} />

Nama komponennya adalah Animated + id ikon dalam PascalCase (check-box → AnimatedCheckBox) dan file-nya ditempatkan di components/animations/<id>.tsx. CLI juga menambahkan wrapper bersama components/use-animation.tsx dan memasang react-useanimations, yang sudah membawa player sendiri: tanpa lottie-web.

Nama pendek dengan namespace registry

Tambahkan registry ke components.json sekali saja, lalu tambahkan ikon berdasarkan namanya, beberapa sekaligus:

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

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

Indeks registry di /r/registry.json memuat daftar semua item beserta judul, kategori, dan interaksinya.

Memakainya di Button shadcn

Komponen-komponen ini menerima props yang sama dengan UseAnimations. Untuk toggle seperti ikon menu, berikan active dan simpan state-nya di tombol Anda; ikon beranimasi setiap kali nilainya berubah:

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 ? "Tutup menu" : "Buka menu"}
      aria-expanded={open}
      onClick={() => setOpen(!open)}
    >
      <AnimatedMenu size={20} active={open} />
    </Button>
  )
}

Ikon mengikuti warna teks, jadi text-primary atau text-muted-foreground langsung mengubah warnanya, dan dark mode tidak butuh pengaturan tambahan. Props dan pola lainnya ada di dokumentasi.

Ikon populer untuk shadcn/ui

Semua 300 ikon →

Setiap halaman ikon (dalam bahasa Inggris) menampilkan perintah shadcn-nya.

FAQ

Apakah ikon animasi shadcn/ui ini gratis?

Ya. Semua 300 ikon beserta kode komponennya berlisensi MIT, untuk proyek pribadi maupun komersial. Registry-nya tidak memerlukan akun atau API key.

Apa saja yang ditambahkan CLI shadcn ke proyek saya?

Komponen ikon di components/animations/<id>.tsx, wrapper player UseAnimation bersama di components/use-animation.tsx (sekali saja, sebagai dependensi registry), dan react-useanimations@^3.1.1 dari npm. lottie-web tidak diperlukan: paketnya punya player sendiri berukuran 8 kB.

Apakah komponennya bisa dipakai dengan server component Next.js?

Bisa. Komponennya ditandai "use client" dan hanya menggambar animasi di browser, jadi Anda bisa me-render-nya dari server component dan halaman tanpa dynamic import atau ssr: false.

Bisakah saya mengubah tampilan dan gerakan ikonnya?

Bisa, kodenya milik Anda dan ada di repositori Anda. Komponen-komponen ini menerima props UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop, dan speed. Ikon mengikuti warna teks, jadi class Tailwind seperti text-primary atau text-muted-foreground bisa mengubah warnanya.