Shadcn Admin Kit

https://marmelab.com/shadcn-admin-kit/docs
Admin
Shadcn Admin Kit is a React library of pre-built components for creating admin applications with...
Tokens:136,870
Snippets:1,020
Trust Score:9.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Basic Admin Component Setup in React

Source: https://marmelab.com/shadcn-admin-kit/docs/admin

Demonstrates the fundamental setup of the Admin component in a React application. It requires the Admin and Resource components, a dataProvider (like simpleRestProvider), and at least one Resource definition. This example shows how to initialize the admin with a REST API endpoint and define a 'posts' resource.

```jsx
import { Admin } from "@/components/admin";
import { Resource } from 'ra-core';
import simpleRestProvider from 'ra-data-simple-rest';


import { PostList } from './posts';


const App = () => (
    <Admin dataProvider={simpleRestProvider('http://path.to.my.api')}>
        <Resource name="posts" list={PostList} />
    </Admin>
);


export default App;
```

--------------------------------

### Create Tanstack Start Project

Source: https://marmelab.com/shadcn-admin-kit/docs/install

Initializes a new Tanstack Start project. Prompts for project name, selects no toolchain, and installs Tailwind CSS. This command sets up the basic project structure.

```bash
npx @tanstack/cli create
```

--------------------------------

### Data Provider Setup

Source: https://marmelab.com/shadcn-admin-kit/docs/dataproviders

Demonstrates how to install and configure the Simple REST data provider for your shadcn-admin-kit application.

```APIDOC
## Data Provider Setup

### Description
This section details the process of setting up a Data Provider in your shadcn-admin-kit application, using `ra-data-simple-rest` as an example.

### Installation

Install the `ra-data-simple-rest` package:

```bash
npm install ra-data-simple-rest
```

### Configuration

Initialize the provider with your REST API endpoint and pass it to the `<Admin>` component.

### Request Body

```javascript
// in src/App.js
import { Admin } from "@/components/admin";
import { Resource } from 'ra-core';
import simpleRestProvider from 'ra-data-simple-rest';

import { PostList } from './posts';

const dataProvider = simpleRestProvider('http://path.to.my.api/');

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="posts" list={PostList} />
    </Admin>
);

export default App;
```

### Response

Once configured, all shadcn-admin-kit components will interact with your API through the configured Data Provider.
```

--------------------------------

### Admin Application Setup with Resource Definition

Source: https://marmelab.com/shadcn-admin-kit/docs/create

This snippet shows the basic setup of the Admin application in `src/App.js`. It imports the `Admin` component and defines a `Resource` for 'products', linking it to the `ProductCreate` component. This configures the application to handle product creation.

```javascript
import { Admin } from '@/copmponents/admin';
import { Resource } from 'ra-core';


import { dataProvider } from './dataProvider';
import { PostCreate } from './posts';


const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="products" create={ProductCreate} />
    </Admin>
);


export default App;
```

--------------------------------

### Start Development Server

Source: https://marmelab.com/shadcn-admin-kit/docs

Commands to navigate into the project directory and launch the development server.

```bash
cd shadcn-admin-app
npm run dev
```

--------------------------------

### Run Development Server

Source: https://marmelab.com/shadcn-admin-kit/docs/install

Standard commands to start the development server for the project.

```bash
npm run dev
# or
yarn dev
```

--------------------------------

### Install Simple REST Data Provider

Source: https://marmelab.com/shadcn-admin-kit/docs/dataproviders

Install the necessary package to enable the Simple REST data provider for your application.

```bash
npm install ra-data-simple-rest
```

--------------------------------

### Install React Admin Enterprise Core

Source: https://marmelab.com/shadcn-admin-kit/docs/referencemanytomanyinputbase

Commands to install the required enterprise package for using ReferenceManyToManyInputBase.

```bash
npm install --save @react-admin/ra-core-ee
yarn add @react-admin/ra-core-ee
```

--------------------------------

### Initialize and Install Shadcn Admin Kit

Source: https://marmelab.com/shadcn-admin-kit/docs/install

Commands to initialize the shadcn environment and add the Admin Kit components to your project.

```bash
npx shadcn@latest init
npx shadcn@latest add https://marmelab.com/shadcn-admin-kit/r/admin.json
```

--------------------------------

### Configure React Entry Point

Source: https://marmelab.com/shadcn-admin-kit/docs

Standard React setup for rendering the App component into the DOM using main.tsx.

```typescript
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <App />
    </StrictMode>,
);
```

--------------------------------

### Install RichTextInput Component

Source: https://marmelab.com/shadcn-admin-kit/docs/richtextinput

Command to install the RichTextInput component using npx. This component is optional and not included in the default admin registry block.

```bash
npx shadcn@latest add https://marmelab.com/shadcn-admin-kit/r/rich-text-input.json
```

--------------------------------

### Install Data Provider Dependency

Source: https://marmelab.com/shadcn-admin-kit/docs/quick-start-guide

Commands to install the ra-data-json-server package using npm or yarn.

```shell
npm install ra-data-json-server
yarn add ra-data-json-server
```

