Cards — Commerce

Product, pricing, order, and review cards for e-commerce.

Commerce cards for storefronts and checkout flows. The brand colour maps to --primary, so CTAs, badges, and the featured pricing border follow the active theme.

Preview

−20%

Ceramics

Stoneware Mug

$28 $35 4.9

Studio Popular

$24 / month

Billed annually · per seat

Unlimited cards

All 18 themes

Figma + code export

Priority support

#CS-2041 On the way

Arrives today

Estimated 4:30 – 5:00 PM

Ordered

Shipped

Out

Delivered

Sam Okafor

Verified purchase · 3 days ago

5.0

Swapped our whole admin to the Carbon theme in a day. The cards just snapped into the new look — zero rework.

Helpful (42) Reply

Install

Each card installs on its own:

bun x bosia@latest add block cards/product
bun x bosia@latest add block cards/pricing
bun x bosia@latest add block cards/order
bun x bosia@latest add block cards/review

Each pulls the @lucide/svelte npm package for icons.

Usage

<script lang="ts">
	import Pricing from "$lib/blocks/cards/pricing/block.svelte";
</script>

<Pricing featured />

The pricing card accepts a featured prop (default true) that toggles the highlighted border and primary CTA. Like and add-to-bag toggles on the product card are cosmetic local $state.