Medusa UI Documentation
Welcome to Medusa UI, a React implementation of the Medusa design system.
Medusa UI 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 client applications.
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.
Learn how to install and use these packages either for Medusa Admin customizations or a standalone project.
How Medusa UI is Built#
At its core, Medusa UI is a styled and slightly opinionated implementation of Radix Primitives. Our team has also referenced the fantastic shadcn/ui for inspiration in certain implementations.
Our team strongly believes in keeping the components simple and composable, much like Medusa's foundation. This allows you to build whatever you need.
Our team has tried to avoid overloading the component API and, instead, has leveraged the native HTML API, which gets implemented and respected accordingly, and passed to the underlying elements.