--------------------------------

### Install ra-core-ee

Source: https://marmelab.com/shadcn-admin-kit/docs/referenceoneinputbase

Installs the necessary React-admin Enterprise Edition core package for using advanced features like ReferenceOneInputBase.

```bash
npm install --save @react-admin/ra-core-ee
# or
yarn add @react-admin/ra-core-ee
```

--------------------------------

### ReferenceOneInputBase Usage Example

Source: https://marmelab.com/shadcn-admin-kit/docs/referenceoneinputbase

Example demonstrating how to use ReferenceOneInputBase within an Edit view to manage a one-to-one relationship between 'book' and 'book_details'.

```APIDOC
## ReferenceOneInputBase Usage Example

### Description
This example shows how to use `<ReferenceOneInputBase>` within an `<Edit>` view to manage a one-to-one relationship. It allows editing the `book_details` directly from the `book` edition view.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```jsx
import {
    Edit
} from '@/components/admin/edit';
import {
    NumberInput
} from '@/components/admin/number-input';
import {
    TextInput
} from '@/components/admin/text-input';
import {
    Form
} from 'ra-core';
import {
    ReferenceOneInputBase
} from '@react-admin/ra-core-ee';


const BookEdit = () => (
    <Edit mutationMode="optimistic">
        <Form>
            <TextInput source="title" />
            <ReferenceOneInputBase reference="book_details" target="book_id">
                <NumberInput source="year" />
                <TextInput source="author" />
                <TextInput source="country" />
                <TextInput source="genre" />
                <NumberInput source="pages" />
            </ReferenceOneInputBase>
        </Form>
    </Edit>
);
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

--------------------------------

### Bootstrap Admin Component

Source: https://marmelab.com/shadcn-admin-kit/docs

A minimal example showing how to import the Admin component and provide the Tanstack router provider.

```typescript
import { createFileRoute } from "@tanstack/react-router";
import { tanStackRouterProvider } from "ra-router-tanstack";
import { Admin } from "@/components/admin";

export const Route = createFileRoute("/")({ component: App });

export function App() {
  return <Admin routerProvider={tanStackRouterProvider}></Admin>;
}
```

--------------------------------

### Configure React Application Entry Point

Source: https://marmelab.com/shadcn-admin-kit/docs/install

Setup the main.tsx file to render the App component and define the App component using the Admin layout.

```typescript
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <App />
    </StrictMode>
);
```

```typescript
import { Admin } from "@/components/admin";

const App = () => <Admin></Admin>;

export default App;
```

--------------------------------

### CreateButton Component

Source: https://marmelab.com/shadcn-admin-kit/docs/createbutton

Documentation for the CreateButton component, including usage examples and available props.

```APIDOC
## CreateButton Component

### Description
The CreateButton component navigates the user to the 'create' route of the current resource (e.g., /posts/create). It is designed to be used within a ResourceContext, such as inside a <List> component.

### Props
| Prop | Required | Type | Default | Description |
| :--- | :--- | :--- | :--- | :--- |
| `label` | Optional | `string` | `ra.action.create` | i18n key or custom label for the button. |
| `resource` | Optional | `string` | From context | The target resource for the create route. |

### Usage Example
```tsx
import { CreateButton, List, ExportButton } from '@/components/admin';

const PostList = () => (
    <List
        actions={<>
            <CreateButton />
            <ExportButton />
        </>}
    >
        ...
    </List>
);
```
```

--------------------------------

### Configure Vite Project for shadcn-admin-kit

Source: https://marmelab.com/shadcn-admin-kit/docs/install

Steps to initialize a Vite project, install Tailwind CSS, and configure path aliases in tsconfig and vite.config.ts.

```bash
npm create vite@latest my-app -- --template react-ts
npm install tailwindcss @tailwindcss/vite
npm install -D @types/node
```

```typescript
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
```

--------------------------------

### Implement ReferenceManyToManyInputBase

Source: https://marmelab.com/shadcn-admin-kit/docs/referencemanytomanyinputbase

Example showing how to wrap an AutocompleteArrayInput with ReferenceManyToManyInputBase to manage many-to-many relationships in an edit form.

```javascript
import { Edit } from '@/components/admin/edit';
import { Form } from 'ra-core';
import { AutocompleteInput } from '@/components/admin/autocomplete-input';
import { TextInput } from '@/components/admin/text-input';
import { ReferenceManyToManyInputBase } from '@react-admin/ra-core-ee';

export const BandEdit = () => (
    <Edit mutationMode="optimistic">
        <Form>
            <TextInput source="name" />
            <ReferenceManyToManyInputBase
                reference="venues"
                through="performances"
                using="band_id,venue_id"
            >
                <AutocompleteArrayInput
                    label="Performances"
                    optionText="name"
                />
            </ReferenceManyToManyInputBase>
        </Form>
    </Edit>
);
```

--------------------------------

### Initialize Vite Project for shadcn-admin-kit

Source: https://marmelab.com/shadcn-admin-kit/docs

