Admin Overview

The admin is the editing surface your team logs into. In Dyrected you never build it by hand — it is generated from the schema you already wrote in dyrected.config.ts. Define a collection once and the admin renders its list table, filters, edit form, media browser, and global editors for you.

By the end of this page you should understand the mental model behind the admin, where it can run, what the built-in screens do, and which parts you can customize. Each customization has its own page; this one is the map.

The mental model: schema in, admin out

There is no separate "admin config file" that mirrors your data model. The admin reads your live schema and builds itself from it:

• Each collection becomes a list view and an edit form.
• Each field becomes an input, chosen from its type.
• upload: true collections become a media browser.
• Globals become single-document editors.

Because the UI is derived, most of what you'd want to change about the admin is expressed back in the schema — on the admin key of a collection, global, or field — not in a separate UI layer. When you do need to reach into the interface itself (custom widgets, injected panels, theming), there are explicit, typed entry points rather than a template you edit.

Where the admin runs

There are two ways your team can use the admin, and the choice is independent of where your content is stored:

• Hosted admin at app.dyrected.com, managed by Dyrected.
• Embedded admin inside your own app, usually at /admin.

Embedding is a thin wrapper around one of two primitives from @dyrected/admin:

Every framework integration — @dyrected/next, @dyrected/vue, @dyrected/nuxt — is a small adapter over these two. The most common setup, a Next.js catch-all route, looks like this:

// app/admin/[[...path]]/page.tsx
import { DyrectedAdmin } from "@dyrected/next/admin";

export default function AdminPage() {
  return <DyrectedAdmin />;
}

Once that route loads, you have a working admin against your configured API. If you want it somewhere other than /admin, see Custom Admin Panel Location.

DyrectedAdmin props you will commonly touch

Most embedded setups only need the default wrapper, but DyrectedAdmin does expose a few props that are useful when the host app should stay in control.

• components injects custom admin UI such as custom field renderers, dashboards, or list slots.
• theme sets the preferred admin theme: system, light, or dark.
• systemTheme provides the currently resolved OS theme: light or dark.
• onThemeChange lets the admin push theme changes back to the host app.
• onNavigate lets the host app own routing when the admin is mounted under a custom path.

The exact prop naming follows the framework wrapper:

• React and Next use systemTheme and onThemeChange
• Vue and Nuxt use system-theme and on-theme-change in templates

Use these theme props when your site already has a shared dark and light mode preference and the embedded admin should follow that same state.

What you get out of the box

The generated admin is a small, opinionated set of screens:

• Dashboard — a lightweight editorial home with quick "New" actions, recent edits, and a "needs attention" panel that flags setup gaps like a missing admin.useAsTitle or missing media alt text.
• Collection list — a sortable, searchable table, and the starting point for most editing. It also supports bulk selection, an inline spreadsheet mode, and CSV import/export. See The Collection List.
• Detail view — a read-first summary for a collection record or global, generated from your fields or shaped with a custom detail layout. See Detail Views.
• Collection edit / create — the main form. Fields render in the order of your fields array. The sidebar shows the document ID, timestamps, and a publishing panel when a status field exists. If admin.previewUrl is set, a live preview pane can open beside the form.
• Media — shown automatically for any upload: true collection: a thumbnail grid, drag-and-drop upload zone, and a file-detail dialog.
• Global editor — a single full-page form for each global.

The sidebar itself is built from your config at runtime: collections are grouped by admin.group, upload collections are gathered under a "Media" section, globals are listed below, and anything marked admin.hidden: true is left out. Set admin.icon to any Lucide icon name to override the default per item.

What you can customize

Most customization lives in the schema; a few things reach into the UI. Here is where each concern is documented:

• Branding and theme — logo, brand colors, fonts, and full CSS-variable control, in light and dark mode: Customizing CSS.
• Browser tab title and favicon — Metadata.
• Preview links and the live preview pane — Preview, with the full client sync flow under Live Preview.
• Custom field inputs and injected panels — Custom Components.
• Hooks and composables for custom admin UI — Hooks & Composables, then the focused pages for media, form and field state, and theme state.
• Per-editor column and field layout — Preferences.
• Where the panel is mounted — Custom Admin Panel Location.
• Accessibility posture — Accessibility.

What the admin reflects, but does not decide

The admin never invents its own permission logic. When a user is signed in, it asks the server which actions they can take and renders accordingly: collections they can't read disappear from the sidebar, "Create" hides when they can't create, and the edit form goes read-only when they can't update. Access is resolved server-side and the UI only reflects it. If a screen looks wrong for a user, the answer is almost always in your Access Control rules, not the admin.

Where to go next

If you're setting the admin up for the first time, embed it with your framework's quick start, then come back here to customize. If it's already running, jump straight to the customization page you need from the list above.