300 Komponenten · shadcn-Registry · MIT-Lizenz

Animierte Icons für shadcn/ui

Jedes useAnimations-Icon steht in einer shadcn-Registry. Ein CLI-Befehl fügt Ihrem Projekt eine typisierte React-Komponente hinzu, mit der Hover-, Klick- oder Loop-Interaktion, für die das Icon gestaltet wurde, Unterstützung für reduzierte Bewegung und Farben, die Ihrem Theme folgen. Der Code landet in Ihrem Repository, wie bei jeder anderen shadcn/ui-Komponente.

Ein Icon hinzufügen

Führen Sie die shadcn CLI mit der Registry-URL des Icons aus:

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

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

<AnimatedCheckmark size={24} />

Die Komponente heißt Animated + die Icon-ID in PascalCase (check-box → AnimatedCheckBox) und landet in components/animations/<id>.tsx. Die CLI fügt außerdem den gemeinsamen Wrapper components/use-animation.tsx hinzu und installiert react-useanimations, das einen eigenen Player mitbringt: kein lottie-web nötig.

Kurze Namen mit einem Registry-Namespace

Tragen Sie die Registry einmalig in components.json ein; danach fügen Sie Icons per Namen hinzu, auch mehrere auf einmal:

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

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

Der Registry-Index unter /r/registry.json listet jeden Eintrag mit Titel, Kategorie und Interaktion auf.

In einem shadcn-Button verwenden

Die Komponenten nehmen dieselben Props wie UseAnimations. Bei einem Toggle wie dem Menü-Icon übergeben Sie active und halten den State in Ihrem Button; das Icon animiert bei jeder Änderung:

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 ? "Menü schließen" : "Menü öffnen"}
      aria-expanded={open}
      onClick={() => setOpen(!open)}
    >
      <AnimatedMenu size={20} active={open} />
    </Button>
  )
}

Icons übernehmen die Textfarbe: text-primary oder text-muted-foreground färben sie um, und Dark Mode braucht nichts Zusätzliches. Weitere Props und Muster finden Sie in der Dokumentation.

Beliebte Icons für shadcn/ui

Alle 300 Icons →

Jede Icon-Seite zeigt ihren shadcn-Befehl (die Icon-Seiten sind nur auf Englisch verfügbar).

Häufige Fragen

Sind die animierten Icons für shadcn/ui kostenlos?

Ja. Alle 300 Icons und der Code der Komponenten stehen unter der MIT-Lizenz, für private und kommerzielle Projekte. Die Registry braucht weder Konto noch API-Key.

Was fügt die shadcn CLI meinem Projekt hinzu?

Die Icon-Komponente in components/animations/<id>.tsx, den gemeinsamen Player-Wrapper UseAnimation in components/use-animation.tsx (einmalig, als Registry-Abhängigkeit) und react-useanimations@^3.1.1 von npm. lottie-web ist nicht nötig: Das Paket hat einen eigenen Player mit 8 kB.

Funktionieren die Komponenten mit Server Components in Next.js?

Ja. Die Komponenten sind mit "use client" markiert und zeichnen die Animation nur im Browser. Sie können sie also aus Server Components und Seiten rendern, ohne dynamische Imports oder ssr: false.

Kann ich Aussehen und Bewegung der Icons ändern?

Der Code gehört Ihnen und liegt in Ihrem Repository. Die Komponenten nehmen die Props von UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop und speed. Icons übernehmen die Textfarbe, Tailwind-Klassen wie text-primary oder text-muted-foreground färben sie also um.