§14-01Commerce
Pricing table (toggle 月/年)
プランの価格と機能を列で並べ、月額と年額を切り替える。
利用者が自分に合うプランを選べるようにする。年額の割安さを伝えつつ、プラン間の違いを比べさせたいときに使う。
実装のポイント
月額/年額トグルでは年額の割引率と月あたり換算を併記する。推奨プランは強調しつつ、各列の機能行を揃えて横比較しやすくする。
- 特徴
- 状態管理
- デモで使っているもの
- shadcn/ui
- lucide-react
§14-01Commerce
プランの価格と機能を列で並べ、月額と年額を切り替える。
利用者が自分に合うプランを選べるようにする。年額の割安さを伝えつつ、プラン間の違いを比べさせたいときに使う。
月額/年額トグルでは年額の割引率と月あたり換算を併記する。推奨プランは強調しつつ、各列の機能行を揃えて横比較しやすくする。