Sets up a new Vite project with React and TypeScript, installs Tailwind CSS, and configures path aliases for module resolution.

```bash
npm create vite@latest my-app -- --template react-ts
npm install tailwindcss @tailwindcss/vite
npm install -D @types/node
```

--------------------------------

### Implementing a Basic List with DataTable

Source: https://marmelab.com/shadcn-admin-kit/docs/list

This example demonstrates how to define a UserList component using the List and DataTable components, and how to register it within the main App component using a data provider.

```javascript
// in src/users.jsx
import { DataTable, List } from "@/components/admin";

export const UserList = () => (
    <List>
        <DataTable>
            <DataTable.Col source="id" />
            <DataTable.Col source="name" />
            <DataTable.Col source="username" />
            <DataTable.Col source="email" />
            <DataTable.Col source="address.street" />
            <DataTable.Col source="phone" />
            <DataTable.Col source="website" />
            <DataTable.Col source="company.name" />
        </DataTable>
    </List>
);

// in src/App.jsx
import { Admin } from '@/components/admin';
import { Resource } from 'ra-core';
import jsonServerProvider from 'ra-data-json-server';

import { UserList } from './users';

const App = () => (
    <Admin dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
        <Resource name="users" list={UserList} />
    </Admin>
);

export default App;
```

--------------------------------

### Fetch API Data Sample

Source: https://marmelab.com/shadcn-admin-kit/docs/quick-start-guide

Example of a cURL request to the JSONPlaceholder API and the resulting JSON response structure.

```shell
curl https://jsonplaceholder.typicode.com/users/2
```

```json
{
  "id": 2,
  "name": "Ervin Howell",
  "username": "Antonette",
  "email": "Shanna@melissa.tv",
  "address": {
    "street": "Victor Plains",
    "suite": "Suite 879",
    "city": "Wisokyburgh",
    "zipcode": "90566-7771",
    "geo": {
      "lat": "-43.9509",
      "lng": "-34.4618"
    }
  },
  "phone": "010-692-6593 x09125",
  "website": "anastasia.net",
  "company": {
    "name": "Deckow-Crist",
    "catchPhrase": "Proactive didactic contingency",
    "bs": "synergize scalable supply-chains"
  }
}
```

--------------------------------

### Create Admin App Component in Next.js

Source: https://marmelab.com/shadcn-admin-kit/docs/install

Example of creating the main admin component and exposing it via a page route with SSR disabled.

```typescript
"use client";
import { Admin } from "@/components/admin";
const App = () => <Admin></Admin>;
export default App;
```

```typescript
"use client";
import dynamic from "next/dynamic";
const App = dynamic(() => import("./App"), {
  ssr: false,
});
export default function Page() {
  return <App />;
}
```

--------------------------------

### ReferenceManyToManyInputBase dataProvider Calls

Source: https://marmelab.com/shadcn-admin-kit/docs/referencemanytomanyinputbase

Demonstrates the sequence of dataProvider calls made by the ReferenceManyToManyInputBase component to fetch records, reference data, and suggestions. It includes examples of getManyReference, getMany, and getList calls.

```javascript
dataProvider.getManyReference('venues', {
    target: 'band_id',
    id: 123,
});
```

```javascript
dataProvider.getMany('venues', {
    ids: [732, 874, 756],
});
```

```javascript
dataProvider.getList('venues', {
    sort: { field: 'id', order: 'DESC' },
    pagination: { page: 1, perPage: 25 },
    filter: {},
});
```

```javascript
dataProvider.delete('performances', {
    id: 667,
    previousData: { id: 667, band_id: 123, venue_id: 732 },
});
```

```javascript
dataProvider.create('performances', {
    data: { band_id: 123, venue_id: 2 },
});
```

```javascript
dataProvider.create('performances', {
    data: { band_id: 123, venue_id: 3 },
});
```

--------------------------------

### Implement a Customer Edit Page

Source: https://marmelab.com/shadcn-admin-kit/docs/edit

This example demonstrates how to define a custom Edit component using SimpleForm and various input types, and how to register it within an Admin Resource.

```javascript
// in src/customers.js
import { Edit, SimpleForm, BooleanInput, TextInput } from "@/components/admin";
import { required } from 'ra-core';

export const CustomerEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput source="first_name" validate={required()} />
      <TextInput source="last_name" validate={required()} />
      <TextInput source="email" validate={required()} />
      <BooleanInput source="has_ordered" />
      <TextInput multiline source="notes" />
    </SimpleForm>
  </Edit>
);

// in src/App.js
import { Admin } from '@/components/admin';
import { Resource } from 'ra-core';
import { dataProvider } from './dataProvider';
import { CustomerEdit } from './customers';

const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="customers" edit={CustomerEdit} />
    </Admin>
);

export default App;
```

--------------------------------

### Create Minimal Custom Layout

Source: https://marmelab.com/shadcn-admin-kit/docs/layout

A basic example of a custom layout implementation. It is essential to include the Notification component for toast messages and optimistic updates.

