最近瀏覽軌道
水平滑動的最近瀏覽商品列，邊緣漸隱與吸附滾動。
水平捲動的最近瀏覽商品軌道：商品小卡以 scroll-snap 吸附排列，兩端依捲動位置漸隱、左右箭頭平滑捲動，卡片進場逐張浮現、hover 浮起，適合放在商品詳情頁或購物車底部作為召回區塊。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
168
<RecentlyViewedRail />
安裝
npx shadcn@latest add https://webberui.com/r/recently-viewed-rail.json或在 components.json 設定 registries 後，改用 @webberui/recently-viewed-rail 安裝。
安裝依賴後，從 registry JSON（/r/recently-viewed-rail.json 的 files[0].content）複製 recently-viewed-rail.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { RecentlyViewedRail } from "@/components/ui/recently-viewed-rail";
<RecentlyViewedRail
items={[
{
id: "p1",
name: "無線降噪耳機",
price: "NT$4,990",
hue: 222,
tag: "3C",
viewedAt: "5 分鐘前",
},
{ id: "p2", name: "帆布托特包", price: "NT$1,280", hue: 36 },
]}
onItemClick={(item) => console.log(item.name)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | RecentlyViewedItem[] | — | 最近瀏覽的商品清單，每項含 id、name、price、hue，及可選的 tag、viewedAt |
title | string | "最近瀏覽" | 區塊標題文字 |
showArrows | boolean | true | 是否顯示左右捲動箭頭 |
cardWidth | number | 168 | 單張商品卡的寬度（px） |
onItemClick | (item: RecentlyViewedItem, index: number) => void | — | 點擊商品卡時的回呼 |
className | string | — | 透傳到最外層容器 |
可及性
- 商品卡為原生
<button>，可用 Tab 聚焦、Enter / Space 觸發，並附 focus-visible 環形外框 - 左右箭頭具
aria-label（向左捲動／向右捲動），該側不可捲動時淡出並移出 Tab 順序 - 使用者系統開啟「減少動態效果」時，停用進場 stagger 與 hover 浮起動畫，箭頭捲動改為瞬間跳轉
- 漸層假商品圖與裝飾層皆標記
aria-hidden，商品名稱與價格以純文字提供給輔助科技 - 區塊以
<section aria-label>命名，商品列使用語意化的<ul>/<li>結構