Layer 02 — admin
UIFrame
The admin dashboard. Next.js and shadcn/ui on Base UI primitives, with a swappable theme and font system, talking to the Engine API.
01 — THE SHELL
Multi-tenancy you can see.
Same shell, different tenant. The JWT carries the scope, so every call after login inherits it — there is no per-request tenant id for a developer to forget.
Seats
128
MRR
$12,400
Roles
6
Same shell, isolated schema per tenant — switching automatically
A schematic of the admin shell, drawn to show the tenant switch — not a screenshot of the running app.
Specification
- Framework
- Next.js 16, App Router, React 19
- Components
- shadcn/ui on Base UI primitives
- Styling
- Tailwind CSS, swappable theme presets
- Forms
- react-hook-form with generated Zod schemas
- API client
- Fetch wrapper with JWT, interceptors, error handling
- Runtime
- Bun recommended, Node.js 20+ supported
- Dev port
- 5200, chosen to avoid the backend on 5201
- Licence
- MIT
02 — WHAT YOU GET
Built, not scaffolded.
A working admin shell
Users, roles, auth, settings and CRM pages already built and wired — not a blank dashboard with placeholder cards.
It can look like your product
A real multi-theme, multi-font system rather than one locked palette. Change the preset and every component follows.
shadcn/ui, already wired
The component layer you would have picked anyway, connected to the theme tokens and the admin shell.
Form generator
Describe an entity in JSON and get a Zod schema plus a wired react-hook-form component written into your repo.
03 — GENERATORS
JSON in, a real component out.
Describe an entity and the generator writes a Zod schema and a wired react-hook-form component into src/components/forms/.
The output is yours to edit. It is code written into your repository once, not a runtime abstraction that regenerates over your changes.
Generator docs$
→ reading schema.json — entity: Product
→ wrote src/components/forms/product-form.tsx
→ wrote src/components/forms/product.schema.ts
edit them freely — they will not be regenerated
04 — READ THIS FIRST
UI Frame expects Engine.
This is not a standalone dashboard template. The auth flow, the tenant scoping and the API client all assume the Engine's contract, and the dashboard needs the backend running on localhost:5201 for its data views to resolve.
Fork UI Frame on its own and you will be rebuilding that contract yourself. That is a fair choice — just not a free one.