Coupon cardhospitality
Ticket-shaped value card for amount or percent coupons with minimum spend, expiry, usage state and apply toggle.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/coupon-cardDefault
coupon-card-demo.tsx
import { CouponCard } from "@/components/ui/coupon-card";
const now = Date.parse("2026-07-01T12:00:00Z");const soon = Date.parse("2026-07-04T12:00:00Z");const later = Date.parse("2026-09-01T12:00:00Z");
export default function CouponCardDemo() { return ( <div className="flex max-w-xl flex-col gap-3"> <CouponCard title="Welcome offer" value={{ type: "amount", amount: 1000 }} currency="USD" minSpend={10000} expiresAt={soon} now={now} timeZone="UTC" /> <CouponCard title="Weekend special" value={{ type: "percent", percent: 15 }} expiresAt={later} now={now} timeZone="UTC" defaultSelected /> <CouponCard title="Member only" value={{ type: "percent", percent: 20 }} state="locked" lockedReason="Sign in to use" /> <CouponCard title="Used offer" value={{ type: "amount", amount: 500 }} currency="USD" state="used" /> </div> );}