Install Medusa UI for Medusa Admin Customizations

In this guide, you'll learn how to use Medusa UI for building Medusa Admin customizations.

Use Medusa UI in Medusa Admin#

The @medusajs/ui and @medusajs/icons packages are already installed as dependencies of the @medusajs/admin-sdk package in your Medusa project. They're installed by default in your Medusa plugins as well.

So, you can import the packages and use them in your Medusa Admin customizations without any additional installation steps.

For example, to use the UI and icon packages in a UI route:

src/admin/routes/custom/page.tsx
1import { defineRouteConfig } from "@medusajs/admin-sdk"2import { ChatBubbleLeftRight } from "@medusajs/icons"3import { Container, Heading } from "@medusajs/ui"4
5const CustomPage = () => {6  return (7    <Container className="divide-y p-0">8      <div className="flex items-center justify-between px-6 py-4">9        <Heading level="h2">This is my custom route</Heading>10      </div>11    </Container>12  )13}14
15export const config = defineRouteConfig({16  label: "Custom Route",17  icon: ChatBubbleLeftRight,18})19
20export default CustomPage

In this example, you use the Container and Heading components in the UI route. You also use the ChatBubbleLeftRight icon from the Icons package for the UI route's sidebar item.

Related Resources#

If you're building Medusa Admin customizations, check out the following documentation guides:

• Admin Widgets: Insert custom components into existing Medusa Admin pages.
• Admin UI Routes: Add new pages to the Medusa Admin.
• Admin Components & Layouts: Use Medusa UI to implement common Medusa Admin components and layouts for a consistent design in your customizations.