```typescript
import type { ReactNode } from "react";
import { Notification } from "@/components/admin/notification";

export const MyLayout = (props: { children: ReactNode }) => (
  <div>
    <header>My custom header</header>
    <main>{props.children}</main>
    <footer>My custom footer</footer>
    <Notification />
  </div>
);
```

--------------------------------

### Customizing TipTap Editor Options

Source: https://marmelab.com/shadcn-admin-kit/docs/richtextinput

Shows how to pass custom configuration to the underlying TipTap editor using the `editorOptions` prop. This example includes an `onCreate` callback to access the editor instance.

```jsx
import { DefaultEditorOptions, RichTextInput } from '@/components/rich-text-input';
import type { Editor } from '@tiptap/react';


<RichTextInput
    source="body"
    editorOptions={{
        ...DefaultEditorOptions,
        onCreate: ({ editor }: { editor: Editor }) => {
            console.log(editor);
        },
    }}
/>
```

--------------------------------

### Using CreateButton in a Resource List

Source: https://marmelab.com/shadcn-admin-kit/docs/createbutton

Demonstrates how to integrate the CreateButton within the actions prop of a List component. This setup automatically routes the user to the creation page of the current resource.

```typescript
import { CreateButton, List, ExportButton } from '@/components/admin';

const PostList = () => (
    <List
        actions={<>
            <CreateButton />
            <ExportButton />
        </>}
    >
        ...
    </List>
);
```

--------------------------------

### Customizing List Rendering with Render Prop

Source: https://marmelab.com/shadcn-admin-kit/docs/list

This example shows how to use the render prop instead of children to gain full control over the rendering logic, including handling loading and error states.

```javascript
const PostList = () => (
    <List
        render={({ isPending, error, data }) => {
            if (isPending) {
                return <div>Loading...</div>;
            }
            if (error) {
                return <div>Error: {error.message}</div>;
            }
            return (
                <ul>
                    {data.map(post => (
                        <li key={post.id}>
                            <strong>{post.title}</strong> - {post.author}
                        </li>
                    ))}
                </ul>
            );
        }}
    />
);
```

--------------------------------

### ReferenceInput Data Fetching Example

Source: https://marmelab.com/shadcn-admin-kit/docs/referenceinput

Illustrates the data provider queries made by ReferenceInput when editing a contact with company_id: 456. It shows calls to get the specific company record and a list of companies for selection.

```javascript
dataProvider.getMany('companies', { ids: [456] });
dataProvider.getList('companies', {
    filter: {},
    sort: { field: 'id', order: 'DESC' },
    pagination: { page: 1, perPage: 25 }
});
```

--------------------------------

### Custom Action Button with useRecordContext and useUpdate

Source: https://marmelab.com/shadcn-admin-kit/docs/edit

Demonstrates creating a custom action button that interacts with the record and performs an update operation. This example uses `useRecordContext` to get the record ID and `useUpdate` to reset the 'views' field, with notifications for success or failure.

```javascript
import { useRecordContext, useUpdate, useNotify } from 'ra-core';
import { Button } from '@a/components/ui';


const ResetViewsButton = () => {
    const record = useRecordContext();
    const [update, { isPending }] = useUpdate();
    const notify  = useNotify();
    const handleClick = () => {
        update(
            'posts',
            { id: record.id, data: { views: 0 }, previousData: record },
            {
                onSuccess: () => {
                    notify('Views reset');
                },
                onFailure: error => notify(`Error: ${error.message}`, 'warning'),
            }
        );
    };
    return (
        <Button onClick={handleClick} disabled={isPending}>
            Reset views
        </Button>
    );
};

```

--------------------------------

### Initialize Next.js Project and shadcn-admin-kit

Source: https://marmelab.com/shadcn-admin-kit/docs/install

Commands to bootstrap a new Next.js application and pull the admin kit components using the shadcn CLI.

```bash
npx create-next-app@latest
cd my-app
npx shadcn@latest add https://marmelab.com/shadcn-admin-kit/r/admin.json
```

--------------------------------

### Implement Real-time DataProvider Methods (JavaScript)

Source: https://marmelab.com/shadcn-admin-kit/docs/realtimefeatures

This JavaScript example demonstrates how to implement the `subscribe`, `unsubscribe`, and `publish` methods for a custom data provider to handle real-time messages. It uses an in-memory array to manage subscriptions and is suitable for testing or simple real-time scenarios.

```javascript
let subscriptions = [];

const dataProvider = {
    // regular dataProvider methods like getList, getOne, etc,
    // ...
    subscribe: async (topic, subscriptionCallback) => {
        subscriptions.push({ topic, subscriptionCallback });
        return Promise.resolve({ data: null });
    },

    unsubscribe: async (topic, subscriptionCallback) => {
        subscriptions = subscriptions.filter(
            (subscription) =>
                subscription.topic !== topic ||
                subscription.subscriptionCallback !== subscriptionCallback,
        );
        return Promise.resolve({ data: null });
    },

    publish: (topic, event) => {
        if (!topic) {
            return Promise.reject(new Error('missing topic'));
        }
        if (!event.type) {
            return Promise.reject(new Error('missing event type'));
        }
        subscriptions.map(
            (subscription) =>
                topic === subscription.topic &&
                subscription.subscriptionCallback(event),
        );
        return Promise.resolve({ data: null });
    },
};

```

