React 對話框、抽屜與吐司元件
對話框、抽屜、彈出提示、吐司、載入骨架。覆蓋層的難點不在外觀而在焦點管理與可及性——這一類的元件都處理了焦點鎖定、Escape 關閉與捲動鎖定。
共 27 個,其中 23 個免費、不需登入即可安裝。
卡片無縫 morph 成彈窗(shared layout)
- Drawer免費
多方向抽屜,拖曳關閉 + 慣性
靈動島式通知堆疊
堆疊收合通知(hover 展開)
跟隨游標的彈性提示框
預載動畫三款:文字/階梯/像素
路由過場(View Transitions + 覆蓋揭示)
成功慶祝粒子/彩帶效果
彈簧物理自訂游標,含 blob 變形跟隨
游標移動產生流體潑濺與漣漪(fluid sim)
於點擊處迸發火花/粒子的回饋效果
四角準星游標鎖定並框住目標元素
長任務逐步勾選的清單式載入指示
- Stepper免費
獨立的多步驟進度 stepper 指示器
動畫百分比環形進度/量表
帶彈跳過渡的動畫手風琴/FAQ 展開
hover 錨點時浮出動態網站預覽卡
可客製的動畫自訂捲軸
帶倒數進度環的復原提示條,時間到自動確認動作
列表項左右滑出封存/刪除操作,過閾值直接執行
點擊反應按鈕噴發一串上飄表情粒子,連點加倍
行動端下拉更新容器:手勢阻尼與門檻、箭頭隨拉距旋轉變 spinner、onRefresh 回傳 Promise、完成打勾回收,桌機提供按鈕後備
Cookie 同意橫幅+偏好設定彈窗:必要/分析/行銷分類開關、全接受/全拒絕、同意狀態物件回呼與 localStorage 記憶
- Popover免費
按鈕觸發的錨定浮層:依 side/align 定位並在視窗邊緣自動翻轉,淡入、微縮放、沿方向滑入,焦點進出與點外關閉完整處理。
- Tooltip免費
錨定在元素旁的提示:hover 或 focus 延遲開啟,同群組內快速移動時立即切換,淡入微縮放並在邊緣翻轉,附箭頭。
在游標位置開啟的右鍵選單:子選單延遲展開、核取與單選項、快捷鍵標示,邊緣自動翻轉,觸控長按也能開啟。
需要明確回應的確認對話框:遮罩淡入、面板微縮放進場,焦點鎖定與捲動鎖定,危險操作可改為長按填滿才觸發。