コンポーネント一覧へ戻る

ソースフローカード React コンポーネント

これは何か

左の3行（Banks・Ledger・Billing）から細い線が伸び、光る点が右の白いハブへ流れ込みます。ハブの中では点線のスピナーが回ります。背景は塗らず、暗い面の上に置きます。行のラベルとアイコンを差し替えて、フィンテックやデータ連携の機能グリッドにそのまま置けます。

ほかのコンポーネント

一覧を見る →

同期パルスカード

ステータスパイプラインカード

デプロイティックカード

アップタイムシグナルカード

使用量メーターカード

イベントストリームカード

コンポーネント

ソースフローカード

左の3行（Banks・Ledger・Billing）から細い線が伸び、光る点が右の白いハブへ流れ込みます。ハブの中では点線のスピナーが回ります。背景は塗らず、暗い面の上に置きます。行のラベルとアイコンを差し替えて、フィンテックやデータ連携の機能グリッドにそのまま置けます。

確認しています…

ライブプレビュー

Verified Technical Spec

アニメーション: CSS / Tailwind
Reduced motion: 確認済み
キーボードフォーカス: ソース上では未検出
対応環境: Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix 対応

含まれるもの

ソースを Cursor / Claude に渡してエージェントに組み込める
React · TypeScript · Tailwind CSS · Lucide の完成 UI

依存パッケージ

React 19.0.0
Typescript 5.7.2
Tailwindcss 3.4.16
Lucide-react 1.23.0

技術スタック

React
TypeScript
Tailwind CSS
Lucide

バージョン 1.0.0