Ecommerce UI with Tailwind CSS

Patterns for product display, cart, checkout, orders, and store navigation.

---

1. Product Display Patterns

Card Variants

Variant	Key Classes	Use Case
Simple grid card	aspect-[3/4] w-full object-cover + text below image	Category pages, minimal listings
Card with details	rounded-lg border bg-white shadow-sm + price, rating, badge	Product listings, search results
Horizontal card	flex flex-row gap-4 + image left, details right	Cart items, wishlists, comparisons
Quick view overlay	group relative + opacity-0 group-hover:opacity-100 overlay CTA	Browse-and-add flows
Featured card	col-span-2 row-span-2 + larger image	Homepage hero products

Image Handling

Concern	Pattern	Classes
Aspect ratio	Fixed ratio container	aspect-square, aspect-[3/4], aspect-[4/3]
Fill behavior	Cover without distortion	object-cover w-full h-full
Responsive sizing	Fluid width, fixed aspect	w-full on container, aspect ratio on <img>
Placeholder	Background color fallback	bg-gray-100 on container
Hover zoom	Scale on group hover	transition-transform duration-300 group-hover:scale-105
Lazy loading	Native attribute	loading="lazy" on <img>

Price Display

Scenario	Pattern
Regular price	<span class="text-lg font-semibold text-gray-900">$49.99</span>
Sale price	Original: line-through text-gray-500 text-sm / Sale: text-lg font-semibold text-red-600
Price range	From $29.99 with text-sm text-gray-500 prefix
Currency symbol	Keep symbol adjacent, no wrapping: whitespace-nowrap

Rating Display

Element	Classes
Star icon (filled)	size-4 text-yellow-400 fill-current
Star icon (empty)	size-4 text-gray-300 fill-current
Half star	Clip filled star at 50% with overflow-hidden w-2 wrapper
Review count	text-sm text-gray-500 ml-1 next to stars
Container	flex items-center gap-0.5

---

2. Product List Layouts

Responsive Grid

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <!-- Product cards -->
</div>

Layout Patterns

Layout	Classes	When to Use
Grid (default)	grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6	Category pages, search results
Two-column wide	grid grid-cols-1 md:grid-cols-2 gap-8	Featured products, comparisons
List view	flex flex-col divide-y with horizontal cards	Detail-heavy browsing
Masonry-style	columns-2 lg:columns-3 gap-4	Visual-heavy catalogs

Loading and Pagination

Pattern	Implementation
Skeleton card	animate-pulse with bg-gray-200 rounded blocks matching card layout
Skeleton image	aspect-[3/4] bg-gray-200 rounded-lg animate-pulse
Skeleton text	h-4 bg-gray-200 rounded w-3/4 animate-pulse
Load more button	w-full py-3 border rounded-lg text-center below grid
Pagination	flex items-center gap-2 with numbered buttons, active: bg-indigo-600 text-white
Infinite scroll	Intersection observer on sentinel div at grid end
Empty state	text-center py-16 with icon, heading, and CTA

---

3. Category and Filtering

Sidebar Filter Panel (Desktop)

Element	Classes
Panel container	w-64 shrink-0 hidden lg:block
Filter group	border-b py-4 with heading + options
Group heading	font-medium text-sm text-gray-900 mb-3
Checkbox + label	flex items-center gap-2 text-sm text-gray-600
Color swatch	size-6 rounded-full border-2 + ring-2 ring-offset-2 ring-indigo-500 when active
Price range	Two input[type=number] with w-20 in a flex gap-2 items-center row
Apply button	w-full mt-3 py-2 bg-indigo-600 text-white rounded-lg text-sm

Mobile Filter (Slide-out Dialog)

Element	Classes
Trigger button	lg:hidden flex items-center gap-2 border rounded-lg px-4 py-2
Backdrop	fixed inset-0 bg-black/25 z-40
Panel	fixed inset-y-0 right-0 w-full max-w-sm bg-white z-50 overflow-y-auto
Header	flex items-center justify-between px-4 py-3 border-b
Footer	sticky bottom-0 bg-white border-t px-4 py-3 with Apply/Clear buttons

