最近見つけた小規模だけど洗練された React UI コンポーネントライブラリ —— SmoothUI。Star 数は 718 だけど、品質は大手製品に引けを取らない。

プロジェクト概要

SmoothUI は「スムーズなアニメーション」をテーマにした React コンポーネント集。React + Tailwind CSS + Motion をベースに構築されており、すべてのコンポーネントにシルキーなトランジション効果が組み込まれている。

GitHub: https://github.com/educlopez/smoothui

主な特徴

  • すぐ使えるアニメーション — Motion ベース、追加設定不要
  • Tailwind CSS との深い統合 — スタイルカスタマイズが非常に簡単
  • ダークモード対応 — コンポーネントは light/dark 切り替えをデフォルトでサポート
  • TypeScript 型定義完備 — コード補完が効く
  • shadcn/ui 互換 — shadcn CLI で直接インストール可能

インストール方法

方法1：SmoothUI CLI（推奨）

npx smoothui@latest add button

方法2：shadcn CLI

npx shadcn add https://smoothui.dev/r/button.json

方法3：手動コピー

公式ドキュメントからソースコードをコピーするだけで、依存関係ゼロでインストールできる。

コンポーネント一覧

カテゴリコンポーネント
UI 基礎Button, Card, Input, Badge
インタラクティブModal, Drawer, Tooltip, Dropdown
レイアウトGrid, Stack, Container
ユーティリティSkeleton, Spinner, Toast

すべてのコンポーネントにエレガントな入場アニメーションとインタラクションフィードバックが付いている。

使用例

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

export default function Page() {
  return (
    <Card className="p-6">
      <h2 className="text-xl font-bold mb-4">SmoothUI へようこそ</h2>
      <Button variant="primary">アニメーションを体験</Button>
    </Card>
  );
}

Button のクリック時のリップル効果、Card のホバー時の浮き上がりアニメーションは、すぐに使える状態で提供されている。

なぜおすすめするのか？

  1. 小さくて洗練されている — 全方位に手を広げず、各コンポーネントを丁寧に磨き上げている
  2. ドキュメントが親切 — 公式サイトには完全なコンポーネントデモと Props 説明がある
  3. 継続的に更新 — 3 日前にもコミットがあった
  4. MCP 対応 — AI アシスタントから MCP プロトコルで呼び出し可能

適したシーン

  • 洗練された UI を素早く構築したい side project
  • アニメーションにこだわりたいけど、Motion コードを書きたくない
  • shadcn/ui を既に使っていて、さらに動的なコンポーネントを追加したい

退屈な静的コンポーネントに飽きたら、SmoothUI を試してみて。インターフェースを動かそう。