export const metadata = { title: Single Column Layout - Admin Components, }

{metadata.title}

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.

</Note>

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:

tsx

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:

tsx

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.