Standalone Project

Installation#

Medusa UI is a React UI library and while it's intended for usage within Medusa projects, it can also be used in any React project.

Install Medusa UI#

Install the React UI library with the following command:

Configuring Tailwind CSS#

The components are styled using Tailwind CSS, and in order to use them, you will need to install Tailwind CSS in your project as well. For more information on how to install Tailwind CSS, please refer to the Tailwind CSS documentation.

All of the classes used for Medusa UI are shipped as a Tailwind CSS customization. You can install it with the following command:

After you have installed Tailwind CSS and the Medusa UI preset, you need to add the following to your tailwind.config.jsfile:

Code
1module.exports = {2  presets: [require("@medusajs/ui-preset")],3  // ...4}

In order for the styles to be applied correctly to the components, you will also need to ensure that @medusajs/ui is included in the content field of your tailwind.config.js file:

Code
1module.exports = {2  content: [3    // ...4    "./node_modules/@medusajs/ui/dist/**/*.{js,jsx,ts,tsx}",5  ],6  // ...7}

If you are working within a monorepo, you may need to add the path to the @medusajs/ui package in your tailwind.config.js like so:

Code
1const path = require("path")2
3const uiPath = path.resolve(4  require.resolve("@medusajs/ui"),5  "../..",6  "\*_/_.{js,jsx,ts,tsx}"7)8
9module.exports = {10  content: [11    // ...12    uiPath,13  ],14  // ...15}

Start building#

You are now ready to start building your application with Medusa UI. You can import the components like so:

Code
import { Button, Drawer } from "@medusajs/ui"

Updating UI Packages#

Medusa's design-system packages, including @medusajs/ui, @medusajs/ui-preset, and @medusajs/ui-icons, are versioned independently. However, they're still part of the latest Medusa release. So, you can browse the release notes to see if there are any breaking changes to these packages.

To update these packages, update their version in your package.json file and re-install dependencies. For example: