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
/>