---
title: "Standalone Project"
description: "How to install and use Medusa UI in a 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:

<PackageInstall packageName="@medusajs/ui" />

### 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](https://tailwindcss.com/docs/installation).

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

<PackageInstall packageName="@medusajs/ui-preset" devDependency />

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

```tsx
module.exports = {
  presets: [require("@medusajs/ui-preset")],
  // ...
}
```

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:

```tsx
module.exports = {
  content: [
    // ...
    "./node_modules/@medusajs/ui/dist/**/*.{js,jsx,ts,tsx}",
  ],
  // ...
}
```

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:

```tsx
const path = require("path")

const uiPath = path.resolve(
  require.resolve("@medusajs/ui"),
  "../..",
  "\*_/_.{js,jsx,ts,tsx}"
)

module.exports = {
  content: [
    // ...
    uiPath,
  ],
  // ...
}

```

## Start building

---

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

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

<Feedback title={"Install in Standalone Project"} />