import { ChildDocs } from "docs-ui"

export const metadata = {
  title: `Admin Components & Layouts`,
}

# {metadata.title}

In this section of the documentation, you'll learn how to implement common Medusa Admin components and layouts.

These guides are useful to build components and layouts that follow the same design conventions as the Medusa Admin. The components and layouts are built on top of the [Medusa UI package](!ui!).

<Note title="Tip">

Refer to the [Medusa UI documentation](!ui!) for a full list of components.

</Note>

## Layouts

These layout components allow you to set the layout of your [UI routes](!docs!/learn/fundamentals/admin/ui-routes) similar to the layouts used in the Medusa Admin.

<ChildDocs showItems={["Layouts"]} onlyTopLevel={false} hideTitle />

---

## Components

These components allow you to use common Medusa Admin components in your custom UI routes and widgets.

<ChildDocs showItems={["Components"]} onlyTopLevel={false} hideTitle />