--------------------------------

### Custom Action Button Example

Source: https://marmelab.com/shadcn-admin-kit/docs/edit

Provides an example of creating a custom action button, 'Reset Views', using the `useRecordContext` and `useUpdate` hooks.

```APIDOC
## Custom Action Button Example

### Description
This example shows how to create a custom action button within the Edit component's actions toolbar. It uses the `useRecordContext` hook to get the current record and the `useUpdate` hook to perform an API update to reset the 'views' field. It also includes notification handling for success and failure.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Request Body
N/A (Component Usage)

### Request Example
```jsx
import { useRecordContext, useUpdate, useNotify } from 'ra-core';
import { Button } from '@a/components/ui';


const ResetViewsButton = () => {
    const record = useRecordContext();
    const [update, { isPending }] = useUpdate();
    const notify  = useNotify();
    const handleClick = () => {
        update(
            'posts',
            { id: record.id, data: { views: 0 }, previousData: record },
            {
                onSuccess: () => {
                    notify('Views reset');
                },
                onFailure: error => notify(`Error: ${error.message}`, 'warning'),
            }
        );
    };
    return (
        <Button onClick={handleClick} disabled={isPending}>
            Reset views
        </Button>
    );
};
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

--------------------------------

### Install Tanstack Router for Shadcn Admin Kit

Source: https://marmelab.com/shadcn-admin-kit/docs/install

Installs the `ra-router-tanstack` package, which enables the use of the Tanstack router within the Shadcn Admin Kit application. This is essential for routing functionality.

```bash
npm install ra-router-tanstack
```

--------------------------------

### Initialize Next.js Project with Shadcn UI and Tailwind CSS

Source: https://marmelab.com/shadcn-admin-kit/docs/mcp

Command to create a new Next.js project, pre-configured with Shadcn UI and Tailwind CSS v4, suitable for integrating with Shadcn Admin Kit.

```bash
npx shadcn@latest init
```

--------------------------------

### NumberInput Format and Parse Example

Source: https://marmelab.com/shadcn-admin-kit/docs/numberinput

Illustrates how to use the `format` and `parse` props with NumberInput to transform values between the form state and the input display. This example converts cents to dollars and vice-versa.

```javascript
import { NumberInput } from '@/components/admin';

{/* Unit Price is stored in cents, i.e. 123 means 1.23 */}
<NumberInput
    source="unit_price"
    format={v => String(v * 100)}
    parse={v => parseFloat(v) / 100}
/>
```

--------------------------------

### ArrayInput Data Structure Example

Source: https://marmelab.com/shadcn-admin-kit/docs/arrayinput

An example JSON structure representing an order record with an embedded 'items' array. Each object within the 'items' array represents a single product with its name, price, and quantity.

```json
{
    "id": 1,
    "date": "2022-08-30",
    "customer": "John Doe",
    "items": [
        {
            "name": "Office Jeans",
            "price": 45.99,
            "quantity": 1,
        },
        {
            "name": "Black Elegance Jeans",
            "price": 69.99,
            "quantity": 2,
        },
        {
            "name": "Slim Fit Jeans",
            "price": 55.99,
            "quantity": 1,
        },
    ],
}

```

--------------------------------

### Integrating Show Component with Resource

Source: https://marmelab.com/shadcn-admin-kit/docs/show

This example shows how to integrate a custom Show component (`ProductShow`) into the admin application using the `<Resource>` component. It configures the `show` prop of the `<Resource>` to use the `ProductShow` component for the 'products' resource, enabling the display of product details within the admin interface.

```jsx
import { Admin } from '@/copmponents/admin';
import { Resource } from 'ra-core';


import { dataProvider } from './dataProvider';
import { ProductShow } from './products';


const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="products" show={ProductShow} />
    </Admin>
);
```

--------------------------------

### Displaying a Single Record with Show Component

Source: https://marmelab.com/shadcn-admin-kit/docs/show

This snippet demonstrates the minimal setup for a product show page using the `<Show>` component. It defines custom fields like reference, dimensions, category, price, and thumbnail, leveraging components like `<RecordField>`, `<NumberField>`, and `<ReferenceField>` for structured display. The `<Show>` component fetches the record and provides it to its children.

```jsx
import { RecordField } from "@/components/admin/record-field";
import { NumberField } from "@/components/admin";
import { ReferenceField } from "@/components/admin/reference-field";
import { Show } from "@/components/admin/show";


export const ProductShow = () => (
  <Show>
    <div className="flex flex-col gap-4">
      <RecordField source="reference" />
      <RecordField label="dimensions">
        <div className="flex items-center gap-1">
          ↔<NumberField source="width" />
          ↕<NumberField source="height" />
        </div>
      </RecordField>
      <RecordField source="category_id">
        <ReferenceField source="category_id" reference="categories" />
      </RecordField>
      <RecordField
        source="price"
        render={(record) => Intl.NumberFormat().format(record.price)}
      />
      <RecordField
        source="thumbnail"
        render={(record) => <img src={record.thumbnail} className="w-24" />}
      />
      <RecordField source="description" className="max-w-100" />
    </div>
  </Show>
);
```

