Pairing Angular 21 Storefront & Admin Templates: Introducing Motif and Motif Admin
Introducing the new Templates section on Base UI. Discover Motif Commerce Storefront and Motif Admin Dashboard—built to work together as a complete Angular 21 + Tailwind CSS 4 application pair.
Building modern web applications often presents a subtle disconnect. Most UI component libraries give you individual building blocks—buttons, cards, dialogs, and input groups. When it comes to launching a full application, developers spend weeks stitching together disparate templates: one storefront template for customer ordering and a completely different admin template for back-office operations.
The result? Inconsistent design systems, mismatched UI tokens, duplicate state management logic, and hours spent unpicking legacy framework patterns.
Today, we're launching the Templates section on Base UI, featuring two complete, production-ready application templates designed to work seamlessly as a pair: Motif (the commerce storefront) and Motif Admin (the operations dashboard).
Motif Admin Operations Dashboard — real-time KPIs, revenue area chart, channel mix donut, and fulfillment queue.
Why Storefront + Admin as a Pair?
In e-commerce and web application development, storefronts and admin dashboards are twin sides of the same business domain. When a product variant or fulfillment status changes in the back office, the customer experience needs to reflect it instantly.
By building Motif and Motif Admin as a coordinated pair on the exact same UI foundation, you get a cohesive architecture out of the box:
- Unified Design Language: Both templates share the same typography scale, standard Tailwind CSS v4 color tokens, glassmorphism overlays, and paired light/dark themes.
- 100% Base UI Pro Foundation: Every screen is constructed using standalone Base UI Pro components (
@lussos/base-ui), ensuring clean code structure and accessible primitives throughout. - Modern Angular 21 Stack: Both templates use signal-based reactive state, standalone components, Angular's
@if/@for/@switchcontrol flow, andprovideZonelessChangeDetection(). - Prerender & SSR Ready: Verified static HTML prerendering across all routes for instant initial loads, smooth hydration, and zero crawler issues.
Inside Motif — The Commerce Storefront Template
Motif is a complete fashion and retail storefront designed to deliver a high-converting customer journey from landing to order tracking.
Motif Storefront — seasonal hero, category tiles, and trending product grids.
Motif Storefront Features:
├── 🛒 Mega-Menu & Category Navigation
├── 🛍️ Interactive Product Catalog & Multi-Filter Drawer
├── 🔍 Product Detail Pages (Gallery, Size & Color Pickers, Related Items)
├── 💳 Slide-out Cart & Multi-Step Checkout Flow
├── 📦 Order Confirmation & Real-time Tracking Timeline
├── 📰 Editorial Journal / Magazine & Lookbook Pages
└── 👤 Customer Account Dashboard & Wishlist
Whether you're selling physical merchandise or digital subscriptions, Motif provides over 20 pre-built, prerender-safe routes. Restyling the entire storefront is as simple as overriding Tailwind's color scale—no CSS overrides or theme files required:
Motif Product Detail — variant selectors, image gallery, product tabs, and related recommendations.
/* Customize your brand color scale in src/tailwind.css */
@import "tailwindcss";
:root {
--color-blue-500: rgb(139 92 246); /* Rebrands the entire storefront to violet */
}
Inside Motif Admin — The Operations Dashboard Template
Motif Admin is the back-office dashboard designed to run the operations behind the storefront. Instead of static KPI mockups, it provides functional interface patterns for everyday inventory and order management.
Motif Admin Products — inventory health metrics and sortable, filterable SKU table.
Motif Admin Features:
├── 📈 Overview Dashboard (KPI Cards, Delta Pills & Revenue Sparklines)
├── 📦 Fulfillment Queue (Multi-Channel: Web, App, Retail & Wholesale)
├── 🏷️ Inventory & SKU Catalog Data Table (Stock Booking & Reorder Alerts)
├── 👥 Customers Directory & Segmentation
├── 📊 Analytics Suite (Revenue, Conversion Funnels & Channel Mix)
└── ⚙️ Store Settings (Team Roles, Theme Customizer & API Keys)
Motif Admin leverages Base UI Pro data table patterns, interactive modal drawers, and a built-in ⌘K Command Palette search. The dashboard state is powered by a central, typed CommerceStore service built with Angular Signals, making API integration straightforward.
The Power of the Pair: Motif Suite
While both templates can be purchased individually for $149 (which includes a full Base UI Pro license), they are best experienced together as Motif Suite for $199—saving $99 compared to buying them separately.
| Feature | Motif Storefront | Motif Admin | Motif Suite (Pair) |
|---|---|---|---|
| Target Audience | Customers & Shoppers | Operations & Admin Teams | Complete E-Commerce Stack |
| Included Routes | 20+ Storefront & Checkout routes | 6 Core App Routes + Shell | All 26+ Routes & Shells |
| Base UI Pro License | Included ($99 value) | Included ($99 value) | Included ($99 value) |
| Source Ownership | 100% Source Code | 100% Source Code | 100% Source Code |
| Price | $149 | $149 | $199 (Save $99) |
What You Get with Every Template Purchase:
- Full Source Code Ownership: You receive clean, uncompiled TypeScript and Angular source code. No encrypted bundles, no locked black-box dependencies.
- One-Time Payment: Lifetime updates with zero recurring subscription fees or seat-based licensing.
- Included Base UI Pro License: Use the 85+ Pro components and layouts across all of your projects.
Explore the Demos
Experience both templates live in your browser:
Start building your next Angular application with a matched storefront and admin pair today!
Start with the free tier
All primitives, all 19 form blocks, and 390 icons — no account, no licence key.
Get started