これは何か

暗い抽象彫刻の壁紙を1画面いっぱいに敷き、その上にガラスの縦型サイドバーを置くナビです。macOS 風の赤黄緑ドット、中央のブランド、MENU とセカンダリ項目、下部のアカウント行を frosted panel にまとめます。背景写真・ブランド名・メニュー文言・アバターとアクセント色を差し替えて、ダッシュボードやソーシャル系 UI にそのまま置けます。

ガイドを読む

ほかのコンポーネント

一覧を見る →

コンポーネント

ガラスサイドバーナビ

確認しています…

ライブプレビュー

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 · 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