300 component · shadcn registry · Giấy phép MIT

Icon động cho shadcn/ui

Mọi icon của useAnimations đều có trong một shadcn registry. Một lệnh CLI sẽ thêm vào dự án của bạn một React component có kiểu TypeScript, với tương tác hover, click hoặc loop mà icon được thiết kế cho, hỗ trợ giảm chuyển động và màu sắc theo theme của bạn. Code nằm ngay trong repository của bạn, giống mọi component shadcn/ui khác.

Thêm một icon

Chạy shadcn CLI với URL registry của icon:

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

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

<AnimatedCheckmark size={24} />

Component được đặt tên theo dạng Animated + id của icon ở dạng PascalCase (check-box → AnimatedCheckBox) và nằm trong components/animations/<id>.tsx. CLI cũng thêm wrapper dùng chung components/use-animation.tsx và cài react-useanimations, vốn có player riêng: không cần lottie-web.

Tên ngắn với namespace của registry

Thêm registry vào components.json một lần, sau đó thêm icon theo tên, nhiều icon cùng lúc:

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

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

Chỉ mục registry tại /r/registry.json liệt kê mọi mục kèm tiêu đề, danh mục và tương tác.

Dùng trong shadcn Button

Các component nhận đúng các prop như UseAnimations. Với icon bật/tắt như icon menu, hãy truyền active và giữ state trong button của bạn; icon sẽ chuyển động mỗi khi state thay đổi:

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

Icon tự theo màu chữ, nên text-primary hay text-muted-foreground là đổi được màu, và dark mode không cần thêm gì. Các prop và cách dùng khác có trong tài liệu.

Icon phổ biến cho shadcn/ui

Tất cả 300 icon →

Trang của mỗi icon đều có lệnh shadcn tương ứng.

Câu hỏi thường gặp

Icon động cho shadcn/ui có miễn phí không?

Có. Cả 300 icon và code component đều dùng giấy phép MIT, cho dự án cá nhân lẫn thương mại. Registry không yêu cầu tài khoản hay API key.

shadcn CLI thêm những gì vào dự án của tôi?

Component icon trong components/animations/<id>.tsx, wrapper player dùng chung UseAnimation trong components/use-animation.tsx (chỉ một lần, dưới dạng dependency của registry) và react-useanimations@^3.1.1 từ npm. Không cần lottie-web: package có player riêng chỉ 8 kB.

Các component có chạy được với server component của Next.js không?

Có. Các component được đánh dấu "use client" và chỉ vẽ animation trên trình duyệt, nên bạn có thể render chúng từ server component và page mà không cần dynamic import hay ssr: false.

Có thay đổi được giao diện và chuyển động của icon không?

Code là của bạn, nằm trong repository của bạn. Các component nhận prop của UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop và speed. Icon tự theo màu chữ, nên các class Tailwind như text-primary hay text-muted-foreground là đổi được màu.