--------------------------------

### EmailField Component Usage

Source: https://marmelab.com/shadcn-admin-kit/docs/emailfield

Documentation for the EmailField component, including usage examples and property definitions.

```APIDOC
## EmailField Component

### Description
Displays an email address as a `mailto:` link. Prevents row click bubbling when used in data grids.

### Usage
```tsx
import { EmailField } from '@/components/admin';

<EmailField source="email" />
```

### Props
| Prop | Required | Type | Default | Description |
| :--- | :--- | :--- | :--- | :--- |
| `source` | Required | `string` | - | Field containing the email |
| `defaultValue` | Optional | `any` | - | Fallback value |
| `empty` | Optional | `ReactNode` | - | Placeholder when no value |
| `record` | Optional | `object` | Record from context | Explicit record |

*Note: Remaining props are passed to the underlying `<a>` element (e.g., `target`, `rel`, `className`).*
```

--------------------------------

### Bootstrap Admin Application with Tanstack Router

Source: https://marmelab.com/shadcn-admin-kit/docs/install

A minimal React example demonstrating how to bootstrap the Shadcn Admin Kit application using the Tanstack router. It imports necessary components and configures the root route.

```typescript
import { createFileRoute } from "@tanstack/react-router";
import { tanStackRouterProvider } from "ra-router-tanstack";
import { Admin } from "@/components/admin";


export const Route = createFileRoute("/")({ component: App });


export function App() {
  return <Admin routerProvider={tanStackRouterProvider}></Admin>;
}

```

--------------------------------

### Configure Data Provider for TanStack

Source: https://marmelab.com/shadcn-admin-kit/docs/quick-start-guide

Setting up the data provider and router provider for a TanStack Start application.

```typescript
import { tanStackRouterProvider } from "ra-router-tanstack";
import { createFileRoute } from "@tanstack/react-router";
import { Admin } from "@/components/admin";
import { dataProvider } from "@/dataProvider.ts";
export const Route = createFileRoute("/")({ component: App });
export function App() {
  return (
    <Admin
      routerProvider={tanStackRouterProvider}
      dataProvider={dataProvider}
    ></Admin>
  );
}
```

--------------------------------

### Initialize 'shadcn mcp' Server for AI Agents

Source: https://marmelab.com/shadcn-admin-kit/docs/mcp

Commands to initialize the 'shadcn mcp' server for different AI clients (Claude, Cursor, VSCode), enabling them to fetch components from the Shadcn Admin Kit registry.

```bash
npx shadcn@latest mcp init --client claude
npx shadcn@latest mcp init --client cursor
npx shadcn@latest mcp init --client vscode
```

--------------------------------

### Using Download Attribute

Source: https://marmelab.com/shadcn-admin-kit/docs/filefield

Shows how to provide a download attribute to suggest a filename when the user clicks the link.

```tsx
<FileField source="manual" download="Manual.pdf" />
```

--------------------------------

### Headless List Components

Source: https://marmelab.com/shadcn-admin-kit/docs/list

Explains how to use ListBase and useListController for building custom list layouts without the default UI components.

```APIDOC
## Headless List Components

### Description
Use `ListBase` or `useListController` to fetch data and manage list state (pagination, sorting, filtering) without rendering the default `List` layout.

### Usage
- **ListBase**: A component that provides `ListContext` to its children.
- **useListController**: A hook that provides the same functionality as `ListBase` but allows for more flexible rendering.

### Example (useListController)
```javascript
import { useListController } from '@/components/admin';

const ProductList = () => {
    const { isPending, data, total } = useListController();
    return (
        <div>
            {!isPending && data.map(product => <div key={product.id}>{product.name}</div>)}
            <p>{total} results</p>
        </div>
    );
};
```
```

--------------------------------

### Configure Supabase Replication Publication (SQL)

Source: https://marmelab.com/shadcn-admin-kit/docs/realtimefeatures

This SQL script outlines the process for setting up Supabase replication publications. It includes dropping an existing publication if it exists, creating a new one named `supabase_realtime`, and then adding specific tables (e.g., 'sales', 'contacts', 'contactNotes') to this publication to enable real-time data synchronization.

```sql
begin;


-- remove the supabase_realtime publication
drop
  publication if exists supabase_realtime;


-- re-create the supabase_realtime publication with no tables
create publication supabase_realtime;


commit;


-- add a table to the publication
alter
  publication supabase_realtime add table sales;
alter
  publication supabase_realtime add table contacts;
alter
  publication supabase_realtime add table contactNotes;

```

--------------------------------

### Creating New References On The Fly

Source: https://marmelab.com/shadcn-admin-kit/docs/referenceinput

Demonstrates how to use the `onCreate` prop of `<AutocompleteInput>` to allow users to create a new company record directly from a contact form.

