SCALE — Build Lab
UI部品 · REACT COMPONENT

バッジカウンター

CATEGORYUI部品 TYPEReact Component EFFORT30〜60分 DIFFICULTY
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 通知/メッセージ/カート

バッジカウンター

:LiTarget: 用途

アイコンの右上に「3」「99+」と表示する未読数。

:LiSparkle: 特徴

  • 数表示
  • 99+ 表記
  • アニメーション
  • 色変化

:LiHandPointer: 使い方

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

:LiAlertCircle: 注意事項

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