Container - Admin Components

In this guide, you'll learn how to create a container component that matches the Medusa Admin's design conventions.

The Medusa Admin wraps each section of a page in a container.

To create a component that uses the same container styling in your widgets or UI routes, create the file src/admin/components/container.tsx with the following content:

Code
1import { 2  Container as UiContainer,3  clx,4} from "@medusajs/ui"5
6type ContainerProps = React.ComponentProps<typeof UiContainer>7
8export const Container = (props: ContainerProps) => {9  return (10    <UiContainer {...props} className={clx(11      "divide-y p-0",12      props.className13    )} />14  )15}

The Container component re-uses the component from the Medusa UI package and applies to it classes to match the Medusa Admin's design conventions.

Example#

Use that Container component in any widget or UI route.

For example, create the widget src/admin/widgets/product-widget.tsx with the following content:

src/admin/widgets/product-widget.tsx
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { Container } from "../components/container"3import { Header } from "../components/header"4
5const ProductWidget = () => {6  return (7    <Container>8      <Header title="Product Widget" />9    </Container>10  )11}12
13export const config = defineWidgetConfig({14  zone: "product.details.before",15})16
17export default ProductWidget

This widget also uses a Header custom component.