コンポーネントテーマモードスイッチ
ライト・ダーク・システムを3つのアイコンで選ぶ、ヘッダー向けの小さなスイッチです。丸いつまみが選んだモードへ滑り、ダークを選ぶと pill 全体が暗くなります。選んだ値を返すだけなので、テーマの切り替えは自前の仕組みにつなぎます。ラベルとアイコンを差し替えて、ヘッダーや設定メニューにそのまま置けます。
Verified Technical Spec
- アニメーション
- CSS / Tailwind
- 対応環境
- 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