Single Column Layout - Admin Components
Archived: Medusa exports a
LayoutComposer component from the @medusajs/dashboard package since v2.21.0. Use it with the core:single-column layout instead of building your own layout, as explained in the LayoutComposer documentation. This guide is kept for reference only.In this guide, you'll learn how to create a layout component that matches the Medusa Admin's design conventions for pages with a single column of content.
The Medusa Admin has pages with a single column of content.
Note: This doesn't include the sidebar, only the main content.
To create a layout that you can use in UI routes to support one column of content, create the component src/admin/layouts/single-column.tsx with the following content:
export type SingleColumnLayoutProps = {
children: React.ReactNode
}
export const SingleColumnLayout = ({ children }: SingleColumnLayoutProps) => {
return (
<div className="flex flex-col gap-y-3">
{children}
</div>
)
}
The SingleColumnLayout accepts the content in the children props.
Example#
Use the SingleColumnLayout component in your UI routes that have a single column. For example:
import { defineRouteConfig } from "@medusajs/admin-sdk"
import { ChatBubbleLeftRight } from "@medusajs/icons"
import { Container } from "../../components/container"
import { SingleColumnLayout } from "../../layouts/single-column"
import { Header } from "../../components/header"
const CustomPage = () => {
return (
<SingleColumnLayout>
<Container>
<Header title="Custom Page" />
</Container>
</SingleColumnLayout>
)
}
export const config = defineRouteConfig({
label: "Custom",
icon: ChatBubbleLeftRight,
})
export default CustomPage
This UI route also uses a Container and a Header custom components.