```APIDOC
## Creating a New Reference

This section details how to enable users to create new reference records directly within a form, preventing data loss and improving user experience.

### Description

When a user needs to add a new option to a reference field (e.g., adding a new company to a contact form) and that option doesn't exist, they can create it on the fly. This is achieved using the `onCreate` prop on input components like `<AutocompleteInput>` within a `<ReferenceInput>`.

### Method

This functionality is typically handled client-side within a React component using a data provider's `create` method.

### Endpoint

N/A (Client-side functionality)

### Parameters

#### onCreate Prop (for `<AutocompleteInput>` and similar)
- **onCreate** (function) - Required - A function that accepts the new reference name as an argument and returns a Promise resolving with the newly created reference object.

#### create Prop (alternative for more complex creation)
- **create** (ReactNode) - Optional - A React node (e.g., a dialog) to display when the user opts to create a new reference, allowing for more complex input fields.

### Request Example (using `onCreate`)

```javascript
import React from 'react';
import { Edit, SimpleForm, TextInput, ReferenceInput, useCreate, useNotify, AutocompleteInput } from 'react-admin';

export const ContactEdit = () => {
    const [create] = useCreate();
    const notify = useNotify();

    const handleCreateCompany = async (companyName?: string) => {
        if (!companyName) return;
        try {
            const newCompany = await create(
                'companies',
                { data: { name: companyName } },
                { returnPromise: true }
            );
            return newCompany; // Return the created company to be selected
        } catch (error) {
            notify('An error occurred while creating the company', {
                type: 'error',
            });
            throw error;
        }
    };

    return (
        <Edit>
            <SimpleForm>
                <TextInput source="first_name" />
                <TextInput source="last_name" />
                <ReferenceInput source="company_id" reference="companies">
                    <AutocompleteInput onCreate={handleCreateCompany} />
                </ReferenceInput>
            </SimpleForm>
        </Edit>
    );
};
```

### Response

#### Success Response (from `onCreate`)
- The `onCreate` function should return the newly created reference object, which will then be automatically selected in the input.

#### Response Example (from `onCreate`)

```json
{
  "id": "new_company_id",
  "name": "New Company Name"
}
```

### Error Handling

- Errors during the creation process should be handled within the `onCreate` function, typically by displaying a notification to the user.
```

--------------------------------

### Subscribe to Record Updates

Source: https://marmelab.com/shadcn-admin-kit/docs/realtimefeatures

Example of using useSubscribeToRecord to detect concurrent edits and prompt the user to resolve potential conflicts.

```typescript
const WarnWhenUpdatedBySomeoneElse = () => {
    const [open, setOpen] = useState(false);
    const [author, setAuthor] = useState<string | null>(null);
    const handleClose = () => { setOpen(false); };
    const { refetch } = useEditContext();
    const refresh = () => { refetch(); handleClose(); };
    const { formState: { isDirty } } = useFormContext();

    useSubscribeToRecord((event: Event) => {
        if (event.type === 'edited') {
            if (isDirty) {
                setOpen(true);
                setAuthor(event.payload.user);
            } else {
                refetch();
            }
        }
    });
    return open ? (
        <div className="flex flex-col gap-4">
            <p>Post Updated by {author}</p>
            <div className="flex gap-4">
                <button onClick={handleClose}>Keep my changes</button>
                <button onClick={refresh}>Get their changes</button>
            </div>
        </div>
    ) : null;
};
```

--------------------------------

### Setting Link Target

Source: https://marmelab.com/shadcn-admin-kit/docs/filefield

Demonstrates how to use the target prop to control how the file link opens, such as opening in a new window.

```tsx
<FileField source="file.url" target="_blank" />
```

--------------------------------

### ReferenceManyCount with Filter

Source: https://marmelab.com/shadcn-admin-kit/docs/referencemanycount

Counts a subset of related records by passing a `filter` prop. This example counts only published comments for the current post.

```APIDOC
## ReferenceManyCount with Filter

### Description
Counts a subset of related records by passing a `filter` prop.

### Usage
Pass a `filter` object to the `<ReferenceManyCount>` component to refine the count.

### Props
- **reference** (string) - Required - Target resource name
- **target** (string) - Required - Foreign key field in target resource
- **filter** (object) - Optional - Extra filter values

### Request Example
```jsx
<ReferenceManyCount
  reference="comments"
  target="post_id"
  filter={{ published: true }}
/>
```

### Response
Returns the count of records matching the specified `reference`, `target`, and `filter` criteria.
```

--------------------------------

### ReferenceManyCount Basic Usage

Source: https://marmelab.com/shadcn-admin-kit/docs/referencemanycount

Displays the number of related records for a ReferenceMany relation. This example shows how to count comments for the current post.

```APIDOC
## ReferenceManyCount

### Description
Displays the number of related records for a `ReferenceMany` relation.

### Usage
Use `<ReferenceManyCount>` inside a `RecordContext`. Set `reference` and `target` props to match the relationship.

### Props
- **reference** (string) - Required - Target resource name
- **target** (string) - Required - Foreign key field in target resource
- **filter** (object) - Optional - Extra filter values
- **link** (boolean) - Optional - Make count a link
- **record** (RaRecord) - Optional - Record providing id (from context if omitted)
- **source** (string) - Optional - Source field of current record (default `id`)

### Request Example
```jsx
import { ReferenceManyCount } from '@/components/admin';

