Back to Details

tailwind-ecommerce

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Ecommerce UI with Tailwind CSS

基于Tailwind CSS的电商UI

Patterns for product display, cart, checkout, orders, and store navigation.
包含商品展示、购物车、结账、订单及店铺导航的各类设计模式。

1. Product Display Patterns

1. 商品展示设计模式

Card Variants

卡片变体

VariantKey ClassesUse 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
变体类型核心类名使用场景
简约网格卡片
aspect-[3/4] w-full object-cover
+ 图片下方文字		分类页面、极简商品列表
带详情卡片
rounded-lg border bg-white shadow-sm
+ 价格、评分、徽章		商品列表页、搜索结果页
横向卡片
flex flex-row gap-4
+ 左侧图片、右侧详情		购物车商品、心愿单、商品对比
快速查看浮层
group relative
+ 
opacity-0 group-hover:opacity-100
浮层操作按钮		浏览加购流程
精选卡片
col-span-2 row-span-2
+ 大尺寸图片		首页核心推荐商品

Image Handling

图片处理

ConcernPatternClasses
Aspect ratioFixed ratio container
aspect-square
, 
aspect-[3/4]
, 
aspect-[4/3]
Fill behaviorCover without distortion
object-cover w-full h-full
Responsive sizingFluid width, fixed aspect
w-full
on container, aspect ratio on 
<img>
PlaceholderBackground color fallback
bg-gray-100
on container
Hover zoomScale on group hover
transition-transform duration-300 group-hover:scale-105
Lazy loadingNative attribute
loading="lazy"
on 
<img>
关注点实现模式类名
宽高比固定比例容器
aspect-square
, 
aspect-[3/4]
, 
aspect-[4/3]
填充方式无变形覆盖
object-cover w-full h-full
响应式尺寸流体宽度+固定比例容器用
w-full
，
<img>
用宽高比类
占位符背景色兜底容器用
bg-gray-100
悬停缩放分组悬停时缩放
transition-transform duration-300 group-hover:scale-105
懒加载原生属性
<img>
添加
loading="lazy"

Price Display

价格展示

ScenarioPattern
Regular price
<span class="text-lg font-semibold text-gray-900">$49.99</span>
Sale priceOriginal: 
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 symbolKeep symbol adjacent, no wrapping: 
whitespace-nowrap
场景实现模式
常规价格
<span class="text-lg font-semibold text-gray-900">$49.99</span>
促销价格原价：
line-through text-gray-500 text-sm
/ 现价：
text-lg font-semibold text-red-600
价格区间前缀用
text-sm text-gray-500
，如
From $29.99
货币符号不换行：
whitespace-nowrap

Rating Display

评分展示

ElementClasses
Star icon (filled)
size-4 text-yellow-400 fill-current
Star icon (empty)
size-4 text-gray-300 fill-current
Half starClip 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
元素类名
实心星星图标
size-4 text-yellow-400 fill-current
空心星星图标
size-4 text-gray-300 fill-current
半星用
overflow-hidden w-2
容器裁剪实心星星至50%
评价数量星星旁添加
text-sm text-gray-500 ml-1
容器
flex items-center gap-0.5

2. Product List Layouts

2. 商品列表布局

Responsive Grid

响应式网格

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

Layout Patterns

布局模式

LayoutClassesWhen 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
布局类型类名使用场景
网格布局（默认）
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6
分类页面、搜索结果
双列宽布局
grid grid-cols-1 md:grid-cols-2 gap-8
精选商品、商品对比
列表视图
flex flex-col divide-y
搭配横向卡片		信息密集型浏览场景
瀑布流布局
columns-2 lg:columns-3 gap-4
视觉导向型商品目录

Loading and Pagination

加载与分页

PatternImplementation
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 scrollIntersection observer on sentinel div at grid end
Empty state
text-center py-16
with icon, heading, and CTA
模式实现方式
骨架卡片
animate-pulse
搭配
bg-gray-200 rounded
块，匹配卡片布局
骨架图片
aspect-[3/4] bg-gray-200 rounded-lg animate-pulse
骨架文本
h-4 bg-gray-200 rounded w-3/4 animate-pulse
加载更多按钮网格下方添加
w-full py-3 border rounded-lg text-center
按钮
分页组件
flex items-center gap-2
搭配数字按钮，激活态：
bg-indigo-600 text-white
无限滚动网格底部添加哨兵元素，结合交叉观察器实现
空状态
text-center py-16
搭配图标、标题和操作按钮

