shadcn-admin-kit

The Shadcn Admin Kit provides a suite of components designed for creating and updating records. These are categorized into Forms, Inputs, Action Buttons, and Bulk Action Buttons.

Forms

• SimpleForm: A standard form container.
• SimpleFormIterator: A form container for handling collections of items.

Inputs

Inputs allow for specific data types and relationships:

• Text & Numbers: TextInput, NumberInput, TextArrayInput.
• Selection: SelectInput, RadioButtonGroupInput, AutocompleteInput, AutocompleteArrayInput.
• Booleans & Files: BooleanInput, FileInput.
• Arrays: ArrayInput.
• References: ReferenceInput (for single records), ReferenceArrayInput (for multiple records).
• Rich Text: RichTextInput (requires an optional installation).

Action Buttons

Used to trigger lifecycle events for a single record:

• CreateButton: Create a new record.
• EditButton: Enter edit mode.
• SaveButton: Save changes.
• CancelButton: Cancel current operation.
• DeleteButton: Remove a record.
• ShowButton: View record details.

Bulk Action Buttons

Used for performing operations on multiple selected records:

• BulkDeleteButton: Delete multiple selected records.
• BulkExportButton: Export multiple selected records.

An authProvider acts as a bridge between shadcn-admin-kit and your authentication backend (e.g., OAuth, MFA, or passwordless systems). It handles the lifecycle of a user session, including logging in, checking authentication status during navigation, and retrieving user identity.

By providing an authProvider to the <Admin> component, the kit automatically secures your application: unauthorized users are redirected to a login page, and they are redirected back to their intended destination after a successful login.

const authProvider = {
    // Send username and password to the auth server and get back credentials
    async login(params) {/** ... **/},
    // Check if an error from the dataProvider indicates an authentication issue
    async checkError(error) {/** ... **/},
    // Verify that the user's credentials are still valid during navigation
    async checkAuth(params) {/** ... **/},
    // Remove local credentials and notify the auth server of the logout
    async logout() {/** ... **/},
    // Retrieve the user's profile
    async getIdentity() {/** ... **/},
    // (Optional) Check if the user has permission for a specific action on a resource
    async canAccess() {/** ... **/},
};

The Shadcn Admin Kit <Layout> component automatically displays the <Loading> component in the main content area when a page component is loading, provided the loading duration exceeds 1 second. This behavior is powered by React Suspense and requires no manual configuration.

This is particularly useful when using code splitting to lazy load resource views (e.g., list or edit components).

import * as React from 'react';
import { Admin } from "@/components/admin";
import { Resource } from "ra-core";

import { dataProvider } from './dataProvider';

// Lazy loading components will trigger the automatic Loading component
const OrderList = React.lazy(() => import('./orders/OrderList'));
const OrderEdit = React.lazy(() => import('./orders/OrderEdit'));

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="orders" list={OrderList} edit={OrderEdit} />
        {/* ... */}
    </Admin>
);

If you need a custom layout that doesn't follow the default Shadcn Admin Kit edition page structure, you have two options:

1. <EditBase>: Renders its children within an EditContext. Components like <SimpleForm> can then automatically access the record and save handler from this context.
2. useEditController: A hook that provides the record and save function directly. This is best for completely custom implementations where you don't want to rely on the EditContext provider.

import { useEditController } from "ra-core";
import { SelectInput, SimpleForm, TextInput } from "@/components/admin";
import { Card, CardContent } from "@/components/ui";

export const BookEdit = () => {
    // Manually grab the controller logic
    const { record, save } = useEditController();
    return (
        <>
            <h1>Edit book {record?.title}</h1>
            <Card>
                <CardContent>
                    <SimpleForm 
                        record={record} 
                        onSubmit={values => save(values)}
                    >
                        <TextInput source="title" />
                        <SelectInput 
                            source="availability" 
                            choices={[{ id: "in_stock", name: "In stock" }]} 
                        />
                    </SimpleForm>
                </CardContent>
            </Card>
        </>
    );
};