React admin: structure and extensions

ENTITY_NAME in a path is a placeholder for your generated entity directory, for example product for Product. EntityName denotes its code type. Replace these with actual project names; the Article examples below illustrate an entity rather than a required project module.

Everything related to Article belongs to one feature: types, columns, form, pages and custom extensions. Shared mechanisms live in shared; app assembles entity interfaces into the admin application.

Changing one cell or form control does not require replacing the whole page. Other standard parts continue to update from the model.

The tree shows main paths using Article as an example, not a complete inventory. Files depend on the model and project capabilities.

admin/src/ — Article CRUD example

src/
├── main.tsx
├── App.tsx
├── app/
│   ├── providers.tsx
│   ├── router.tsx
│   ├── menu.ts
│   ├── layout.tsx
│   └── theme.ts
├── features/ENTITY_NAME/
│   ├── generated/
│   │   ├── model.ts
│   │   ├── schema.ts
│   │   ├── columns.tsx
│   │   ├── form.tsx
│   │   ├── list-page.tsx
│   │   ├── edit-page.tsx
│   │   ├── routes.tsx
│   │   └── ui-extension.tsx
│   └── custom/
│       ├── extension.tsx
│       └── ui-extension.tsx
└── shared/
    ├── api/
    │   ├── client.ts
    │   └── generated/client.ts
    ├── forms/field-controls.tsx
    └── list-state.tsx

app — UI assembly

Providers, layout, theme, menu and routes connect entity interfaces. This is where shared mechanisms are wired; an individual feature does not need to know the whole application structure.

features — an entity interface

Article types, schema, columns, form and pages sit alongside their extensions. When the entity changes, related code stays in one feature rather than being scattered across general form and table folders.

shared — reusable mechanisms

HTTP clients, form controls, list state and media support are reused. Generated forms follow common loading, validation and saving rules. Custom components placed in supported slots must follow the same contract.

generated declares the contract; custom implements it

generated/ui-extension.tsx defines targeted extension types. Implement cells, columns, actions, controls and wrappers in custom/ui-extension.tsx. custom/extension.tsx contains page hooks and full replacements through PageOverride.

Targeted extensions have specific contracts for editable string/text controls, wrappers and media. Slots do not allow arbitrary replacement of every UI element. An extra column uses the already loaded page of data; it does not automatically add server-side sorting or filtering across the whole list.

Two ways to customize the interface

Routing uses ArticleListPageOverride ?? ArticleListPage: if no custom component is set, the generated page opens. Configure PageOverride in source; there is no Generator UI switch for it.

Practical guides

• Custom logic and interface in custom zones