Motif — A complete Angular commerce storefront
Motif is a production-ready fashion storefront built entirely with Base UI Pro — mega menu, product listing, product detail, cart, checkout, order tracking and an editorial journal. Every route is source code you own, not a theme you rent.
One-time payment
template + Pro license
- 20+
- Pages & routes
- 60+
- Components used
- 100%
- Source you own
- SSR
- Prerender-safe
The bundle is the cheapest way to get Pro
Base UI Pro on its own is $99. For $149 you get the same Pro license plus the entire Motif storefront — every page already built, wired and styled.
What makes Motif different
Most templates are a hero section and a pricing table. Motif is the whole shop.
A real storefront, not a landing page
Mega-menu navigation, category listings, filters, product detail with gallery and variants, cart, checkout and order tracking — the whole purchase journey.
Angular 21, standalone & zoneless
Signal-based state, standalone components and the new control flow throughout. No NgModules, no zone.js, no legacy patterns to unpick.
Restyle it in an afternoon
Pure Tailwind utilities with standard color tokens. Override the blue scale and the entire storefront rebrands — no theme files, no CSS overrides.
SSR-safe and prerendered
Every route renders to static HTML, verified the same way base-ui.net is. Ship it on any Angular SSR host without hydration surprises.
Keyboard and screen-reader ready
Focus-trapped overlays, labelled controls and visible focus rings inherited from the Base UI Pro components underneath.
Includes Base UI Pro
The bundle ships a full Pro license, so every component Motif is built from is yours to reuse across all your other projects.
Every screen, already built
Browse the real thing in the live demo.
What's inside
20+ routes covering the full customer journey — browse, buy, track, read.
Shopping
Storefront home with hero & drops Category listing with filters Product detail with gallery Quick view overlay Wishlist Search results
Checkout
Cart with quantity controls Multi-step checkout Order confirmation Order tracking timeline
Content
Editorial journal index Article detail Collections & lookbook Brand / about page
Account & support
Sign in & register Account dashboard Help & FAQ Size guide
Motif + Base UI Pro
One payment. The complete storefront source, a full Pro license for every other project, and lifetime updates on both.
Complete Motif Angular project Base UI Pro license (worth $99) Unlimited commercial & client projects Lifetime updates & support
Frequently asked questions
Included. The $149 bundle ships a full Base UI Pro license alongside the Motif source, so every component the storefront is built from is yours to reuse in unlimited other projects. Buying Pro on its own is $99 — the template itself works out at $50.
After checkout you receive a license key by email. Set it as BASE_UI_LICENSE_KEY and the CLI installs the Pro components, and you get a download link for the complete Motif Angular project — a normal Angular workspace you can npm install and run immediately.
Yes. The license covers one developer building unlimited end products, including commercial and client work. You can launch a real store on it. What you cannot do is resell Motif itself as a template or UI kit.
No. Motif is the complete frontend — every page, state and interaction, with typed mock data behind a small service layer. Swap that service for your commerce API (Shopify, Medusa, custom) and the UI keeps working.
Yes. Every route prerenders to static HTML, using the same SSR-safety rules enforced in CI on base-ui.net. The live demo is a prerendered build.
Yes — lifetime updates for both Motif and Base UI Pro. Component updates arrive through npx base-ui-cli update; template updates are re-downloadable from your license page.
14-day money-back guarantee. Email support@base-ui.net within 14 days of purchase for a full refund, no explanation needed.
Not ready yet?
Explore the components Motif is built from, or compare the plain Pro license.
Theme Customizer
Customize your UI instantly.
Primary Color
Border Radius
Background
Mode
Copy these styles to paste into your project's global CSS and Tailwind config.