Back to Templates

StoreNG

Free E-Commerce & Retail

StoreNG is a clean, modern, and fully responsive e-commerce dashboard template built with Angular 22+ and Tailwind CSS v4. Inspired by minimalist Vercel-like aesthetics, it delivers a polished workspace for managing store analytics, tracking revenue trends, monitoring sales by category, analyzing revenue share, and tracking order fulfillment — all powered by a Signals-first reactive architecture with zoneless change detection.

StoreNG
Live Preview Get Source Code

Complete E-Commerce Dashboard

  • KPI Overview Dashboard: Real-time metrics for total revenue, orders, customers, and average order value — each with trend indicators and period-based data filtering (daily, weekly, monthly, yearly).
  • 4 Interactive ApexCharts: Revenue Trends (Area), Sales by Category (Bar), Revenue Share (Donut), and Order Fulfillment (RadialBar) — all with hover tooltips, animations, and dark/light mode adaptation.
  • Custom Date Pickers: Built-from-scratch date picker components with range highlighting, min/max date constraints, and smooth animations.
  • Period-Based Filtering: Reactive data filtering across all KPIs and charts based on selected period (daily, weekly, monthly, yearly) using Angular Signals and computed properties.
  • Recent Orders Table: Responsive data table with order details, customer info, status badges, and progressive column hiding on mobile.

Sleek & Customizable Design System

  • Dual Theme Engine: High-contrast Dark Mode and clean Light Mode with persistent state via `localStorage`, toggled directly on the document root for full compatibility.
  • Semantic Theme Tokens: Custom CSS variables (`bg-theme-panel`, `border-theme-border`, `text-theme-text-main`) prevent selector conflicts and make dark/light transitions seamless across all components including ApexCharts.
  • Staggered Animations: Smooth blurry slide-in entrance animations on cards, charts, and tables using `.animate-blur-slide` with synchronized stagger timing per row.
  • Collapsible Sidebar Sections: Sidebar categories (Catalog, Sales, Customers, Analytics) are collapsible with smooth open/close transitions using grid-template-rows and opacity animations.
  • Fully Responsive Layout: Optimized for mobile, tablet, and desktop. Mobile sidebar auto-closes on navigation, tables progressively hide columns, and CTAs adapt to full-width on small screens.

Modern & High-Performance Architecture

  • Angular Standalone Components: Clean, structured components following modern Angular 22+ best practices without NgModules, using inline templates and signals.
  • Signals-First Reactivity: Centralized state management using Angular Signals for high-performance, zoneless change detection. Computed properties automatically update KPIs and charts when period changes.
  • Custom UI Components: Built-from-scratch dropdown components (ui-select, ui-datepicker) with proper z-index layering, click-outside-to-close listeners, and smooth animations.
  • Smooth Chart Resizing: Reactive handling of chart dimensions during sidebar collapses via CSS scaling and delayed window resize dispatches for crisp ApexCharts redraws.

What's Included

  • Full source code (Angular 22+ / Tailwind CSS v4)
  • Dashboard with KPI cards and 4 interactive ApexCharts
  • Custom date picker with range highlighting
  • Period-based data filtering (daily/weekly/monthly/yearly)
  • Collapsible sidebar sections with smooth transitions
  • MIT Free Open-Source License

Tech Stack

Angular 22+Tailwind v4SignalsApexChartsDark ModeZoneless