The problem this solves

An admin panel is not one product. It is the twelfth one you built, and the person opening it already learned eleven other layouts. If the home screen is /dashboard here, /overview there and /admin/main somewhere else, that operator pays the difference every time they switch.

Writing the convention down does not fix it — a document has no way to be wrong out loud. So the convention lives here as values you import, and the components read those values instead of restating them.

npm i @zero.sc/admin

The path contract

import { ADMIN_HOME, ADMIN_LOGIN, adminRootTarget, isPublicAdminPath } from '@zero.sc/admin';

ADMIN_HOME;                    // '/dashboard'  — not /home, not /overview, not /console
ADMIN_LOGIN;                   // '/login'      — the only path without a session
adminRootTarget(signedIn);     // '/dashboard' | '/login'
isPublicAdminPath('/reports'); // false

/ renders nothing. It decides. A root that is both a landing page and a home screen has to branch on session state at request time, and then it fights the cache forever.

An unauthorised request goes to /login, not to a 404. Hiding the page would be the right move on a user-facing surface, but here signing in is the normal path — answer an operator with "no such page" and they start doubting their own account instead of their session.

Sections

import { checkAdminSections, type AdminSection } from '@zero.sc/admin';

const sections: AdminSection[] = [
  { href: '/users', label: 'Users' },
  { href: '/approvals', label: 'Approvals' },
];

checkAdminSections(sections);  // [] when they are legal; the reasons when they are not

A section also takes an optional icon (a 12×12 SVG path string, so no icon package comes with this one) and a badge count. A badge of 0 is not drawn — a zero badge is noise.

Flat, plural, one level. /users is the list and /users/42 is one of them — a singular name makes those two indistinguishable without reading the code. Verbs stay out of paths: /approvals is a place, approving is a method.

The check returns reasons rather than throwing, so a service can run it in a test and print all of its violations at once instead of fixing them one build at a time.

The parts

import { AdminShell, AdminTable } from '@zero.sc/admin';

<AdminShell title="Zero Drive Admin" pathname="/users" sections={sections} account={<AccountMenu />}>
  <AdminTable rows={users} columns={cols} />
</AdminShell>

link is optional and defaults to <a>; pass next/link from a 'use client' wrapper if you want client navigation. A server component must not pass it — functions do not serialise.

| group | exports | |---|---| | frame | AdminShell · AdminPage · AdminPanel · PanelGrid · SectionHead · Toolbar | | a list you act on | AdminTable · FilterBar · Paginator · BulkBar · DetailDrawer · useSelection | | a decision queue | ApprovalQueue · AiVerdict | | numbers | StatTile · StatRow · Sparkline · BarMeter · TrendBadge · UsageMeter | | operations | LogStream · AuditTrail · JobList · IncidentBanner · DeployList · HealthGrid | | people | RoleBadge · MemberTable · TokenList · GrantToggle · PersonLine | | data | KeyValueList · JsonView · DiffView | | the honest states | ConfirmAction · EmptyAdmin · ErrorPane · LoadingPane | | settings | SettingRow · DangerZone |

ApprovalQueue takes an optional AiOpinion beside each item. It is rendered as an opinion, with its own label — a recommendation that looks like a verdict is a recommendation nobody audits.

What it does not do

It does not authenticate. Sign-in is Zero ID, and this package holds no session logic — it only tells you where an unauthenticated visitor belongs. It does not fetch, either: every component takes data as props, so the same table renders in a test with no server running.

Peers

React 19 and react-dom 19, and nothing else. @zero.sc/motion and @zero.sc/util come along as dependencies; neither pulls a runtime dependency of its own, and icons are inline SVG paths rather than an icon package.

Where this sits

License

MIT OR the Zero License v1.0 — see LICENSE.