About ShopFlow
ShopFlow is a production-grade e-commerce admin dashboard layout demonstrating the Dashboard Card Grid pattern. It features a clean, commercial Shopify-admin-inspired aesthetic with emerald accents, rich motion animations, and interactive data tables.
Implemented Features
Light Commercial Theme
White background with soft gray sidebar (#f8f9fa), emerald-600 accent color, and subtle shadows. Inspired by Shopify admin aesthetic.
DM Sans Typography
Clean, friendly sans-serif font used throughout all headings, body text, and UI elements. Tabular numerics for data alignment.
Motion Animations
Powered by motion (framer-motion successor). Staggered card entrances, spring physics sidebar collapse, animated route indicator with shared layoutId.
Signature: Revenue Counter
Dashboard revenue number animates from 0 to $128.4K on mount using a custom spring-based counter hook with ease-out cubic easing.
Recharts Integration
Area chart (revenue), bar chart (top products, categories), line chart (weekly comparison), pie chart (customer segments). All with shopflow-prefixed gradient IDs.
Interactive Tables
Sortable column headers (click to sort), row hover states, expandable order detail rows with status timeline, and checkbox selection patterns.
E-commerce Domain Content
Products with stock badges, orders with status timeline (Placed > Processing > Shipped > Delivered), customer segments (VIP/Regular/New), conversion funnels.
Collapsible Mini Sidebar
Spring physics expand/collapse animation. Active route indicator with shared layoutId. Labels and help card animate in/out with AnimatePresence.
Theme Tokens
CSS custom properties scoped to the layout wrapper
| Token | Value | Preview |
|---|---|---|
--sf-bg | #ffffffBackground | |
--sf-bg-sidebar | #f8f9faSidebar | |
--sf-accent | #059669Accent (emerald-600) | |
--sf-accent-light | #10b981Accent light | |
--sf-accent-bg | #ecfdf5Accent background | |
--sf-text | #1a1a2eText primary | |
--sf-text-secondary | #6c757dText secondary | |
--sf-text-muted | #adb5bdText muted | |
--sf-border | #e9ecefBorder |
Pages
All routes in the ShopFlow layout
/05-card-gridRevenue stats with animated counter, area + bar charts, order table, inventory alerts, live activity
/05-card-grid/productsProduct catalog with grid/list view toggle, stock badges, category/stock filters
/05-card-grid/ordersOrder table with status tabs, sortable columns, expandable status timeline + tracking
/05-card-grid/customersCustomer list with segment badges, pie chart, lifetime value, avatar initials
/05-card-grid/analyticsRevenue comparison (line), category breakdown (bar), conversion funnel with animated bars
/05-card-grid/settingsStore details, inventory management, shipping, payment providers, notifications, tax config