Premium-UI
Back to Catalog

Commerce Components

18 Components

Polished cards, carts, order timelines, and checkout summary elements for modern e-commerce SaaS platforms.

Billing Address

Digital Delivery · Accountless Instant Token

01 / COMMERCEPremium

Address Selection Card

Address Selection Card primitive crafted with Tailwind CSS and React TSX.

CommerceSaaSResponsive
Tailwind CSS + TSXView details
Billing Records
August 2026 Invoice
ID: INV-9801
$50.00
02 / COMMERCEPremium

Invoices Table List

Clean breakdown detailing active invoice dates, IDs, and financial totals.

CommerceData
Tailwind CSS + TSXView details
⚡

Annual Premium

$50.00 / year
1
03 / COMMERCEPremium

Commerce Cart Row

Compact shopping row detailing item quantities, prices, descriptions, and interactive plus/minus steppers.

CommerceE-commerce
Tailwind CSS + TSXView details
⚡

Premium Subscription

$50.00
04 / COMMERCEPremium

Cart Item Line

Cart Item Line primitive crafted with Tailwind CSS and React TSX.

CommerceSaaSResponsive
Tailwind CSS + TSXView details
Subtotal $50.00
Taxes $0.00
Total $50.00
05 / COMMERCEPremium

Checkout Order Receipt

Checkout Order Receipt primitive crafted with Tailwind CSS and React TSX.

CommerceSaaSResponsive
Tailwind CSS + TSXView details

Order Breakdown

Premium-UI UI Premium Annual $50.00
Total Due $50.00
Secure Paystack hmac verification is active.
06 / COMMERCEPremium

Checkout Summary Card

A detailed breakdown card detailing item quantities, taxes, custom discount items, and billing cycles.

CommerceE-commerceDashboard
Tailwind CSS + TSXView details
07 / COMMERCEPremium

Coupon Input Box

An elegant discount coupon code entry field with instant visual validation indicators (Valid, Active, Invalid).

CommerceE-commerceForms
Tailwind CSS + TSXView details
Paystack Secured⚡
•••• •••• •••• 9804
Alex Lemur12 / 29
3D Secure verification will trigger.
08 / COMMERCEPremium

Secured Credit Card

Interactive card visualization showing mockup numbers and encryption verification states.

CommerceE-commerce
Tailwind CSS + TSXView details
PREMIUM20

Apply at checkout for 20% off.

09 / COMMERCEPremium

Discount Promo Banner

Discount Promo Banner primitive crafted with Tailwind CSS and React TSX.

CommerceSaaSResponsive
Tailwind CSS + TSXView details
10 / COMMERCEPremium

Express Checkout Button

Express Checkout Button primitive crafted with Tailwind CSS and React TSX.

CommerceSaaSResponsive
Tailwind CSS + TSXView details

OrderStatus

Payment Processed

Today, 2:14 PM

License Key Generating

In progress...
11 / COMMERCEPremium

Order Status Tracker

A chronological progress tracker detail tracking delivery status (Processed, Shipped, Delivered) with active indicators.

CommerceE-commerceSaaS
Tailwind CSS + TSXView details
Paystack Card / Transfer
12 / COMMERCEPremium

Payment Method Selector

Payment Method Selector primitive crafted with Tailwind CSS and React TSX.

CommerceSaaSResponsive
Tailwind CSS + TSXView details
⚡
DEV CARD
4.9

Premium-UI Pro Package

$50.00
13 / COMMERCEPremium

Product Card

A highly polished commercial product card displaying dynamic tags, rating indicators, zoom overlays, and shopping triggers.

CommerceE-commerceSaaS
Tailwind CSS + TSXView details

V1 release details: accountless delivery, Brevo support, 50 catalog elements.

14 / COMMERCEPremium

Version Feature Matrix

Interactive tabbed cards detailing differences across product build versions.

CommerceMarketing
Tailwind CSS + TSXView details

Annual Pro

$50/yr
  • All 150 components
  • Priority updates
15 / COMMERCEPremium

Product Price Card

Product Price Card primitive crafted with Tailwind CSS and React TSX.

CommerceSaaSResponsive
Tailwind CSS + TSXView details
Save 20% on Annual UpgradesUse promo code PREMIUM20.
16 / COMMERCEPremium

Discount Coupon Banner

An eye-catching header promotional banner display block.

CommerceMarketing
Tailwind CSS + TSXView details
Cart Items(1)
⚡

Premium-UI Pro Annual

$50.00 / year
17 / COMMERCEPremium

Shopping Cart Draw

An elegant fly-out shopping cart sidebar listing cart entries, subtotals, quantity adjusters, and checkout actions.

CommerceE-commerceSaaS
Tailwind CSS + TSXView details
18 / COMMERCEPremium

Micro-interaction Heart

Interactive heart button with toggle states and smooth spring micro-interaction scale animations.

CommerceInteractive
Tailwind CSS + TSXView details