300 компонентов · реестр shadcn · лицензия MIT

Анимированные иконки для shadcn/ui

Все иконки useAnimations есть в реестре shadcn. Одна команда CLI добавляет в проект типизированный React-компонент со взаимодействием, для которого иконку нарисовали (при наведении, по клику или в цикле), поддержкой уменьшения движения и цветами, которые следуют вашей теме. Код попадает в ваш репозиторий, как и любой другой компонент shadcn/ui.

Добавьте иконку

Запустите shadcn CLI с URL иконки в реестре:

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

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

<AnimatedCheckmark size={24} />

Компонент называется Animated + id иконки в PascalCase (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. Для переключателя вроде иконки меню передайте 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, а для тёмной темы ничего дополнительно делать не нужно. Остальные пропсы и приёмы — в документации.

Частые вопросы

Анимированные иконки для shadcn/ui бесплатны?

Да. Все 300 иконок и код компонентов распространяются по лицензии MIT — для личных и коммерческих проектов. Для реестра не нужны ни аккаунт, ни API-ключ.

Что shadcn CLI добавляет в проект?

Компонент иконки в components/animations/<id>.tsx, общую обёртку плеера UseAnimation в components/use-animation.tsx (один раз, как зависимость из реестра) и react-useanimations@^3.1.1 из npm. lottie-web не нужен: у пакета собственный плеер на 8 КБ.

Работают ли компоненты с серверными компонентами Next.js?

Да. Компоненты помечены "use client" и рисуют анимацию только в браузере, поэтому их можно рендерить из серверных компонентов и страниц без динамического импорта и ssr: false.

Можно ли изменить внешний вид и анимацию иконок?

Код ваш и лежит в вашем репозитории. Компоненты принимают пропсы UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop и speed. Иконки берут цвет текста, поэтому их перекрашивают Tailwind-классы вроде text-primary или text-muted-foreground.

Добавьте иконку

Короткие имена через неймспейс реестра

Использование в shadcn Button

Популярные иконки для shadcn/ui

Частые вопросы