DesignLayer
センタープラス・タブバー
コンポーネント一覧へ戻る
これは何か
淡いグレーのキャンバスに浮かぶ白い pill 型タブバーです。ホーム・検索・メッセージ・通知・プロフィールを並べ、選択中の位置でバーを半円にえぐる円がスライドします。ラベル・アクセント色・リンクを差し替えて、アプリやモバイル向けサイトの下端ナビにそのまま置けます。
ガイドを読む
コンポーネント
センタープラス・タブバー
淡いグレーのキャンバスに浮かぶ白い pill 型タブバーです。ホーム・検索・メッセージ・通知・プロフィールを並べ、選択中の位置でバーを半円にえぐる円がスライドします。ラベル・アクセント色・リンクを差し替えて、アプリやモバイル向けサイトの下端ナビにそのまま置けます。
確認しています…
ライブプレビューVerified Technical Spec
- アニメーション
- CSS / Tailwind
- Reduced motion
- 標準モーション
- キーボードフォーカス
- ソース上では未検出
- 対応環境
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix 対応
含まれるもの
- ソースを Cursor / Claude に渡してエージェントに組み込める
- React · TypeScript · Tailwind CSS の完成 UI
依存パッケージ
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
技術スタック
- React
- TypeScript
- Tailwind CSS
バージョン 1.0.0