Active Filters and Sorting

Element	Classes
Filter chip	inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-sm
Remove button	size-4 text-gray-400 hover:text-gray-600 (X icon inside chip)
Clear all link	text-sm text-indigo-600 hover:text-indigo-800
Sort dropdown	select or custom dropdown, text-sm border rounded-lg px-3 py-2
Result count	text-sm text-gray-500 (e.g., "128 products")
Filter count badge	size-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center

---

4. Shopping Cart

Cart Item Row

<div class="flex gap-4 py-4 border-b">
  <img class="size-20 rounded-lg object-cover shrink-0" src="..." alt="..." />
  <div class="flex flex-1 flex-col justify-between">
    <div class="flex justify-between">
      <div>
        <h3 class="text-sm font-medium text-gray-900">Product Name</h3>
        <p class="mt-1 text-sm text-gray-500">Color / Size</p>
      </div>
      <p class="text-sm font-medium text-gray-900">$49.99</p>
    </div>
    <div class="flex items-center justify-between">
      <!-- Quantity selector -->
      <div class="flex items-center rounded-lg border">
        <button class="px-3 py-1 text-gray-600">-</button>
        <span class="px-3 py-1 border-x text-sm">1</span>
        <button class="px-3 py-1 text-gray-600">+</button>
      </div>
      <button class="text-sm text-red-600 hover:text-red-800">Remove</button>
    </div>
  </div>
</div>

Cart Sections

Section	Classes	Content
Cart list	divide-y	Cart item rows
Summary panel	rounded-lg bg-gray-50 p-6 lg:w-80 lg:shrink-0	Subtotal, shipping, tax, total
Summary row	flex justify-between text-sm text-gray-600 py-2	Label + amount
Total row	flex justify-between text-base font-semibold text-gray-900 border-t pt-4 mt-4	Total label + amount
Checkout CTA	w-full mt-6 py-3 bg-indigo-600 text-white rounded-lg font-medium	"Proceed to Checkout"
Continue shopping	text-sm text-indigo-600 hover:text-indigo-800 mt-4 text-center block	Link back

Cart States

State	Pattern
Empty cart	text-center py-16 with cart icon, "Your cart is empty" heading, shop CTA
Mini cart / drawer	fixed inset-y-0 right-0 w-full max-w-md bg-white shadow-xl z-50
Cart badge	absolute -top-2 -right-2 size-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center
Updating state	opacity-50 pointer-events-none on item row during async update

---

5. Checkout Flow

Progress Indicator

Step State	Classes
Completed	size-8 rounded-full bg-indigo-600 text-white with check icon
Current	size-8 rounded-full border-2 border-indigo-600 text-indigo-600
Upcoming	size-8 rounded-full border-2 border-gray-300 text-gray-400
Connector (done)	h-0.5 w-full bg-indigo-600 between circles
Connector (pending)	h-0.5 w-full bg-gray-300 between circles
Container	flex items-center justify-between max-w-lg mx-auto mb-8

Form Layout

Section	Structure
Two-column layout	grid grid-cols-1 lg:grid-cols-5 gap-8 (3 cols form + 2 cols summary)
Field group	space-y-4 container
Two-field row	grid grid-cols-2 gap-4 (first/last name, city/zip)
Full-width field	col-span-2 or standalone
Label	block text-sm font-medium text-gray-700 mb-1
Input	w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500
Error input	border-red-500 focus:border-red-500 focus:ring-red-500
Error message	text-sm text-red-600 mt-1

Payment Fields

Element	Pattern
Card number	Full-width input with card icon right-aligned
Expiry + CVC	grid grid-cols-2 gap-4 side by side
Card group	rounded-lg border divide-y wrapping all card fields as one visual unit
Saved cards	Radio group: flex items-center gap-3 p-4 border rounded-lg per card
Security note	flex items-center gap-2 text-sm text-gray-500 with lock icon

Checkout Patterns

