票根卡片
帶打孔虛線與側邊缺口的票券卡片，點擊可撕開票根。
主票與副券兩段式票券卡片，交界處以半圓缺口與打孔虛線模擬真實票根；點擊副券即沿打孔線撕開，旋轉飄落消失並在主票蓋上入場戳章，適合活動門票、優惠券與登機證等情境。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
128
12
<TicketStubCard />
安裝
npx shadcn@latest add https://webberui.com/r/ticket-stub-card.json或在 components.json 設定 registries 後，改用 @webberui/ticket-stub-card 安裝。
安裝依賴後，從 registry JSON（/r/ticket-stub-card.json 的 files[0].content）複製 ticket-stub-card.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { TicketStubCard } from "@/components/ui/ticket-stub-card";
<TicketStubCard
stub={<span className="font-bold">A-12</span>}
onTear={() => console.log("已撕開！")}
>
<h3 className="text-xl font-bold">月光下的爵士之夜</h3>
<p className="text-sm text-neutral-500">2026/08/22 19:30</p>
</TicketStubCard>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 主票區內容（活動名稱、時間、地點等） |
stub | React.ReactNode | — | 副券區內容（座位、票號等） |
onTear | () => void | — | 副券被撕開時觸發的回呼 |
torn | boolean | — | 受控的撕開狀態；未提供時由元件內部管理 |
stubWidth | number | 128 | 副券寬度（px） |
notchRadius | number | 12 | 打孔半圓缺口的半徑（px） |
tearHint | string | "點擊撕下" | 副券頂部的撕開提示文字 |
stampText | string | "已入場" | 撕開後蓋在主票上的戳章文字，空字串可隱藏 |
showBarcode | boolean | true | 是否在副券底部顯示裝飾條碼 |
className | string | — | 透傳到最外層容器 |
可及性
- 副券為原生
button元素，可用鍵盤 Tab 聚焦並以 Enter / Space 撕開，附focus-visible焦點環 - 使用者系統開啟「減少動態效果」時，撕開改為單純淡出，不做旋轉飄落動畫
- 撕開後的戳章帶
role="status"，輔助科技會朗讀入場狀態變化 - 條碼、打孔虛線與紙質紋理皆為裝飾性元素，以
aria-hidden對輔助科技隱藏