Announcing Next.js Starter Redesign with Medusa UI support

The Medusa Next.js Starter Template has been a popular starting point for Next.js developers working with Medusa. We thought it deserved some love, so the Starter just got a big update with a complete design overhaul, Medusa UI components, Next.js 14, and better product search.

The goal of the Starter is to provide a foundation for developers to build on. It consists of a fully functional ecommerce frontend, already connected to a Medusa backend. We aimed for a design that is fresh but neutral so you can easily customize it to fit your brand.

We redesigned the Starter to work with Medusa UI components and icons. This results in a fresh, recognizable design language and components that allow for easy customization.

Medusa UI is a React implementation of the Medusa design system. The collection includes components, hooks, utility functions, icons, and Tailwind CSS classes. It's designed for building a consistent user interface across Medusa Admin and other Medusa applications.

While we work toward Medusa 2.0, you can already try out some of our cutting-edge serverless modules with the Next.js Starter. The Starter has support for both the Product and the Pricing module, as well as Remote Query to build your own serverless product endpoints. If you’re feeling adventurous, you can enable these experimental features by enabling the

Copy to clipboard
MEDUSA_FF_MEDUSA_V2

feature flag in both the Starter and the server.

The homepage has been cleaned up and now shows featured product collections.

The product detail page has a new layout and now uses Medusa UI components.

The product overview page has been redesigned and now features sorting out of the box.

The Starter already supported Algolia and MeiliSearch out of the box, but now has a revamped instant search UI and a server-rendered search results page.

The new cart design is built almost exclusively from Medusa UI components.

The redesigned checkout process provides a streamlined experience, making it easier than ever for customers to finalize their purchases.

See the full new design in action in our updated hosted demo.

Want to build with the Starter yourself? To get started, clone the Medusa Next.js Starter Template from GitHub.