KokonutUIを使ったら、shadcn/uiがさらに進化した話

はじめに

shadcn/uiを使い始めて「これだ」と思った人、多いと思います。個人的にもshadcn/uiは一択だなと思っているんですが、最近もう一歩先を行くライブラリを見つけました。

それがKokonutUI。

正直なところ「shadcn/uiの派生？」と最初は軽く見ていたんですが、使ってみたらこれが想像以上に良かった。特にアニメーション周りの実装が秀逸で、「こういうのが欲しかった」という感じ。

GitHubで1,500以上のスター、Vercelの2025 OSS Programにも選ばれているので、信頼性もある。今回は実際に使ってみた感想を交えて紹介します。

KokonutUIとは

KokonutUIは、Tailwind CSS、shadcn/ui、そしてMotion（Framer Motion）で構築された美しいUIコンポーネント集です。

公式では「Open-source collection of stunning Components built with Tailwind CSS, shadcn/ui and Motion to use on your websites」と説明されています。

コンポーネント数: 100以上
ライセンス: MIT（無料で商用利用可）
技術スタック: TypeScript 96%、Tailwind CSS v4、shadcn/ui、Motion
スター数: 1,550+
コントリビューター: 10人以上

shadcn/uiをベースにしているので、既存のshadcn/uiユーザーには特に刺さると思います。

特徴・メリット

1. Motionによるアニメーションが標準搭載

これが一番のポイント。shadcn/uiのコンポーネントは美しいけど、アニメーションは自分で実装する必要がある。

KokonutUIはMotion（旧Framer Motion）が統合されているので、最初からアニメーションが入ったコンポーネントを使える。例えばparticle-buttonとか、クリックするとパーティクルが飛び散るボタンがある。こういうの、自分で実装すると地味に時間かかるんですよね。

2. Tailwind CSS v4対応

これ、意外と重要。Tailwind CSS v4はまだ新しいので、対応しているUIライブラリは限られている。KokonutUIは最初からv4で構築されているので、最新の環境でも安心して使えます。

30代になって思うのは、技術的な負債は早めに返済した方がいいということ。古いバージョンに依存しているライブラリは、いずれマイグレーションが必要になる。

3. shadcn/uiとの完全な互換性

KokonutUIはshadcn/uiのエコシステムを活用している。つまり、既存のshadcn/uiプロジェクトにそのまま追加できる。

CLIもnpx shadcn@latest addをそのまま使えるので、学習コストがほぼゼロ。これはコスパ的に大きい。

4. TypeScriptで型安全

全コンポーネントがTypeScriptで書かれているので、型推論がしっかり効く。propsの補完が効くのは開発効率に直結します。

5. lucide-iconsとの統合

アイコンはlucide-reactを使用。shadcn/uiと同じなので、統一感のあるUIが作れる。

インストール方法

前提条件

Node.js 18以降
Reactプロジェクト（Next.js推奨）
Tailwind CSS v4

セットアップ手順

1. components.jsonの設定

まず、shadcn/uiの初期化がまだなら実行します。

npx shadcn@latest init

次に、components.jsonにKokonutUIのレジストリを追加。

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

2. ユーティリティのインストール

cnユーティリティ関数をインストールします。

npx shadcn@latest add https://kokonutui.com/r/utils.json

これで準備完了。

コンポーネントの追加

# particle-buttonを追加する場合
npx shadcn@latest add @kokonutui/particle-button

# 複数まとめて追加
npx shadcn@latest add @kokonutui/particle-button @kokonutui/animated-card

コンポーネントはcomponents/kokonutui/ディレクトリに配置されます。

モノレポ環境での使用

モノレポの場合は-cフラグでワークスペースパスを指定。

npx shadcn@latest add @kokonutui/particle-button -c ./apps/www

基本的な使い方

ParticleButtonの使用例

import ParticleButton from "@/components/kokonutui/particle-button"

export default function Page() {
  return (
    <ParticleButton>
      クリックしてみて
    </ParticleButton>
  )
}

これだけでアニメーション付きのボタンが使える。自分で実装すると半日かかりそうなものが、1行で済む。時短になる。

アニメーション付きカードの例

import { AnimatedCard } from "@/components/kokonutui/animated-card"

export function CardDemo() {
  return (
    <AnimatedCard className="p-6">
      <h3 className="text-lg font-semibold">タイトル</h3>
      <p className="text-muted-foreground">
        ホバーするとアニメーションが発動します。
      </p>
    </AnimatedCard>
  )
}

shadcn/uiコンポーネントとの併用

KokonutUIはshadcn/uiと共存できるので、必要に応じて使い分けられます。

import { Button } from "@/components/ui/button"  // shadcn/ui
import ParticleButton from "@/components/kokonutui/particle-button"  // KokonutUI

export function ActionButtons() {
  return (
    <div className="flex gap-4">
      <Button variant="outline">キャンセル</Button>
      <ParticleButton>送信</ParticleButton>
    </div>
  )
}

重要なアクションにはParticleButton、通常のアクションには標準のButton、という使い分けができる。

実践的なユースケース

ランディングページのCTA

ランディングページのCTAボタンは、ユーザーの注目を集める必要がある。ParticleButtonを使えば、クリック時のフィードバックが印象的になる。

import ParticleButton from "@/components/kokonutui/particle-button"

export function HeroSection() {
  return (
    <section className="flex flex-col items-center gap-6 py-24">
      <h1 className="text-5xl font-bold">
        次世代のUIを体験しよう
      </h1>
      <p className="text-xl text-muted-foreground">
        美しく、アクセシブルで、高速なコンポーネント集
      </p>
      <ParticleButton size="lg">
        今すぐ始める
      </ParticleButton>
    </section>
  )
}

ダッシュボードのカード

データを表示するカードにアニメーションを加えると、ユーザー体験が向上する。

import { AnimatedCard } from "@/components/kokonutui/animated-card"

interface StatCardProps {
  title: string
  value: string
  change: string
}

export function StatCard({ title, value, change }: StatCardProps) {
  return (
    <AnimatedCard className="p-6">
      <p className="text-sm text-muted-foreground">{title}</p>
      <p className="text-3xl font-bold">{value}</p>
      <p className="text-sm text-green-500">{change}</p>
    </AnimatedCard>
  )
}

export function Dashboard() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <StatCard title="総ユーザー" value="12,345" change="+12%" />
      <StatCard title="アクティブユーザー" value="8,901" change="+8%" />
      <StatCard title="売上" value="¥1,234,567" change="+15%" />
    </div>
  )
}

フォーム送信ボタン

フォームの送信ボタンにアニメーションを付けると、送信完了のフィードバックが分かりやすくなる。

"use client"

import { useState } from "react"
import ParticleButton from "@/components/kokonutui/particle-button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function ContactForm() {
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    // 送信処理
    await new Promise(resolve => setTimeout(resolve, 1000))
    setIsSubmitting(false)
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <Label htmlFor="email">メールアドレス</Label>
        <Input id="email" type="email" placeholder="email@example.com" />
      </div>
      <div>
        <Label htmlFor="message">メッセージ</Label>
        <textarea
          id="message"
          className="w-full min-h-[100px] rounded-md border p-3"
          placeholder="お問い合わせ内容"
        />
      </div>
      <ParticleButton type="submit" disabled={isSubmitting}>
        {isSubmitting ? "送信中..." : "送信する"}
      </ParticleButton>
    </form>
  )
}

shadcn/uiとの違い

正直なところ、KokonutUIはshadcn/uiを置き換えるものではなく、拡張するものです。

項目	KokonutUI	shadcn/ui
アニメーション	標準搭載	自分で実装
Tailwind CSS	v4対応	v3.4以上
コンポーネント数	100+	50+
Motion統合	あり	なし
学習コスト	shadcn/ui知っていればゼロ	Tailwind必須