<ReferenceManyCount reference="comments" target="post_id" />
```

### Response
This component fetches data using `dataProvider.getManyReference()` and displays a count. The exact response structure depends on the dataProvider, but it typically involves a count of records matching the criteria.
```

--------------------------------

### Export Data with Related Records

Source: https://marmelab.com/shadcn-admin-kit/docs/list

This example shows how to use the fetchRelatedRecords function within an exporter to augment exported data with information from related resources.

```typescript
import { List } from '@/components/admin';
import { downloadCSV, type FetchRelatedRecords } from 'ra-core';
import jsonExport from 'jsonexport/dist';

const exporter = async (comments: Comments[], fetchRelatedRecords: FetchRelatedRecords) => {
    const posts = await fetchRelatedRecords<Post>(comments, 'post_id', 'posts')
    const commentsWithPostTitle = comments.map(comment => ({
            ...comment,
            post_title: posts[comment.post_id].title,
    }));
    return jsonExport(commentsWithPostTitle, {
        headers: ['id', 'post_id', 'post_title', 'body'],
    }, (err, csv) => {
        downloadCSV(csv, 'comments');
    });
};

const CommentList = () => (
    <List exporter={exporter}>
        ...
    </List>
);
```

--------------------------------

### Configuring the Editor (`editorOptions`)

Source: https://marmelab.com/shadcn-admin-kit/docs/richtextinput

Customize the TipTap editor instance by passing configuration options through the `editorOptions` prop.

```APIDOC
## `editorOptions`

### Description
Use `editorOptions` to pass TipTap configuration.

### Usage
```jsx
import { DefaultEditorOptions, RichTextInput } from '@/components/rich-text-input';
import type { Editor } from '@tiptap/react';


<RichTextInput
    source="body"
    editorOptions={{
        ...DefaultEditorOptions,
        onCreate: ({ editor }: { editor: Editor }) => {
            console.log(editor);
        },
    }}
/>
```
```

--------------------------------

### DataTable Usage Example

Source: https://marmelab.com/shadcn-admin-kit/docs/datatable

Demonstrates how to use the DataTable component within a ListContext, defining columns with DataTable.Col and integrating other components like ReferenceField and EditButton.

```APIDOC
## DataTable Usage

Use `<DataTable>` inside a `ListContext` (e.g., as a descendent of `<List>` or `<ReferenceManyField>`). Define the table columns with its children using `<DataTable.Col>` components:

```jsx
import { List, DataTable, ReferenceField, EditButton } from '@/components/admin';

export const PostList = () => (
    <List>
        <DataTable>
            <DataTable.Col source="id" />
            <DataTable.Col label="User">
                <ReferenceField source="user_id" reference="users" />
            </DataTable.Col>
            <DataTable.Col source="title" />
            <DataTable.Col>
                <EditButton />
            </DataTable.Col>
        </DataTable>
    </List>
);
```

Each `<DataTable.Col>` child defines how to label the column header, either via the `label` prop, or by humanizing the `source` prop. `<DataTable.Col>` also defines where to get the value for each cell in that column (either via `source`, a `render` prop, or a child component). `<DataTable>` renders each row in a `RecordContext`, so any Field component can be used inside `<DataTable.Col>`. It also accepts additional props to configure the behavior of that specific column, such as sorting, styling, etc.
```

--------------------------------

### Implement Publish and Subscribe Hooks

Source: https://marmelab.com/shadcn-admin-kit/docs/realtimefeatures

Demonstrates how to use usePublish and useSubscribe hooks to send and receive events across a topic.

```typescript
import { usePublish, useSubscribe } from '@react-admin/ra-core-ee';

// on the publisher side
const [publish] = usePublish();
publish(topic, event);

// on the subscriber side
useSubscribe(topic, callback);
```

--------------------------------

### Configure Context7 MCP Server for VSCode (Copilot Agent)

Source: https://marmelab.com/shadcn-admin-kit/docs/mcp

JSON configuration for the '.vscode/mcp.json' file to integrate the Context7 MCP server, allowing GitHub Copilot Agent in VSCode to access Shadcn Admin Kit documentation. Requires a CONTEXT7_API_KEY.

```json
{
  "servers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "YOUR_API_KEY"
      }
    }
  }
}
```

--------------------------------

### Initialize Vite Project with React TS and Tailwind CSS

Source: https://marmelab.com/shadcn-admin-kit/docs/mcp

Commands to create a new Vite project with TypeScript and React, install Tailwind CSS v4, and configure the necessary CSS import for Shadcn Admin Kit integration.

```bash
npm create vite@latest my-shadcn-admin-app -- --template react-ts
npm install tailwindcss @tailwindcss/vite
@import "tailwindcss";
```
Tokens:
Raw