300 componentes · registry do shadcn · licença MIT

Ícones animados para shadcn/ui

Todos os ícones do useAnimations estão num registry do shadcn. Um comando da CLI adiciona ao seu projeto um componente React tipado, com a interação de hover, clique ou loop para a qual o ícone foi desenhado, suporte a movimento reduzido e cores que seguem o seu tema. O código fica no seu repositório, como qualquer outro componente do shadcn/ui.

Adicionar um ícone

Rode a CLI do shadcn com a URL do ícone no registry:

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

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

<AnimatedCheckmark size={24} />

O componente se chama Animated + o id do ícone em PascalCase (check-box → AnimatedCheckBox) e vai para components/animations/<id>.tsx. A CLI também adiciona o wrapper compartilhado components/use-animation.tsx e instala o react-useanimations, que traz o próprio player: nada de lottie-web.

Nomes curtos com um namespace de registry

Adicione o registry ao components.json uma vez e depois adicione ícones pelo nome, vários de uma vez:

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

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

O índice do registry em /r/registry.json lista cada item com título, categoria e interação.

Use num Button do shadcn

Os componentes recebem as mesmas props que o UseAnimations. Para um toggle como o ícone de menu, passe active e mantenha o estado no botão; o ícone anima sempre que ele muda:

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

Os ícones seguem a cor do texto, então text-primary ou text-muted-foreground mudam a cor deles, e o modo escuro não precisa de nada extra. Mais props e padrões estão na documentação.

Ícones populares para shadcn/ui

Todos os 300 ícones →

A página de cada ícone (em inglês) mostra o comando do shadcn.

Perguntas frequentes

Os ícones animados para shadcn/ui são gratuitos?

Sim. Todos os 300 ícones e o código dos componentes têm licença MIT, para projetos pessoais e comerciais. O registry não exige conta nem chave de API.

O que a CLI do shadcn adiciona ao meu projeto?

O componente do ícone em components/animations/<id>.tsx, o wrapper compartilhado do player UseAnimation em components/use-animation.tsx (uma única vez, como dependência do registry) e o react-useanimations@^3.1.1 do npm. O lottie-web não é necessário: o pacote tem o próprio player de 8 kB.

Os componentes funcionam com server components do Next.js?

Sim. Os componentes são marcados com "use client" e desenham a animação só no navegador, então você pode renderizá-los a partir de server components e páginas sem imports dinâmicos nem ssr: false.

Posso mudar a aparência e o movimento dos ícones?

O código é seu e fica no seu repositório. Os componentes recebem as props do UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop e speed. Os ícones seguem a cor do texto, então classes do Tailwind como text-primary ou text-muted-foreground mudam a cor deles.