# Commerce Promo Builder

Online store admin panel to define coupons and promotions with a cart preview.

- id: `commerce-promo-builder`
- Page: https://agentic-ui-kit.com/components/commerce-promo-builder
- Live preview: https://agentic-ui-kit.com/live/component/commerce-promo-builder

## Install

```bash
agentic-ui add commerce-promo-builder
npx shadcn@4.17.0 add @agentic-ui/commerce-promo-builder
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** discount-rule-editor, percentage-fixed-bxgy-free-shipping-rules, rule-scope-cart-or-category, minimum-subtotal-conditions, percentage-cap, stackable-or-best-rule-resolution, live-cart-preview, per-line-discount-breakdown, customer-facing-message-preview, inline-validation-and-error-state, rule-enable-disable, add-remove-rules, empty-state, keyboard-navigation, responsive-two-column-layout
- **Intents:** create-edit, configure, explore-detail
- **Suits domains:** ecommerce, saas, billing, marketing
- **Interaction:** add-remove-rule, edit-rule-fields, toggle-rule, select-scope, live-preview, save, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** online store admin panel to define coupons and promotions with a cart preview, discount configurator by category or whole cart with a maximum cap and minimum subtotal, editor for buy-x-get-y and free shipping campaigns with a simulated sample order, marketing tool to validate promo codes before publishing them
- **Avoid when:** applying a coupon from the customer checkout (use billing-checkout-flow), managing base catalog prices (use ecommerce-product-editor)
- **Preserve when adapting:** rule-editor-list-layout, live-preview-panel, validation-and-error-state, rule-status-badges, accessible-live-announcements
- **Replace when adapting:** discount-engine-rules, sample-cart-data, currency-and-locale, save-endpoint, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, input, label, select, switch, separator, table, alert
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives