AdminArea
The admin frame. An icon rail plus sub-sidebar with ready-made admin navigation, an environment tag, an account button and an impersonation banner, plus AdminPage for the screen body.
Code
import { AdminArea, AdminPage, AdminUsers } from "@fadymondy/nasaq/web";export function UsersScreen({ users, roles }) { return ( <AdminArea activeItem="users" user={{ name: "Sara Alharbi", email: "[email protected]" }} environment="Production"> <AdminPage title="Users" breadcrumbs={[{ label: "People" }, { label: "Users" }]}> <AdminUsers users={users} roles={roles} /> </AdminPage> </AdminArea> );}Admin · beta
Live examples and controls: AdminArea in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/admin-area.jsonIconRailSidebar with the admin navigation ready made (Overview, People, Tenants, Security, Settings), plus
the pieces every back office needs. AdminPage gives each screen a breadcrumb, title and actions.
When to use
- Internal tools that manage users, workspaces, plans and security.
When not to use
- The customer-facing app: use
AppShell.
Import
import { AdminArea, AdminPage } from "@fadymondy/nasaq/web";Quick start
import { AdminArea, AdminPage, AdminUsers } from "@fadymondy/nasaq/web";
export function UsersScreen({ users, roles }) {
return (
<AdminArea activeItem="users" user={{ name: "Sara Alharbi", email: "[email protected]" }} environment="Production">
<AdminPage title="Users" breadcrumbs={[{ label: "People" }, { label: "Users" }]}>
<AdminUsers users={users} roles={roles} />
</AdminPage>
</AdminArea>
);
}Anatomy
AdminArea data-slot="admin-area"
├─ impersonation banner data-slot="admin-impersonation", role="status"
└─ IconRailSidebar rail: brand, sections, railFooter, user avatar
└─ AdminPage data-slot="admin-page": breadcrumb, h1, description, actions, childrenAPI
AdminArea
Takes every IconRailSidebar prop except railFooter and labels, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
sections | RailSection[] | defaultAdminSections(locale) | Item ids: dashboard, activity, users, roles, invitations, workspaces, plans, billing, invoices, coupons, audit, sessions, api-keys, settings. |
user | AdminUser | none | { name, email, avatar? }, shown on the rail. |
railFooter | ReactNode | none | Extra controls above the user. |
environment | string | none | A warning tag above the sub-sidebar. |
impersonating | { name, email? } | null | none | Shows the pinned banner. |
onStopImpersonating | () => void | Promise<void> | none | Banner button. |
labels | AdminAreaLabels | en / ar |
AdminPage
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | required | The h1. |
description | ReactNode | none | |
breadcrumbs | AdminBreadcrumb[] | none | { label, href? }; the last is the current page. |
actions | ReactNode | none | Inline end of the title. |
Examples
- Impersonation:
impersonating={{ name: "Omar" }} onStopImpersonating={exit}. - Own navigation: pass
sectionsbuilt likedefaultAdminSections.
Accessibility
Inherits the rail keyboard model. The banner is a role="status" region; the breadcrumb is a labelled nav.
RTL & i18n
Built-in English and Arabic labels. Emails and IDs stay LTR.
Styling & tokens
Uses bg-nq-warning-soft, text-nq-warning-text, text-h1. Extend with className.
Do / Don't
- Do show the impersonation banner on every screen while acting as a user.
- Do not hide the environment tag in production.
Related
Lab
https://docs.nasaqui.com/?path=/docs/components-admin-admin-area--docs
ViewToggle
Switches how a collection is shown (table, grid, board, list or calendar), with one view always pressed and optional persistence in localStorage.
AdminWorkspaces
The tenants and plans console for an admin area. A workspaces table with seat usage, change plan, suspend and reactivate, and a plan catalogue with an edit dialog.