3. Category and Filtering

3. 分类与筛选

Sidebar Filter Panel (Desktop)

侧边栏筛选面板（桌面端）

ElementClasses
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 rangeTwo 
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
元素类名
面板容器
w-64 shrink-0 hidden lg:block
筛选组
border-b py-4
搭配标题+选项
组标题
font-medium text-sm text-gray-900 mb-3
复选框+标签
flex items-center gap-2 text-sm text-gray-600
颜色样本
size-6 rounded-full border-2
+ 激活态
ring-2 ring-offset-2 ring-indigo-500
价格区间两个
input[type=number]
用
flex gap-2 items-center
行包裹，添加
w-20
应用按钮
w-full mt-3 py-2 bg-indigo-600 text-white rounded-lg text-sm

Mobile Filter (Slide-out Dialog)

移动端筛选（滑出对话框）

ElementClasses
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
元素类名
触发按钮
lg:hidden flex items-center gap-2 border rounded-lg px-4 py-2
遮罩层
fixed inset-0 bg-black/25 z-40
面板
fixed inset-y-0 right-0 w-full max-w-sm bg-white z-50 overflow-y-auto
头部
flex items-center justify-between px-4 py-3 border-b
底部
sticky bottom-0 bg-white border-t px-4 py-3
搭配应用/清除按钮

Active Filters and Sorting

已选筛选与排序

ElementClasses
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
元素类名
筛选标签
inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-sm
移除按钮
size-4 text-gray-400 hover:text-gray-600
（标签内的X图标）
清除全部链接
text-sm text-indigo-600 hover:text-indigo-800
排序下拉框
select
或自定义下拉框，添加
text-sm border rounded-lg px-3 py-2
结果数量
text-sm text-gray-500
（如"128 products"）
筛选数量徽章
size-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center

4. Shopping Cart

4. 购物车

Cart Item Row

购物车商品行

html
<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>
html
<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">
      <!-- 数量选择器 -->
      <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

购物车区域

SectionClassesContent
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
区域类名内容
购物车列表
divide-y
购物车商品行
摘要面板
rounded-lg bg-gray-50 p-6 lg:w-80 lg:shrink-0
小计、运费、税费、总计
摘要行
flex justify-between text-sm text-gray-600 py-2
标签+金额
总计行
flex justify-between text-base font-semibold text-gray-900 border-t pt-4 mt-4
总计标签+金额
结账按钮
w-full mt-6 py-3 bg-indigo-600 text-white rounded-lg font-medium
"Proceed to Checkout"（前往结账）
继续购物
text-sm text-indigo-600 hover:text-indigo-800 mt-4 text-center block
返回链接

Cart States

购物车状态

StatePattern
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
状态实现模式
空购物车
text-center py-16
搭配购物车图标、"Your cart is empty"（购物车为空）标题、购物引导按钮
迷你购物车/抽屉
fixed inset-y-0 right-0 w-full max-w-md bg-white shadow-xl z-50
购物车徽章
absolute -top-2 -right-2 size-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center
更新状态异步更新时，商品行添加
opacity-50 pointer-events-none

5. Checkout Flow

5. 结账流程

Progress Indicator

进度指示器

Step StateClasses
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
步骤状态类名
已完成
size-8 rounded-full bg-indigo-600 text-white
搭配对勾图标
当前步骤
size-8 rounded-full border-2 border-indigo-600 text-indigo-600
未开始
size-8 rounded-full border-2 border-gray-300 text-gray-400
连接线（已完成）圆圈间添加
h-0.5 w-full bg-indigo-600
连接线（未开始）圆圈间添加
h-0.5 w-full bg-gray-300
容器
flex items-center justify-between max-w-lg mx-auto mb-8

Form Layout

表单布局

