300 個のコンポーネント · shadcn レジストリ · MIT ライセンス

shadcn/ui 用アニメーションアイコン

useAnimations のアイコンはすべて shadcn レジストリに登録されています。CLI のコマンド 1 つで、型付きの React コンポーネントがプロジェクトに追加されます。デザイン時に想定したホバー、クリック、ループのインタラクションも、モーション軽減への対応も、テーマに追従する色もそのままです。コードはほかの shadcn/ui コンポーネントと同じく、あなたのリポジトリに置かれます。

アイコンを追加する

アイコンのレジストリ URL を指定して shadcn CLI を実行します：

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

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

<AnimatedCheckmark size={24} />

コンポーネント名は Animated + PascalCase にしたアイコン ID（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 と同じ props を受け取ります。メニューアイコンのような切り替え型なら、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 で色が変わり、ダークモードにも追加の対応は要りません。そのほかの props や使い方はドキュメントを参照してください。

よくある質問

shadcn/ui 用のアニメーションアイコンは無料ですか？

はい。全 300 個のアイコンとコンポーネントのコードは MIT ライセンスで、個人・商用プロジェクトで使えます。レジストリの利用にアカウントや API キーは必要ありません。

shadcn CLI はプロジェクトに何を追加しますか？

components/animations/<id>.tsx のアイコンコンポーネント、components/use-animation.tsx の共通プレーヤーラッパー UseAnimation（レジストリの依存関係として初回のみ）、そして npm の react-useanimations@^3.1.1 です。パッケージに 8 kB の独自プレーヤーが入っているので、lottie-web は不要です。

コンポーネントは Next.js のサーバーコンポーネントで使えますか？

はい。コンポーネントには "use client" が付いていて、アニメーションはブラウザーでのみ描画されます。そのため、動的インポートや ssr: false なしで、サーバーコンポーネントやページからレンダリングできます。

アイコンの見た目や動きは変えられますか？

コードはあなたのリポジトリにあるので、自由に変更できます。コンポーネントは UseAnimations の props（size、strokeColor、fillColor、interaction、active、autoplay、loop、speed）を受け取ります。アイコンはテキストの色に追従するので、text-primary や text-muted-foreground などの Tailwind クラスで色を変えられます。

アイコンを追加する

レジストリの名前空間で短く書く

shadcn の Button で使う

人気の shadcn/ui 用アイコン

よくある質問