How to Create a Custom Page

Add a page to the vendor portal or admin panel from a single file. The dashboard SDK scans src/routes/ at build time, registers the route, and, if you export a config, adds it to the sidebar with a label and icon. There is no route table and no registration call.

Adding vs changing. This tutorial adds a brand-new page, the right move for new features. To change an existing page, don’t rebuild it. Add a widget or a custom field to inject into it. The decision guide compares every extension mechanism.

What you’ll build

A /reviews page in the vendor portal with a sidebar entry, from a single file.

Add the page

Create the route file

Drop a page.tsx under src/routes/ in your vendor app. The file path becomes the URL, and the default export is the page.

apps/vendor/src/routes/reviews/page.tsx

import { Container, Heading } from "@medusajs/ui"
import { Star } from "@medusajs/icons"
import type { RouteConfig } from "@mercurjs/dashboard-sdk"

export const config: RouteConfig = {
  label: "Reviews",
  icon: Star,
  rank: 10,
}

export default function ReviewsPage() {
  return (
    <Container className="divide-y p-0">
      <div className="flex items-center justify-between px-6 py-4">
        <Heading>Reviews</Heading>
      </div>
    </Container>
  )
}

Let the SDK wire it up

At build time the SDK registers the /reviews route, generates the sidebar item from config (label, icon, rank), and hot-reloads the route tree when you add or remove page files. Dynamic segments use brackets: src/routes/reviews/[id]/page.tsx becomes /reviews/:id. The full path-to-route table is in Extending Panels.

Open it in the running panel

Start the project, then open the vendor portal.

Terminal

bun run dev

Reviews appears in the sidebar at the position set by rank, and /reviews renders your component.

Verify

The sidebar shows Reviews with the star icon.
Navigating to /reviews renders the page inside the standard panel layout, with the sidebar and topbar intact.
Removing the config export keeps the route working but drops the sidebar item.
Deleting the file removes the route entirely.

FAQ

How do I fetch data on my page?

Use the typed API client with TanStack Query. The panels already ship both. For a full loop including a custom backend endpoint, follow Add a custom API route.

Can the page live under /settings?

Yes. Place the file under a settings/ route segment and set nested: "/settings" in the config to group its sidebar item under Settings.

Does the same work for the admin panel?

Identically. Drop the file in the admin app’s src/routes/ instead. Both panels use the same SDK and conventions.

How-Tos

Integrations

Deployment

What you’ll build

Add the page

Verify

FAQ

Next steps

Add a widget

Add a custom API route

​What you’ll build

​Add the page

​Verify

​FAQ

​Next steps

Add a widget

Add a custom API route

What you’ll build

Add the page

Verify

FAQ

Next steps