SectionStructure
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
区域结构
双列布局
grid grid-cols-1 lg:grid-cols-5 gap-8
（3列表单+2列摘要）
字段组
space-y-4
容器
双字段行
grid grid-cols-2 gap-4
（名/姓、城市/邮编）
全宽字段
col-span-2
或独立存在
标签
block text-sm font-medium text-gray-700 mb-1
输入框
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
错误输入框
border-red-500 focus:border-red-500 focus:ring-red-500
错误提示
text-sm text-red-600 mt-1

Payment Fields

支付字段

ElementPattern
Card numberFull-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 cardsRadio 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
元素实现模式
卡号全宽输入框+右侧卡片图标
有效期+CVC
grid grid-cols-2 gap-4
并排
卡片组
rounded-lg border divide-y
包裹所有卡片字段，作为一个视觉单元
已保存卡片单选组：每个卡片用
flex items-center gap-3 p-4 border rounded-lg
安全提示
flex items-center gap-2 text-sm text-gray-500
搭配锁图标

Checkout Patterns

结账模式

PatternImplementation
Guest vs accountToggle or tabs at top: 
flex rounded-lg border
with two options
Order reviewSummary 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 submitButton with 
opacity-75 cursor-not-allowed
+ spinner icon
模式实现方式
访客/账号切换顶部切换或标签页：
flex rounded-lg border
搭配两个选项
订单回顾摘要卡片：
bg-gray-50 rounded-lg p-6
中包含商品缩略图、数量、行项目总价
提交订单按钮
w-full py-3 bg-indigo-600 text-white rounded-lg font-medium text-lg
条款复选框
flex items-start gap-2
搭配复选框和标签文本
提交加载状态按钮添加
opacity-75 cursor-not-allowed
+ 加载图标

6. Order Management

6. 订单管理

Order History Table

订单历史表格

ViewportPattern
DesktopStandard 
<table>
with columns: Order #, Date, Status, Total, Actions
MobileStacked 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
视口实现模式
桌面端标准
<table>
，列：订单号、日期、状态、总计、操作
移动端堆叠卡片：
divide-y
中每个订单用
flex flex-col gap-2 py-4
块
表头
text-left text-sm font-medium text-gray-500 pb-3 border-b
表格单元格
py-4 text-sm text-gray-900

Order Status Badges

订单状态徽章

StatusClasses
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
状态类名
待处理
bg-yellow-100 text-yellow-800 rounded-full px-2.5 py-0.5 text-xs font-medium
处理中
bg-blue-100 text-blue-800 rounded-full px-2.5 py-0.5 text-xs font-medium
已发货
bg-indigo-100 text-indigo-800 rounded-full px-2.5 py-0.5 text-xs font-medium
已送达
bg-green-100 text-green-800 rounded-full px-2.5 py-0.5 text-xs font-medium
已取消
bg-red-100 text-red-800 rounded-full px-2.5 py-0.5 text-xs font-medium
已退款
bg-gray-100 text-gray-800 rounded-full px-2.5 py-0.5 text-xs font-medium

Order Detail Page

订单详情页

SectionPattern
Status timelineVertical: 
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 listHorizontal cards with image, name, qty, price
Totals sectionSame 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
区域实现模式
状态时间线垂直布局：
relative pl-8 space-y-6
搭配
absolute left-0
圆圈和连接线
时间线圆点（已完成）
size-4 rounded-full bg-indigo-600
时间线圆点（当前）
size-4 rounded-full border-2 border-indigo-600 bg-white
时间线连接线
absolute left-2 top-4 bottom-0 w-0.5 bg-gray-200
商品列表横向卡片，包含图片、名称、数量、价格
总计区域与购物车摘要模式相同
收货地址
bg-gray-50 rounded-lg p-4
卡片
发票布局
max-w-2xl mx-auto
搭配Logo头部、地址块、商品表格、总计

7. Pricing and Promotions

7. 价格与促销

Price Patterns

价格模式

PatternImplementation
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
模式实现方式
原价+现价
<span class="line-through text-gray-500 text-sm">$99.99</span> <span class="text-lg font-semibold text-red-600">$49.99</span>
优惠金额
<span class="text-sm text-green-600 font-medium">Save $50.00 (50%)</span>
（节省$50.00，50%折扣）
单价主价格下方添加
<span class="text-xs text-gray-500">$2.50/oz</span>

