컴포넌트 300개 · shadcn 레지스트리 · MIT 라이선스

shadcn/ui용 애니메이션 아이콘

useAnimations의 모든 아이콘은 shadcn 레지스트리에 있습니다. CLI 명령 하나로 타입이 지정된 React 컴포넌트가 프로젝트에 추가되며, 디자인된 호버·클릭·루프 인터랙션, 동작 줄이기 지원, 테마를 따라가는 색상이 함께 들어갑니다. 다른 shadcn/ui 컴포넌트처럼 코드는 내 저장소에 들어갑니다.

아이콘 추가하기

아이콘의 레지스트리 URL로 shadcn CLI를 실행하세요.

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

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

<AnimatedCheckmark size={24} />

컴포넌트 이름은 Animated + PascalCase로 쓴 아이콘 id(check-box → AnimatedCheckBox)이고, components/animations/<id>.tsx에 생성됩니다. CLI는 공용 래퍼 components/use-animation.tsx도 추가하고 react-useanimations를 설치합니다. 이 패키지에 자체 플레이어가 있으므로 lottie-web은 필요 없습니다.

레지스트리 네임스페이스로 짧게 쓰기

components.json에 레지스트리를 한 번만 추가하면, 이후에는 이름으로 여러 아이콘을 한꺼번에 추가할 수 있습니다.

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

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

레지스트리 인덱스 /r/registry.json에는 모든 항목의 제목, 카테고리, 인터랙션이 나열되어 있습니다.

shadcn Button 안에서 쓰기

컴포넌트는 UseAnimations와 같은 props를 받습니다. menu 아이콘 같은 토글이라면 active를 전달하고 상태는 버튼에서 관리하세요. 값이 바뀔 때마다 아이콘이 애니메이션됩니다.

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 ? "메뉴 닫기" : "메뉴 열기"}
      aria-expanded={open}
      onClick={() => setOpen(!open)}
    >
      <AnimatedMenu size={20} active={open} />
    </Button>
  )
}

아이콘은 텍스트 색상을 따라가므로 text-primary나 text-muted-foreground로 색을 바꿀 수 있고, 다크 모드에도 따로 할 일이 없습니다. 다른 props와 패턴은 문서에 있습니다.

shadcn/ui 인기 아이콘

아이콘 300개 전체 →

각 아이콘 페이지에 shadcn 명령이 나와 있습니다.

자주 묻는 질문

shadcn/ui 애니메이션 아이콘은 무료인가요?

네. 아이콘 300개와 컴포넌트 코드 모두 MIT 라이선스로 개인·상업용 프로젝트에 쓸 수 있습니다. 레지스트리에는 계정도 API 키도 필요 없습니다.

shadcn CLI는 프로젝트에 무엇을 추가하나요?

components/animations/<id>.tsx의 아이콘 컴포넌트, components/use-animation.tsx의 공용 UseAnimation 플레이어 래퍼(레지스트리 의존성으로 한 번만), 그리고 npm의 react-useanimations@^3.1.1입니다. 패키지에 8 kB짜리 자체 플레이어가 있으므로 lottie-web은 필요 없습니다.

Next.js 서버 컴포넌트에서도 동작하나요?

네. 컴포넌트에 "use client"가 지정되어 있고 애니메이션은 브라우저에서만 그리므로, 동적 import나 ssr: false 없이 서버 컴포넌트와 페이지에서 렌더링할 수 있습니다.

아이콘의 모양과 움직임을 바꿀 수 있나요?

코드는 내 저장소에 있는 내 코드입니다. 컴포넌트는 UseAnimations의 props(size, strokeColor, fillColor, interaction, active, autoplay, loop, speed)를 받습니다. 아이콘은 텍스트 색상을 따라가므로 text-primary나 text-muted-foreground 같은 Tailwind 클래스로 색을 바꿀 수 있습니다.