React・Tailwind CSS・Motion で作るスムーズなアニメーション付き UI コンポーネント集です。
中辛 の解説
SmoothUI は、React プロジェクトに組み込む UI コンポーネント集です。アニメーション機能（Motion で駆動）と Tailwind CSS によるレスポンシブデザインを備えており、SiriOrb（色が遷移するアニメーション球体）、ScrollableCardStack（スムーズにスクロールするカードスタック）、AnimatedInput（アニメーション付き入力欄）など 20 以上のコンポーネントが用意されています。Next.js・TypeScript プロジェクトを想定した設計で、依存関係の自動解決、パス別名の自動検出、複数インストール方法（SmoothUI CLI・shadcn CLI・手動コピー）に対応しています。shadcn レジストリシステムと互換性があり、MCP 対応により Claude などの AI アシスタントからも利用できます。
こんなリポジトリです
こんなときに便利です
- Next.js で構築する SPA に、アニメーション効果の高い入力フォーム・カードスタック・ダイナミックアイランドを追加する場合
- 既存の Tailwind CSS プロジェクトにアクセシビリティ対応済みで光学的にスムーズなコンポーネントを組み込みたい場合
- Claude・Cursor などの AI アシスタント経由で自動的にコンポーネントを提案・インストールさせたい場合
主な機能
ほかとの違い
shadcn の公式レジストリシステムに対応し、MCP サーバを通じて AI アシスタントからの自動インストール・提案が可能です。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- Node.js（npm・pnpm・yarn・bun のいずれか）
- tsconfig.json のパス別名設定（@/* → ./src/* など）
- React 18 以上
すぐに始める
- SmoothUI CLI でコンポーネントをインストールしてください。
npx smoothui-cli add siri-orb
- コンポーネントをインポートして使用します。
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
export default function App() {
return <SiriOrb size="200px" />;
}
- または、shadcn CLI でインストールすることもできます。
npx shadcn@latest add @smoothui/siri-orb
- 手動インストールの場合は、まず依存パッケージをインストールしてください。
pnpm add motion tailwindcss lucide-react clsx tailwind-merge
- lib/utils/cn.ts ユーティリティを作成します。
mkdir -p lib/utils
// lib/utils/cn.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
- components/smoothui/ui/ ディレクトリからコンポーネントファイルをコピーします。
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try educlopez/smoothui
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2024 年に作成
「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/educlopez/smoothui)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る