promo-code

Promo Code

Voucher card with a code field and apply button, removable chips for applied promo codes and gift cards, a confirmation notice, and the order total after deductions.

States: Default

Parts

Part	File	Does
PromoCode	PromoCode.vue	Lets the shopper apply promo codes and shows the discounts they take off the order.
PromoCodeField	PromoCodeField.vue	The promo code field with its hint, the applied codes as removable chips and an optional notice; PromoCode's body, for placing inside another summary.

Anatomy

<PromoCode>
  <PromoCodeField />
</PromoCode>

Styling

Part	Recipe
PromoCode	hint
PromoCode	heading

Install

Writes 4 files into components/sections/promo-code/. For agents, npx @frontic/ui docs promo-code prints this reference as markdown; the MCP server serves the same.

Installs with it: alert; badge; card; cart; field; input-group; price; separator
npm packages: @lucide/vue

Built from

Alert Badge Card Field Input Group Price Separator

API reference

PromoCode PromoCode.vue

Lets the shopper apply promo codes and shows the discounts they take off the order.

Prop	Type	Default
subtotal*	PriceType	—

applied	AppliedDiscount[]	[]

notice	PromoNotice	—

title	string	'Promo code'

description	string	—

codeLabel	string	'Code'

placeholder	string	'Enter a code'

applyLabel	string	'Apply'

hint	string	—

removeLabel	((label: string) => string)	`Remove ${label}`

subtotalLabel	string	'Subtotal'

totalLabel	string	'To pay'

minusSign	string	MINUS_SIGN

locale	string	—

surface	'raised' \| 'bare'	'raised'

class	ClassValue	—

modelValue	string	''

Event	Payload
update:modelValue	value: string

remove	code: AppliedDiscount

apply	code: string

Data attribute	Values
data-surface	'raised' \| 'bare'

Recipe hint	Sets
base: hint	2 properties

Recipe heading	Sets
base: heading	1 property

PromoCodeField PromoCodeField.vue

Example