Pattern	Implementation
Guest vs account	Toggle or tabs at top: flex rounded-lg border with two options
Order review	Summary card: item thumbnails, quantities, line totals in bg-gray-50 rounded-lg p-6
Place order CTA	w-full py-3 bg-indigo-600 text-white rounded-lg font-medium text-lg
Terms checkbox	flex items-start gap-2 with checkbox and label text
Loading on submit	Button with opacity-75 cursor-not-allowed + spinner icon

---

6. Order Management

Order History Table

Viewport	Pattern
Desktop	Standard <table> with columns: Order #, Date, Status, Total, Actions
Mobile	Stacked cards: divide-y with each order as a flex flex-col gap-2 py-4 block
Table header	text-left text-sm font-medium text-gray-500 pb-3 border-b
Table cell	py-4 text-sm text-gray-900

Order Status Badges

Status	Classes
Pending	bg-yellow-100 text-yellow-800 rounded-full px-2.5 py-0.5 text-xs font-medium
Processing	bg-blue-100 text-blue-800 rounded-full px-2.5 py-0.5 text-xs font-medium
Shipped	bg-indigo-100 text-indigo-800 rounded-full px-2.5 py-0.5 text-xs font-medium
Delivered	bg-green-100 text-green-800 rounded-full px-2.5 py-0.5 text-xs font-medium
Cancelled	bg-red-100 text-red-800 rounded-full px-2.5 py-0.5 text-xs font-medium
Refunded	bg-gray-100 text-gray-800 rounded-full px-2.5 py-0.5 text-xs font-medium

Order Detail Page

Section	Pattern
Status timeline	Vertical: relative pl-8 space-y-6 with absolute left-0 circles and connecting line
Timeline dot (done)	size-4 rounded-full bg-indigo-600
Timeline dot (current)	size-4 rounded-full border-2 border-indigo-600 bg-white
Timeline line	absolute left-2 top-4 bottom-0 w-0.5 bg-gray-200
Items list	Horizontal cards with image, name, qty, price
Totals section	Same pattern as cart summary
Shipping address	bg-gray-50 rounded-lg p-4 card
Invoice layout	max-w-2xl mx-auto with logo header, address block, items table, totals

---

7. Pricing and Promotions

Price Patterns

Pattern	Implementation
Original + sale	<span class="line-through text-gray-500 text-sm">$99.99</span> <span class="text-lg font-semibold text-red-600">$49.99</span>
Save amount	<span class="text-sm text-green-600 font-medium">Save $50.00 (50%)</span>
Per-unit price	<span class="text-xs text-gray-500">$2.50/oz</span> below main price

Discount Badge (on Product Image)

<div class="relative">
  <img class="aspect-[3/4] w-full rounded-lg object-cover" src="..." alt="..." />
  <span class="absolute top-2 left-2 rounded-full bg-red-600 px-2.5 py-0.5 text-xs font-semibold text-white">
    -50%
  </span>
</div>

Pricing Tier Cards

Element	Classes
Card container	rounded-xl border p-6 text-center
Featured card	border-indigo-600 ring-2 ring-indigo-600 relative with "Popular" badge
Price	text-4xl font-bold text-gray-900
Period	text-sm text-gray-500 (e.g., "/month")
Feature list	space-y-3 text-sm text-gray-600 with check icons
CTA button	w-full mt-6 py-2.5 rounded-lg font-medium

Promo and Incentive Sections

Pattern	Classes
Full-width banner	bg-indigo-600 text-white py-3 text-center text-sm font-medium
Dismissable banner	Add flex items-center justify-between px-4 with close button
Trust icons row	grid grid-cols-2 md:grid-cols-4 gap-6 py-8 text-center
Trust icon item	flex flex-col items-center gap-2 text-sm text-gray-600 with icon above
Coupon input	flex with flex-1 rounded-l-lg border px-3 py-2 input + rounded-r-lg bg-gray-900 text-white px-4 py-2 button

---

8. Store Navigation

Store Header

