300 komponent · registr shadcn · licence MIT

Animované ikony pro shadcn/ui

Všechny ikony useAnimations jsou v registru shadcn. Jeden příkaz CLI vám do projektu přidá typovanou React komponentu s interakcí na hover, kliknutí nebo ve smyčce, pro kterou byla ikona navržena, s podporou omezeného pohybu a barvami, které přebírají váš motiv. Kód skončí ve vašem repozitáři jako u každé jiné komponenty shadcn/ui.

Přidání ikony

Spusťte shadcn CLI s URL ikony v registru:

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

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

<AnimatedCheckmark size={24} />

Komponenta se jmenuje Animated + id ikony v PascalCase (check-box → AnimatedCheckBox) a uloží se do components/animations/<id>.tsx. CLI přidá také sdílený obal components/use-animation.tsx a nainstaluje react-useanimations, který má vlastní přehrávač: lottie-web nepotřebujete.

Krátké názvy díky jmennému prostoru registru

Jednou přidejte registr do components.json a pak přidávejte ikony podle názvu, klidně několik najednou:

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

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

Index registru na /r/registry.json obsahuje všechny položky s názvem, kategorií a interakcí.

Použití v shadcn Button

Komponenty přijímají stejné props jako UseAnimations. U přepínací ikony, jako je menu, předejte active a stav držte v tlačítku; ikona se animuje pokaždé, když se změní:

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

Ikony přebírají barvu textu, takže je přebarví text-primary nebo text-muted-foreground a tmavý režim nevyžaduje nic navíc. Další props a postupy najdete v dokumentaci.

Oblíbené ikony pro shadcn/ui

Všech 300 ikon →

Na stránce každé ikony najdete její příkaz pro shadcn (stránky ikon jsou v angličtině).

Časté dotazy

Jsou animované ikony pro shadcn/ui zdarma?

Ano. Všech 300 ikon i kód komponent jsou pod licencí MIT, pro osobní i komerční projekty. Registr nevyžaduje účet ani API klíč.

Co shadcn CLI přidá do mého projektu?

Komponentu ikony v components/animations/<id>.tsx, sdílený obal přehrávače UseAnimation v components/use-animation.tsx (jednou, jako závislost z registru) a react-useanimations@^3.1.1 z npm. lottie-web není potřeba: balíček má vlastní přehrávač o velikosti 8 kB.

Fungují komponenty se server komponentami v Next.js?

Ano. Komponenty jsou označené "use client" a animaci kreslí až v prohlížeči, takže je můžete vykreslit ze server komponent a stránek bez dynamických importů nebo ssr: false.

Můžu změnit vzhled a pohyb ikon?

Kód je váš, ve vašem repozitáři. Komponenty přijímají props komponenty UseAnimations: size, strokeColor, fillColor, interaction, active, autoplay, loop a speed. Ikony přebírají barvu textu, takže je přebarví třídy Tailwindu jako text-primary nebo text-muted-foreground.