Configuration

The panel is up and it looks generic. The React is not where you fix that. The admin asks the server what to render, so navigation and dashboard are data.

One file on the server

Put a file at config/admin.ts under your server directory. Codegen finds it and the app carries it as config.admin. Import adminConfig from #questpie/factories, the same generated factory your collections use.

Every key is optional. A file with one key in it is a valid file.

import { adminConfig } from "#questpie/factories";

export default adminConfig({
	branding: {
		name: "Acme Studio",
		logo: { src: "/logo-light.svg", srcDark: "/logo-dark.svg" },
	},
	sidebar: {
		sections: [{ id: "content", title: "Content" }],
		items: [
			{ sectionId: "content", type: "collection", collection: "posts" },
			{ sectionId: "content", type: "global", global: "siteSettings" },
		],
	},
	dashboard: {
		title: "Operations",
		items: [
			{
				id: "published",
				type: "stats",
				collection: "posts",
				label: "Published",
				filter: { published: true },
			},
		],
	},
});

questpie generate   # once, so the generator picks the new file up

Reload /admin. The panel is called Acme Studio, the sidebar has a Content section with two entries, and the dashboard shows one counter. questpie dev regenerates on later edits, so that is the only manual generate.

The sidebar is a contribution

Sections and items are two flat lists. An item names its section with sectionId instead of nesting inside it. Modules write the same two lists, so their navigation lands beside yours instead of replacing it.

@questpie/admin contributes a section called administration, holding user and assets. Turn the audit module on and its log joins that same section. Declare a section with an id someone else already used and your title wins.

position: "start" prepends an item rather than appending it. Labels and icons fall back to the collection's own, so set those once with .admin().

sidebarMode: "replace" throws away every module contribution and keeps only your sidebar. Users and assets disappear too, until you list them yourself.

Branding

Four fields, all optional, all of them content. No colours live here.

logo takes a URL string, or { src, srcDark } for one image per theme. It also takes a component reference, if you ship the mark as a component.

Branding is the only part of the config an unauthenticated visitor receives. That is what puts your name on the login screen before anyone signs in. Colours, fonts and radius are CSS variables. See Theming.

Mount it

AdminLayoutProvider wraps the whole admin route and supplies the sidebar, the theme and the data clients. AdminRouter sits inside it and renders one screen.

import { AdminLayoutProvider } from "@questpie/admin/client";
import { Outlet, useLocation } from "@tanstack/react-router";

import { authClient } from "@/lib/auth-client";
import { client } from "@/lib/client";
import { queryClient } from "@/lib/query-client";
import { admin } from "@/questpie/admin/admin";

function AdminLayout() {
	const location = useLocation();

	return (
		<AdminLayoutProvider
			admin={admin}
			client={client}
			queryClient={queryClient}
			authClient={authClient}
			LinkComponent={AdminLink}
			activeRoute={location.pathname}
			basePath="/admin"
			useServerTranslations
		>
			<Outlet />
		</AdminLayoutProvider>
	);
}

The catch-all route below it hands AdminRouter the segments after the base path. /admin/collections/posts becomes ["collections", "posts"].

<AdminRouter segments={segments} navigate={navigate} basePath="/admin" />

create-questpie writes both files. The Next version is the same two components, with usePathname and useParams in place of the TanStack hooks.

Interface language

locale sets which languages the admin chrome offers. Leave it out and the server offers all eight it ships with: cs, de, en, es, fr, pl, pt, sk. The user menu in the sidebar footer gets a switcher once there is more than one.

locale: { locales: ["en", "sk"], defaultLocale: "en" },

Pass useServerTranslations on the provider so the client asks the server for that list. Content locales are a separate setting and live in config/app.ts.

Where each topic lives

Next

Dashboard is the one key worth its own page. Nine widget types, and a server loader for numbers none of them can count.