blatui

Components

Product Card

An e-commerce product card with image, badge, rating, price and an add-to-cart action.

php artisan blatui:add product-card
Black ergonomic office chair on a light background

Office

Aeron Ergonomic Chair

$349.00 
<x-ui.product-card
    class="w-full max-w-xs"
    title="Aeron Ergonomic Chair"
    href="#"
    category="Office"
    image="https://picsum.photos/seed/aeron/600/600"
    image-alt="Black ergonomic office chair on a light background"
    :price="349"
/>

Sale

Over-ear wireless headphones in matte black
Sale

Audio

Wireless Noise-Cancelling Headphones

$179.00 was $249.00 save -28% 
<x-ui.product-card
    class="w-full max-w-xs"
    title="Wireless Noise-Cancelling Headphones"
    href="#"
    category="Audio"
    image="https://picsum.photos/seed/headphones/600/600"
    image-alt="Over-ear wireless headphones in matte black"
    badge="Sale"
    :price="179"
    :compareAt="249"
/>

With Rating

Tan leather backpack standing upright
New

Bags

Classic Leather Backpack

(218)
$129.00 
<x-ui.product-card
    class="w-full max-w-xs"
    title="Classic Leather Backpack"
    href="#"
    category="Bags"
    image="https://picsum.photos/seed/backpack/600/600"
    image-alt="Tan leather backpack standing upright"
    badge="New"
    :price="129"
    :rating="4.5"
    reviews="218"
    wishlist
/>

API Reference

Props, slots and exposed methods for <x-ui.product-card>.

Props

Prop Type Default Description
title* string — The product name shown as the card heading. Also used as the image alt text when imageAlt is omitted.
image* string — URL of the product image rendered in the square media area.
imageAlt string '' Alt text for the image. Falls back to the title when empty so the image is never unlabelled.
href string — Optional link for the product. When set, the title becomes an anchor to this URL.
price number — Current price. When set, a <x-ui.price> block renders; omit to hide pricing entirely.
compareAt number — Original (strikethrough) price. When greater than price, the card shows the sale styling and discount badge.
currency string '$' Currency symbol prefixed to the price and compare-at price.
badge string — Corner badge label over the image. Its tone is inferred from the text: "sale"/"off"/"%" read as danger, "new" as success, otherwise neutral.
category string — Small muted label shown above the title (e.g. "Audio").
rating number — Star rating out of 5, shown read-only above the price. Omit to hide the rating row.
reviews int — Review count shown in parentheses next to the rating. Only rendered when rating is set.
wishlist bool false Show a toggleable heart button in the top corner of the image.

* Required.

Slots

Slot Description
default Custom action area at the bottom of the card (e.g. your own add-to-cart form). When empty, a default "Add to cart" button is rendered.