Skip to main content
Adding a page to the admin panel or vendor portal takes one 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. No route table, 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: drop a route at the same path and re-compose the built-in page’s slots. 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

1

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>
  )
}
2

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.
3

Open it in the running panel

Start the project (bun run dev) and open the vendor portal — Reviews appears in the sidebar at the position set by rank, and /reviews renders your component.

​
Verify

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

​
FAQ

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.
Yes — place the file under a settings/ route segment and set nested: "/settings" in the config to group its sidebar item under Settings.
Identically — drop the file in the admin app’s src/routes/ instead. Both panels use the same SDK and conventions.

​
Next steps

Re-compose a built-in page

Add a custom API route