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

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`

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

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

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.

tailwind-ecommerce