Price

A locale-aware price display component for e-commerce and SaaS interfaces. Supports currency formatting, strike-through compare-at prices (RRP / UVP / MSRP), unit prices (Grundpreis) for EU price-marking compliance, delta indicators, and size variants.

#Basic Usage

<x-wirekit::price :amount="29.99" currency="USD" />

#Compare-At Price (RRP / UVP / MSRP)

Show the previous or recommended retail price as a strike-through alongside the current price. The strike-through value answers the question "what was this before?":

• RRP — Recommended Retail Price (UK)
• UVP — Unverbindliche Preisempfehlung (Germany)
• MSRP — Manufacturer's Suggested Retail Price (US)

The base prop carries this comparison value. It does not mean "base price" in the unit-price sense — see Unit Price (Grundpreis) below for that.

<x-wirekit::row gap="lg">
    <x-wirekit::price :amount="19.99" :base="29.99" currency="USD" />
    <x-wirekit::price :amount="49" :base="79" currency="EUR" />
</x-wirekit::row>

#Unit Price (Grundpreis)

For pre-packaged goods sold by weight, volume, length, or area, EU and UK price-marking law requires the per-unit price to be displayed alongside the selling price. In Germany this is the Grundpreis per PAngV § 4; in the UK it is the unit price per the Price Marking Order 2004; the EU baseline is Directive 98/6/EC.

Pass unitPrice (numeric, same currency as amount) and unitMeasure (the reference unit label) — the component renders them as (€8.99 / L) next to the main price, in the same currency, in the same field of vision.

<x-wirekit::price :amount="4.49" :unit-price="8.98" unit-measure="L" currency="EUR" />

<x-wirekit::price :amount="12.99" :unit-price="51.96" unit-measure="kg" currency="EUR" />

<x-wirekit::price :amount="3.49" :base="4.99" :unit-price="6.98" unit-measure="L" currency="EUR" />

#Delta Indicator

Attach a percentage or absolute change indicator:

<x-wirekit::row gap="lg">
    <x-wirekit::price :amount="24.99" currency="USD" :delta="-20" />
    <x-wirekit::price :amount="34.99" currency="USD" :delta="10" />
</x-wirekit::row>

<x-wirekit::price :amount="120" currency="USD" :delta="-30" delta-format="absolute" />

#Size Variants

<x-wirekit::stack gap="md">
    <x-wirekit::price :amount="9.99" currency="USD" size="xs" />
    <x-wirekit::price :amount="9.99" currency="USD" size="sm" />
    <x-wirekit::price :amount="9.99" currency="USD" size="md" />
    <x-wirekit::price :amount="9.99" currency="USD" size="lg" />
    <x-wirekit::price :amount="9.99" currency="USD" size="xl" />
</x-wirekit::stack>

#Minor Units (Cents)

Pass amounts in minor units (cents) and let the component convert:

<x-wirekit::price :amount="2999" currency="USD" :minor-units="true" />

#With Suffix Slot

Add recurring interval text or other context:

<x-wirekit::price :amount="12" currency="USD" size="lg">
    <x-slot:suffix>/ month</x-slot:suffix>
</x-wirekit::price>

#Full Sale Example

<x-wirekit::price :amount="49.99" :base="79.99" currency="USD" :delta="-38" size="lg">
    <x-slot:suffix>/ year</x-slot:suffix>
</x-wirekit::price>

#Props

#Slots

#Accessibility

• Root <span> carries an aria-label combining all visible parts (amount, compare-at, delta, unit price)
• Strike-through compare-at price uses <del> element for semantic meaning
• <bdi> wraps formatted values for correct RTL rendering
• Unit price suffix carries aria-hidden="true" so the same information is not read twice — it is already woven into the wrapper's aria-label

#Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

#Pitfalls

• Don't pass an unformatted number to :value. The component formats with the active locale's decimal/thousand separators — passing 19.99 is correct; passing "19,99" (already formatted) double-formats.

#Design Tokens