Gift Voucher Card

Installation

pnpm dlx shadcn@latest add @cleverui/gift-voucher-card

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { GiftVoucherCard } from '@/components/blocks/gift-voucher-card'

Exampletsx

import { GiftVoucherCard } from '@/components/blocks/gift-voucher-card'

export default function GiftVoucherCardDemo() {
  return (
    <GiftVoucherCard
      eyebrow="Gift vouchers"
      heading="Give someone an afternoon"
      denominations={['$75', '$150', '$250']}
      fromLine="From someone lovely"
      cta={{ label: 'Purchase a voucher', href: '#voucher' }}
      note="Delivered by email within the hour · valid for three years"
    />
  )
}

API reference

GiftVoucherCard accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Gift vouchers'`	–
`heading`	`string`	`'Give someone an afternoon'`	–
`denominations`	`string[]`	`['$75', '$150', '$250']`	preformatted amounts shown as selectable pills
`fromLine`	`string`	`'From someone lovely'`	sentiment line set in italic serif on the voucher face
`cta`*	`{ label: string; href: string }`	–	–
`note`	`string`	`'Delivered by email within the hour · valid for three years'`	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Booking Ritual CTA

An appointment CTA framed as the start of a ritual, a light serif invitation, a softened primary action, and a quiet phone path beside it. Unhurried, sensory, certain of itself.

Treatment Menu

A spa treatment menu set like a printed ritual card, serif italic treatment names, duration and price in quiet tabular figures, delicate hairline leaders. Sensory and unhurried.

Before & After Care

A pre and post appointment care card, two gentle columns headed before you arrive and afterwards, guidance lines in italic serif, and one primary keyline. Practical instructions, beautifully set.

Membership Glow

Beauty memberships with serif tier names like The Monthly Ritual, included treatments as airy lists, per-month prices in tabular figures, and a soft masked halo behind the signature tier.

Quiet Hours

Sensory-friendly quiet hours, weekly low-stimulation session times beside a gentle list of what changes, from dimmed lights to no dryers. A React and Tailwind panel for salons.

Ritual Steps

A signature treatment unfolded as a numbered ritual, large serif numerals, italic sensory step descriptions, and durations in quiet mono. The sequence reads like a printed ceremony card.

Frequently asked questions

How do I install the Gift Voucher Card component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/gift-voucher-card`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Gift Voucher Card require?

Gift Voucher Card uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Gift Voucher Card to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code