wafoo-css

基本ボタン

和風グラデーション

ホバーすると光が流れるエフェクトがあります

ステータスボタン

通常カード

シンプルなカードデザインです。コンテンツを整理して表示できます。

スイッチ

レンジ

判子（ハンコ）

ステップ表示

1. 1 完了
2. 2 進行中
3. 3 未着手

タブ

モーダル

カレンダー

テーマを切り替えると、カレンダーの色も自動的に変更されます

スケジュール

アコーディオン

ツールチップ・ポップオーバー

ナビゲーション

ナビゲーションバー

ハンバーガーメニュー

ページネーション付きテーブル

プログレスバー

スピナー

コードブロック

function greet(name) {
  return `こんにちは、${name}さん`;
}

const products = [
  { name: '和紙ノート', price: 1200 },
  { name: '墨汁セット', price: 850 },
  { name: '筆ペン', price: 450 }
];

const total = products.reduce((sum, item) => sum + item.price, 0);
console.log(`合計: ${total}円`);

console.log(greet('世界'));

アバター

空状態

リストグループ

• アクティブな項目 3
• 通常の項目 12
• 別の項目 5
• 無効な項目

スケルトン

区切り線

CSS変数リファレンス

全87個のデザイントークンを視覚的に確認できます

• カラーパレット（伝統色、アクセント、ステータス）
• スペーシング（4pxベースの8pxグリッド）
• タイポグラフィ、シャドウ、ブレークポイント
• コンポーネント固有の変数

コンポーネントリファレンス

全コンポーネントとユーティリティクラスの詳細

• よく使うコンポーネント一覧
• ユーティリティクラス一覧
• 利用可能な全34種類のコンポーネント詳細