This skill should be used when building, modifying, or debugging an admin application with shadcn-admin-kit — including creating resources, lists, forms, data fetching, authentication, relationships between entities, custom pages, or any CRUD admin interface built with this kit.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
This skill should be used when building, modifying, or debugging an admin application with shadcn-admin-kit — including creating resources, lists, forms, data fetching, authentication, relationships between entities, custom pages, or any CRUD admin interface built with this kit.
Shadcn Admin Kit Development Guide
Shadcn Admin Kit is a component library for building admin/CRUD applications using React, TypeScript, and shadcn/ui. It provides 98+ pre-built components on top of ra-core (from react-admin), combining react-admin's proven data layer with modern shadcn/ui components styled via Tailwind CSS. Before writing custom code, always check if shadcn-admin-kit already provides a component or hook for the task. Full documentation: https://marmelab.com/shadcn-admin-kit/docs
Shadcn Admin Kit never calls APIs directly. All communication goes through providers — adapters that translate standardized calls into API-specific requests. The three main providers are:
dataProvider: All CRUD operations (getList, getOne, create, update, delete, getMany, getManyReference, updateMany, deleteMany). See DataProviders and 50+ existing adapters.
authProvider: Authentication and authorization. See Authentication.
Critical rule: Never use fetch, axios, or direct HTTP calls in components. Always use data provider hooks. This ensures proper caching, loading states, error handling, authentication, and optimistic rendering.
Composition (Not God Components)
Shadcn Admin Kit uses composition over configuration. Override behavior by passing child components, not by setting dozens of props:
To customize the layout, pass a custom layout component to <Admin layout={MyLayout}>. To customize the sidebar, pass it to <Layout sidebar={MySidebar}>. This chaining is by design.
Context: Pull, Don't Push
Components expose data to descendants via React contexts. Access data using hooks rather than passing props down:
useRecordContext() — current record in Show/Edit/Create views. See useRecordContext.
useListContext() — list data, filters, pagination, sort in List views. See useListContext.
useShowContext(), useEditContext(), useCreateContext() — page-level state for detail views.
useTranslate() — translation function from i18nProvider.
useGetIdentity() — current user from authProvider.
Hooks Over Custom Components
When a component's UI doesn't fit, use the underlying hook instead of building from scratch. Controller hooks (named use*Controller) provide all the logic without the UI:
useListController() — list fetching, filtering, pagination logic
useEditController() — edit form fetching and submission logic
useShowController() — show page data fetching logic
Routing
<Resource> declares CRUD routes automatically (/posts, /posts/create, /posts/:id/edit, /posts/:id/show). Use <CustomRoutes> for non-CRUD pages. Use useCreatePath() to build resource URLs and <Link> from react-router for navigation. The router is React Router v7. See Routing.
The dataProvider must include credentials (Bearer token, cookies) in requests — authProvider handles login, but dataProvider handles API calls. Configure httpClient in data provider setup.
Relationships Between Entities
Fetching all the data (including relationships) upfront for a given page is an anti-pattern. Instead, fetch related records on demand using reference fields and inputs.
Displaying Related Records (Fields)
{
/* Show the company of the current record based on its company_id */
}
<ReferenceField source="company_id" reference="companies" />;
{
/* Show a list of related records (reverse FK) */
}
<ReferenceManyField reference="comments" target="post_id">
<DataTable><TextFieldsource="body" /><DateFieldsource="created_at" /></DataTable>
</ReferenceManyField>;
{
/* Show multiple referenced records (array of IDs) */
}
<ReferenceArrayField source="tag_ids" reference="tags">
<SingleFieldList><ChipFieldsource="name" /></SingleFieldList>
</ReferenceArrayField>;
Forms are built on React Hook Form with Zod validation. Use <SimpleForm> for single-column layouts. See SimpleForm.
Pass validators to input components: required(), minLength(min), maxLength(max), minValue(min), maxValue(max), number(), email(), regex(pattern, message), or a custom function returning an error string.
