SCALE — Build Lab
UI部品 · REACT COMPONENT

ゲージメーター

CATEGORYUI部品 TYPEReact Component EFFORT60〜120分 DIFFICULTY
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 達成率
  • 健康スコア
  • 満足度

ゲージメーター

:LiTarget: 用途

半円ゲージで進捗・スコアを表現。KPIダッシュボード定番。

:LiSparkle: 特徴

  • 半円表示
  • 色変化
  • アニメーション
  • 中央数値

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加