300 componentes · registro de shadcn · licencia MIT

Iconos animados para shadcn/ui

Todos los iconos de useAnimations están en un registro de shadcn. Un solo comando de la CLI añade a tu proyecto un componente de React tipado, con la interacción de hover, clic o bucle para la que fue diseñado, soporte para movimiento reducido y colores que siguen tu tema. El código queda en tu repositorio, como cualquier otro componente de shadcn/ui.

Añadir un icono

Ejecuta la CLI de shadcn con la URL del icono en el registro:

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

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

<AnimatedCheckmark size={24} />

El componente se llama Animated + el id del icono en PascalCase (check-box → AnimatedCheckBox) y se guarda en components/animations/<id>.tsx. La CLI también añade el wrapper compartido components/use-animation.tsx e instala react-useanimations, que trae su propio reproductor: no necesitas lottie-web.

Nombres cortos con un namespace de registro

Añade el registro a components.json una sola vez y después añade iconos por su nombre, varios a la vez:

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

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

El índice del registro en /r/registry.json recoge cada elemento con su título, categoría e interacción.

Úsalo en un Button de shadcn

Los componentes aceptan las mismas props que UseAnimations. Para un toggle como el icono de menú, pasa active y guarda el estado en tu botón; el icono se anima cada vez que cambia:

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

Los iconos siguen el color del texto, así que text-primary o text-muted-foreground les cambian el color y el modo oscuro no necesita nada más. Encontrarás más props y patrones en la documentación.

Iconos populares para shadcn/ui

Los 300 iconos →

La página de cada icono (en inglés) muestra su comando de shadcn.

Preguntas frecuentes

¿Los iconos animados para shadcn/ui son gratis?

Sí. Los 300 iconos y el código de los componentes tienen licencia MIT, para proyectos personales y comerciales. El registro no requiere cuenta ni clave de API.

¿Qué añade la CLI de shadcn a mi proyecto?

El componente del icono en components/animations/<id>.tsx, el wrapper compartido del reproductor UseAnimation en components/use-animation.tsx (una sola vez, como dependencia del registro) y react-useanimations@^3.1.1 desde npm. No necesitas lottie-web: el paquete trae su propio reproductor de 8 kB.

¿Los componentes funcionan con los server components de Next.js?

Sí. Los componentes están marcados con "use client" y dibujan la animación solo en el navegador, así que puedes renderizarlos desde server components y páginas sin imports dinámicos ni ssr: false.

¿Puedo cambiar el aspecto y el movimiento de los iconos?

El código es tuyo y está en tu repositorio. Los componentes aceptan las props de UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop y speed. Los iconos siguen el color del texto, así que clases de Tailwind como text-primary o text-muted-foreground les cambian el color.