price

Price

Shows a price in the shopper's locale, with the original price and the percentage saved when it is reduced, and a hint such as tax and shipping.

States: Default

Parts

Part	File	Does
Price	Price.vue	Shows a price, with the original price and discount percentage when reduced.
PriceAmount	PriceAmount.vue	Shows the current price of the product.
PriceRef	PriceRef.vue	Shows the original price of a discounted product.
PriceDiscount	PriceDiscount.vue	Shows the percentage saved against the original price.
PriceHint	PriceHint.vue	Holds a note below the price, such as tax and shipping, which may link on.

Anatomy

<Price>
  <PriceDiscount />
  <PriceRef />
  <PriceAmount />
  <PriceHint />
</Price>

Styling

Part	Recipe
Price	price
Price	price-row
PriceRef	price-strike
PriceDiscount	price-discount
PriceHint	price-hint

Install

Writes 6 files into components/ui/price/. For agents, npx @frontic/ui docs price prints this reference as markdown; the MCP server serves the same.

Installs with it: badge; format
npm packages: class-variance-authority; reka-ui

Built from

Badge

API reference

Price Price.vue

Shows a price, with the original price and discount percentage when reduced. Renders a <span>.

Prop	Type	Default
class	ClassValue	—

size	PriceSize	'md'

align	PriceAlign	'start'

price*	PriceType	—

locale	string	—

showRef	boolean	true

showDiscount	boolean	true

showHint	boolean	true

refLabel	string	'Was'

amountLabel	string	'Now'

Slot	Slot props
hint	—

Recipe price	Sets
base: price	4 properties

size: sm	2 properties

size: mddefault	2 properties

size: lg	2 properties

align: startdefault	2 properties

align: end	2 properties

Recipe price-row	Sets
base: price-row	1 property

Parts

Anatomy

Styling

Install

Built from

API reference

Price Price.vue

PriceAmount PriceAmount.vue

PriceRef PriceRef.vue

PriceDiscount PriceDiscount.vue

PriceHint PriceHint.vue