Discount Badge (on Product Image)

商品图片上的折扣徽章

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

价格层级卡片

ElementClasses
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
元素类名
卡片容器
rounded-xl border p-6 text-center
精选卡片
border-indigo-600 ring-2 ring-indigo-600 relative
搭配"Popular"（热门）徽章
价格
text-4xl font-bold text-gray-900
周期
text-sm text-gray-500
（如"/month"）
功能列表
space-y-3 text-sm text-gray-600
搭配对勾图标
操作按钮
w-full mt-6 py-2.5 rounded-lg font-medium

Promo and Incentive Sections

促销与激励区域

PatternClasses
Full-width banner
bg-indigo-600 text-white py-3 text-center text-sm font-medium
Dismissable bannerAdd 
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
模式类名
通栏横幅
bg-indigo-600 text-white py-3 text-center text-sm font-medium
可关闭横幅添加
flex items-center justify-between px-4
搭配关闭按钮
信任图标行
grid grid-cols-2 md:grid-cols-4 gap-6 py-8 text-center
信任图标项
flex flex-col items-center gap-2 text-sm text-gray-600
图标在上
优惠券输入框
flex
布局，输入框用
flex-1 rounded-l-lg border px-3 py-2
，按钮用
rounded-r-lg bg-gray-900 text-white px-4 py-2

8. Store Navigation

8. 店铺导航

Store Header

店铺头部

ElementClasses
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
元素类名
头部栏
sticky top-0 z-30 bg-white border-b
内部布局
flex items-center justify-between h-16 px-4 max-w-7xl mx-auto
Logo
shrink-0
搜索栏
flex-1 max-w-lg mx-8 hidden md:block
搭配
rounded-full bg-gray-100 px-4 py-2
图标组
flex items-center gap-4
包含账号、心愿单、购物车图标
购物车图标+徽章按钮添加
relative
，徽章用
absolute -top-1.5 -right-1.5

Mega Menu

超级菜单

ElementClasses
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
元素类名
触发器导航项添加
group
下拉菜单
invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all absolute left-0 w-full bg-white shadow-lg border-t
内部网格
grid grid-cols-4 gap-8 max-w-7xl mx-auto p-8
列标题
font-medium text-sm text-gray-900 mb-3
列链接
space-y-2 text-sm text-gray-600
精选图片最后一列添加
rounded-lg overflow-hidden

Category Previews and Breadcrumbs

分类预览与面包屑

ElementClasses
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)
元素类名
分类卡片
group relative rounded-xl overflow-hidden
分类图片
aspect-[4/3] w-full object-cover transition-transform group-hover:scale-105
分类遮罩
absolute inset-0 bg-gradient-to-t from-black/60 to-transparent
分类标签
absolute bottom-4 left-4 text-lg font-semibold text-white
面包屑导航
flex items-center gap-2 text-sm text-gray-500
面包屑分隔符
size-4 text-gray-400
（ Chevron图标）
当前面包屑
text-gray-900 font-medium
（最后一项，无链接）

9. Accessibility for Ecommerce

电商界面无障碍设计

