React 對話框、抽屜與吐司元件

對話框、抽屜、彈出提示、吐司、載入骨架。覆蓋層的難點不在外觀而在焦點管理與可及性——這一類的元件都處理了焦點鎖定、Escape 關閉與捲動鎖定。

共 27 個,其中 23 個免費、不需登入即可安裝。

  • 卡片無縫 morph 成彈窗(shared layout)

  • Drawer免費

    多方向抽屜,拖曳關閉 + 慣性

  • 靈動島式通知堆疊

  • 堆疊收合通知(hover 展開)

  • 跟隨游標的彈性提示框

  • 預載動畫三款:文字/階梯/像素

  • 路由過場(View Transitions + 覆蓋揭示)

  • 成功慶祝粒子/彩帶效果

  • 彈簧物理自訂游標,含 blob 變形跟隨

  • 游標移動產生流體潑濺與漣漪(fluid sim)

  • 於點擊處迸發火花/粒子的回饋效果

  • 四角準星游標鎖定並框住目標元素

  • 長任務逐步勾選的清單式載入指示

  • Stepper免費

    獨立的多步驟進度 stepper 指示器

  • 動畫百分比環形進度/量表

  • Accordion免費

    帶彈跳過渡的動畫手風琴/FAQ 展開

  • hover 錨點時浮出動態網站預覽卡

  • 可客製的動畫自訂捲軸

  • 帶倒數進度環的復原提示條,時間到自動確認動作

  • 列表項左右滑出封存/刪除操作,過閾值直接執行

  • 點擊反應按鈕噴發一串上飄表情粒子,連點加倍

  • 行動端下拉更新容器:手勢阻尼與門檻、箭頭隨拉距旋轉變 spinner、onRefresh 回傳 Promise、完成打勾回收,桌機提供按鈕後備

  • Cookie 同意橫幅+偏好設定彈窗:必要/分析/行銷分類開關、全接受/全拒絕、同意狀態物件回呼與 localStorage 記憶

  • Popover免費

    按鈕觸發的錨定浮層:依 side/align 定位並在視窗邊緣自動翻轉,淡入、微縮放、沿方向滑入,焦點進出與點外關閉完整處理。

  • Tooltip免費

    錨定在元素旁的提示:hover 或 focus 延遲開啟,同群組內快速移動時立即切換,淡入微縮放並在邊緣翻轉,附箭頭。

  • 在游標位置開啟的右鍵選單:子選單延遲展開、核取與單選項、快捷鍵標示,邊緣自動翻轉,觸控長按也能開啟。

  • 需要明確回應的確認對話框:遮罩淡入、面板微縮放進場,焦點鎖定與捲動鎖定,危險操作可改為長按填滿才觸發。