@progressive-development/pd-price

Price display and pricing table components with tax calculation.

Features

• Lit 3 & TypeScript – Modern, type-safe web components
• Accessible – WCAG 2.1 compliant, keyboard navigation, ARIA support
• Themeable – CSS Custom Properties for easy customization
• Localized – Built-in i18n support (EN, DE, BE)
• Lightweight – No heavy dependencies, tree-shakeable
• Framework-agnostic – Works with React, Vue, Angular, or vanilla JS
• Multi-Tax Support – Display prices with multiple tax rates (e.g., 7% and 19%) simultaneously
• Localized Tax Information – Context-aware tax labels for different countries and building types
• Discount Banners – Visual discount display with percentage and promotional text
• Auto-Calculating Price Tables – Automatic sum and tax calculation in table footer

Installation

npm install @progressive-development/pd-price

Quick Start

<script type="module">
  import '@progressive-development/pd-price';
</script>

<pd-price value="99.00" currency="EUR"></pd-price>

Components

| Component | Description | |-----------|-------------| | <pd-price> | Single price display with optional discount | | <pd-pricetable> | Price table with line items and totals |

Documentation

📖 Full documentation: pd-components.web.app

License

MIT © PD Progressive Development UG