ElementRequirementImplementation
Product imageDescriptive alt text
alt="Red leather crossbody bag"
not 
alt="product"
Decorative imageSkip for screen readers
alt=""
and 
aria-hidden="true"
Sale priceAnnounce was/now
aria-label="Sale price $49.99, originally $99.99"
on container
Cart updateAnnounce change
aria-live="polite"
region for "Item added" / "Cart updated" messages
Cart count badgeAnnounce count
aria-label="Cart, 3 items"
on cart button
Quantity selectorLabel buttons
aria-label="Decrease quantity"
/ 
aria-label="Increase quantity"
Star ratingText alternative
aria-label="4 out of 5 stars"
on rating container
Filter changeAnnounce results
aria-live="polite"
on product count ("128 results")
Form errorsLink to field
aria-describedby="email-error"
on input, matching 
id
on error text
Checkout stepsCurrent step
aria-current="step"
on active step indicator
Remove from cartConfirm actionIdentify item in label: 
aria-label="Remove Red Bag from cart"
Sort dropdownLabel purpose
aria-label="Sort products by"
on select element
Color swatchName the color
aria-label="Color: Navy Blue"
on swatch button
Dialog filtersTrap focus
role="dialog"
+ 
aria-modal="true"
+ focus trap on mobile filter panel
元素要求实现方式
商品图片描述性替代文本
alt="Red leather crossbody bag"
而非
alt="product"
装饰性图片屏幕阅读器跳过
alt=""
并添加
aria-hidden="true"
促销价格播报原价/现价容器添加
aria-label="Sale price $49.99, originally $99.99"
（促销价$49.99，原价$99.99）
购物车更新播报变化添加
aria-live="polite"
区域，显示"Item added"（商品已添加）/"Cart updated"（购物车已更新）消息
购物车数量徽章播报数量购物车按钮添加
aria-label="Cart, 3 items"
（购物车，3件商品）
数量选择器按钮添加标签
aria-label="Decrease quantity"
（减少数量）/
aria-label="Increase quantity"
（增加数量）
星级评分文本替代评分容器添加
aria-label="4 out of 5 stars"
（5星中4星）
筛选变化播报结果商品数量添加
aria-live="polite"
（"128 results"，128个结果）
表单错误链接到字段输入框添加
aria-describedby="email-error"
，与错误文本
id
匹配
结账步骤当前步骤激活步骤指示器添加
aria-current="step"
从购物车移除确认操作标签中明确商品：
aria-label="Remove Red Bag from cart"
（从购物车移除红色包包）
排序下拉框说明用途选择元素添加
aria-label="Sort products by"
（商品排序方式）
颜色样本命名颜色样本按钮添加
aria-label="Color: Navy Blue"
（颜色：海军蓝）
对话框筛选焦点捕获移动端筛选面板添加
role="dialog"
+
aria-modal="true"
+焦点捕获

Common Mistakes

常见错误

MistakeFix
Fixed pixel image heightsUse 
aspect-*
utilities with 
object-cover
for responsive images
Cart with no empty stateAlways 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 mobileHide with 
hidden lg:block
, use dialog for mobile
No loading state during cart updatesShow 
opacity-50 pointer-events-none
or skeleton on async actions
Checkout form in single columnUse 
grid grid-cols-2 gap-4
for name, city/zip, expiry/CVC pairs
Status badges with only colorAdd 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-navigableEnsure focus management and Escape key closes the menu
Discount badge over product textPosition badge on image (
absolute top-2 left-2
), not over card text
错误修复方案
固定像素图片高度用
aspect-*
工具类搭配
object-cover
实现响应式图片
购物车无空状态始终处理零商品场景，添加插图和引导按钮
价格未添加
whitespace-nowrap
货币和金额不应换行
移动端始终显示筛选面板用
hidden lg:block
隐藏，移动端用对话框实现
购物车更新无加载状态异步操作时，添加
opacity-50 pointer-events-none
或骨架屏
结账表单单列布局姓名、城市/邮编、有效期/CVC对等字段用
grid grid-cols-2 gap-4
状态徽章仅用颜色区分添加文本标签；仅靠颜色不符合WCAG标准
购物车缺少
aria-live
购物车数量和摘要变化时，需向屏幕阅读器播报
超级菜单不支持键盘导航确保焦点管理和Escape键关闭菜单
折扣徽章覆盖商品文本徽章定位在图片上（
absolute top-2 left-2
），而非卡片文本区域

MCP Component Library

MCP组件库

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.
frontend-components
MCP服务器提供电商相关组件：
  • HyperUI (
    hyperui
    )：商品卡片、商品集合、价格表、表单、徽章、统计组件
  • DaisyUI (
    daisyui
    )：卡片、徽章、统计、表格、模态框、评分、倒计时类参考
  • FlyonUI (
    flyonui
    )：卡片、徽章、统计、表格CSS组件 + 数据表格JS插件
电商组件搜索：
search_components(query: "product", framework: "hyperui")
或 
search_components(query: "pricing")
可跨库搜索价格类组件。