Menu

Introduction

Primitives for building Medusa applications.

Welcome to Medusa UI, a React implementation of the Medusa design system. It is a collection of components, hooks, utility functions, icons, and Tailwind CSS classes that can be used to build a consistent user interface across the Medusa Admin and other Medusa applications.

Medusa UI
Colors, type, icons and components

Packages#

Medusa UI is split into multiple packages. Each package is published to npm and can be installed separately.

  • @medusajs/ui - React components, hooks, and utility functions used in Medusa UI.
  • @medusajs/ui-preset - Tailwind CSS preset containing all the classes used in Medusa UI.
  • @medusajs/icons - Icons used in Medusa UI.

About#

At its core, Medusa UI is a styled and slightly opinionated implementation of Radix Primitives. Our team have also referenced the fantastic shadcn/ui for inspiration in certain implementations.

Our team strongly believe in keeping the components simple and composable, much like Medusa's foundation. This allows you to build whatever you need. Our team have tried to avoid overloading the component API and, instead, leveraged the native HTML API, which gets implemented and respected accordingly, and passed to the underlying elements.

Was this page helpful?
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break
⇧↵