Element	Classes
Header bar	sticky top-0 z-30 bg-white border-b
Inner layout	flex items-center justify-between h-16 px-4 max-w-7xl mx-auto
Logo	shrink-0
Search bar	flex-1 max-w-lg mx-8 hidden md:block with rounded-full bg-gray-100 px-4 py-2
Icon group	flex items-center gap-4 for account, wishlist, cart icons
Cart icon + badge	relative button with absolute -top-1.5 -right-1.5 badge

Mega Menu

Element	Classes
Trigger	group on nav item
Dropdown	invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all absolute left-0 w-full bg-white shadow-lg border-t
Inner grid	grid grid-cols-4 gap-8 max-w-7xl mx-auto p-8
Column heading	font-medium text-sm text-gray-900 mb-3
Column links	space-y-2 text-sm text-gray-600
Featured image	rounded-lg overflow-hidden in last column

Category Previews and Breadcrumbs

Element	Classes
Category card	group relative rounded-xl overflow-hidden
Category image	aspect-[4/3] w-full object-cover transition-transform group-hover:scale-105
Category overlay	absolute inset-0 bg-gradient-to-t from-black/60 to-transparent
Category label	absolute bottom-4 left-4 text-lg font-semibold text-white
Breadcrumb nav	flex items-center gap-2 text-sm text-gray-500
Breadcrumb separator	size-4 text-gray-400 (chevron icon)
Breadcrumb current	text-gray-900 font-medium (last item, no link)

---

9. Accessibility for Ecommerce

Element	Requirement	Implementation
Product image	Descriptive alt text	alt="Red leather crossbody bag" not alt="product"
Decorative image	Skip for screen readers	alt="" and aria-hidden="true"
Sale price	Announce was/now	aria-label="Sale price $49.99, originally $99.99" on container
Cart update	Announce change	aria-live="polite" region for "Item added" / "Cart updated" messages
Cart count badge	Announce count	aria-label="Cart, 3 items" on cart button
Quantity selector	Label buttons	aria-label="Decrease quantity" / aria-label="Increase quantity"
Star rating	Text alternative	aria-label="4 out of 5 stars" on rating container
Filter change	Announce results	aria-live="polite" on product count ("128 results")
Form errors	Link to field	aria-describedby="email-error" on input, matching id on error text
Checkout steps	Current step	aria-current="step" on active step indicator
Remove from cart	Confirm action	Identify item in label: aria-label="Remove Red Bag from cart"
Sort dropdown	Label purpose	aria-label="Sort products by" on select element
Color swatch	Name the color	aria-label="Color: Navy Blue" on swatch button
Dialog filters	Trap focus	role="dialog" + aria-modal="true" + focus trap on mobile filter panel

---

Common Mistakes

Mistake	Fix
Fixed pixel image heights	Use aspect-* utilities with object-cover for responsive images
Cart with no empty state	Always handle zero items with illustration and CTA
Price without whitespace-nowrap	Currency and amount should not wrap to separate lines
Filter panel always visible on mobile	Hide with hidden lg:block, use dialog for mobile
No loading state during cart updates	Show opacity-50 pointer-events-none or skeleton on async actions
Checkout form in single column	Use grid grid-cols-2 gap-4 for name, city/zip, expiry/CVC pairs
Status badges with only color	Add text labels; color alone fails WCAG
Missing aria-live on cart	Cart count and summary changes must announce to screen readers
Mega menu not keyboard-navigable	Ensure focus management and Escape key closes the menu
Discount badge over product text	Position badge on image (absolute top-2 left-2), not over card text

MCP Component Library

The frontend-components MCP server provides ecommerce-related components:

• HyperUI (hyperui): Product cards, product collections, pricing tables, forms, badges, stats
• DaisyUI (daisyui): Card, badge, stat, table, modal, rating, countdown class references
• FlyonUI (flyonui): Card, badge, stat, table CSS components + datatable JS plugin

Ecommerce search: search_components(query: "product", framework: "hyperui") or search_components(query: "pricing") for pricing components across all libraries.