Medusa UI and general availability of Admin Extensions

During Recap in June, we announced the beta launch of Admin Extensibility — a way for developers and plugin authors to create components that enrich the merchant experience through additional context and tailored workflows.

Today we are excited to announce the general availability of Admin Extensibility. To try it out, upgrade to the latest version of Medusa and check out our guide to building your first Admin Extensions.

1
yarn add @medusajs/admin@latest @medusajs/medusa@latest

Our community has helped us improve our Admin Extensibility feature and provided input to enhance the developer experience further. One area we especially wanted to tackle was making it easy to create Admin Extensions with the same look and feel as the rest of the Admin Dashboard. As a result, we are excited to introduce Medusa UI – a component library for building beautiful and performant Admin Extensions fast. With minimal effort, the library enables developers to achieve the same look and feel as the rest of Medusa Admin when building UI Routes and Widgets.

Medusa UI

Medusa UI is a React implementation of the Medusa design system. Most components are based on Radix UI Primitives, and we use Tailwind CSS for styling, shipping our own preset with our customizations.

We aimed to keep the component APIs light, composable, and reasonably unopinionated. Much like the primitives we have built upon, we have tried to leverage and respect the native HTML API as much as possible, and we hope you will find the components easy to get started with and put together to build the experiences you need.

Using Medusa UI in an Admin Extension can be as simple as:

1234567891011121314151617181920
import type { WidgetConfig } from "@medusajs/admin"
import { Button, Container, Heading } from "@medusajs/ui"

export default ({ order }) => {

  const sendOrderToErp = () => {
    // POST order details to your ERP
  }

  return (
    <Container>
      <Heading>Your ERP</Heading>
      <Button onClick={() => sendOrderToErp()}>Push order</Button>
    </Container>
  )
}

export const config: WidgetConfig = {
    zone: "order.details.after",
} 

To help you get started with Medusa UI, we have published its own Documentation site. This should get you up and running and provide more information on the available components and how to use them. You will also find information on Medusa Icons we have made public and more details on theming.

In the coming weeks, we aim to provide more composition and complex Medusa-specific examples within the docs.

What’s next?

To get started building Admin Extensions, visit the guide in Our Documentation. We are excited to see how this new feature will be leveraged to build powerful digital commerce applications.