Shadcn Admin Kit

https://github.com/marmelab/shadcn-admin-kit
Admin
A component kit for building admin applications with shadcn/ui, offering features like CRUD, data...
Tokens:179,330
Snippets:1,373
Trust Score:10
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start Storybook with make storybook

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/README.md

Starts the Storybook development server for component documentation.

```bash
make storybook
```

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

### Make commands for common development tasks

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/AGENTS.md

Lists the primary Make targets for installing dependencies, running the dev server, testing, type checking, linting, and starting Storybook. Use these commands for routine development workflows.

```bash
make install           # Install dependencies
make run               # Start dev server (Vite)
make test              # Run tests (Vitest + Playwright browser, headless)
make test-watch        # Run tests in watch mode
make test-browser      # Run tests in interactive browser mode
make typecheck         # TypeScript type checking
make lint              # ESLint
make storybook         # Start Storybook on port 6006
```

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

### Install dependencies with make install

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/README.md

Installs project dependencies using pnpm. Requires Node.js and pnpm to be installed.

```bash
make install
```

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

### Initialize Shadcn Admin Kit with Tanstack Start

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Install.mdx

Initializes a new Shadcn Admin Kit project with Tanstack Start, using the vega preset and the name my-app. This command adds components to src/components/admin and src/components/ui, plus utilities in src/hooks/ and src/lib/.

```shell
npx shadcn@latest init \
  --template start \
  --preset vega \
  --name my-app \
  https://marmelab.com/shadcn-admin-kit/r/admin.json
```

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

### Install ra-data-simple-rest package

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/DataProviders.md

Install the Simple REST data provider package via npm before initializing it.

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

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

### Example: Admin with Resource components for posts, users, and comments

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Resource.md

Shows how to define CRUD routes and resource metadata using `<Resource>` inside `<Admin>`. The example includes list, edit, show, create, and icon props for the posts resource, a read-only users resource, and a comments resource with list and edit. Note that `<Resource>` is headless and should be imported from 'ra-core'.

```jsx
import { Admin, ListGuesser, EditGuesser, ShowGuesser } from "@/components/admin";
import { Resource } from 'ra-core';
import jsonServerProvider from 'ra-data-json-server';

import { PostCreate, PostIcon } from './posts';
import { CommentIcon } from './comments';

const App = () => (
    <Admin dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
        {/* complete CRUD pages for posts */}
        <Resource name="posts" list={ListGuesser} edit={EditGuesser} show={ShowGuesser} create={PostCreate} icon={PostIcon} />
        {/* read-only user list */}
        <Resource name="users" list={ListGuesser} />
        {/* no show page for the comments resource */}
        <Resource name="comments" list={ListGuesser} edit={EditGuesser} icon={CommentIcon} />
    </Admin>
);
```

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

### Install ra-data-json-server with npm

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/rules/AGENTS.md

Run this npm command to install the ra-data-json-server package, required for using the JSONPlaceholder endpoint.

```bash
npm install ra-data-json-server
```

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

### Run development server (Vite)

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Install.mdx

Start the development server with either npm or yarn.

```shell
npm run dev
# or
yarn dev
```

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

### Replace ListGuesser with UserList in src/routes/index.tsx

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Quick-Start-Guide.mdx

Shows the diff for replacing the `ListGuesser` with a custom `UserList` component in the `src/routes/index.tsx` file. This is part of the Quick Start guide's "Replacing the List" step, and the output is a users list that is fully customizable.

```tsx
import { Resource } from "ra-core";
import { tanStackRouterProvider } from "ra-router-tanstack";
import { createFileRoute } from "@tanstack/react-router";
-import { Admin, ListGuesser } from "@/components/admin";
+import { Admin } from "@/components/admin";
import { dataProvider } from "@/dataProvider.ts";
+import { UserList } from "@/components/app/users.tsx";

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

export function App() {
  return (
    <Admin routerProvider={tanStackRouterProvider} dataProvider={dataProvider}>
-      <Resource name={"users"} list={ListGuesser} />
+      <Resource name={"users"} list={UserList} />
    </Admin>
  );
}
```

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

### Install shadcn agent skill

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Migrate.md

Install the shadcn agent skill once to migrate your own components from Radix UI to Base UI.

```bash
pnpm dlx skills add shadcn/ui
```

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

### Create UserList (Tanstack Start)

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Quick-Start-Guide.mdx

For Tanstack Start projects. Create the UserList component in src/components/app/users.tsx. The source does not show the corresponding App.tsx update for this tab.

```tsx
// src/components/app/users.tsx
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>
);
```

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

### Install RichTextInput with shadcn add

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/RichTextInput.md

Adds the component to your project using the shadcn registry.

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

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

### Response to getList call

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyInputBase.md

Example response from the `getList()` call.

```json
{
    "data": [
        { "id": 732, "name": "Madison Square Garden" },
        { "id": 874, "name": "Yankee Stadium" }
        { "id": 874, "name": "Barclays Center" }
        ...
    ],
    "total": 32
}
```

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

### NumberField Formatting Examples

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/NumberField.md

Examples of NumberField with different Intl.NumberFormat options: maximumFractionDigits, percent, currency, and unit. Each example shows the rendered output for a given record. The output format follows the browser locale.

```jsx
<NumberField source="score" options={{ maximumFractionDigits: 2 }}/>
// renders the record { id: 1234, score: 567.3567458569 } as
<span>567.35</span>

<NumberField source="share" options={{ style: 'percent' }} />
// renders the record { id: 1234, share: 0.2545 } as
<span>25%</span>

<NumberField source="price" options={{ style: 'currency', currency: 'USD' }} />
// renders the record { id: 1234, price: 25.99 } as
<span>$25.99</span>

<NumberField source="volume" options={{ style: 'unit', unit: 'liter' }} />
// renders the record { id: 1234, volume: 3500 } as
<span>3,500 L</span>
```

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

### Install ra-data-json-server with npm or yarn

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Quick-Start-Guide.mdx

Installs the ra-data-json-server package to map the JSONPlaceholder API to the shadcn-admin-kit CRUD API. Use either npm or yarn.

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

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

### Example one-to-many relationship diagram

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyInputBase.md

ASCII diagram showing the products and variants tables with a foreign key relationship.

```txt
┌───────────────┐       ┌──────────────┐
│ products      │       │ variants     │
│---------------│       │--------------│
│ id            │───┐   │ id           │
│ name          │   └──╼│ product_id   │
│ price         │       │ sku          │
│ category_id   │       │ size         │
└───────────────┘       │ color        │
                        │ stock        │
                        └──────────────┘
```

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

### Install ra-router-tanstack

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Install.mdx

Installs the ra-router-tanstack package, required for the admin app to use the TanStack router.

```shell
npm install ra-router-tanstack
```

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

### Example one-to-one relationship diagram (book and book_details)

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceOneInputBase.md

ASCII diagram showing the one-to-one relationship between book and book_details tables, with book_id as the foreign key.

```txt
┌─────────────┐       ┌──────────────┐
│ book        │       │ book_details │
│-------------│       │--------------│
│ id          │───┐   │ id           │
│ title       │   └──╼│ book_id      │
└─────────────┘       │ year         │
                      │ author       │
                      │ country      │
                      │ genre        │
                      │ pages        │
                      └──────────────┘
```

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

### Fetch a user record with useGetOne

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/DataProviders.md

Example of fetching a single user record on mount using the useGetOne hook, handling loading, error, and empty states.

```jsx
import { useGetOne } from 'ra-core';
import { Loading, Error } from './MyComponents';

const UserProfile = ({ userId }) => {
    const { isPending, error, data: user } = useGetOne('users', { id: userId });

    if (isPending) return <Loading />;
    if (error) return <Error />;
    if (!user) return null;

    return (
        <ul>
            <li>Name: {user.name}</li>
            <li>Email: {user.email}</li>
        </ul>
    )
};
```

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

### Response from getMany

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyFieldBase.md

Example response from the dataProvider for the getMany call.

```json
{
    "data": [
        { "id": 732, "name": "Madison Square Garden" },
        { "id": 874, "name": "Yankee Stadium" }
        { "id": 874, "name": "Barclays Center" }
    ],
    "total": 3
}
```

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

### Lock Resource Example

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/RealtimeFeatures.md

Example of a lock resource record. The identity and createdAt formats depend on your API.

```json
{
    "id": 123,
    "identity": "Toad",
    "resource": "people",
    "recordId": 18,
    "createdAt": "2020-09-29 10:20"
}
```

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

### Install @react-admin/ra-core-ee

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyFieldBase.md

Install the @react-admin/ra-core-ee package, which is required for the ReferenceManyToManyFieldBase component. This package is part of the Enterprise Edition and requires a valid subscription.

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

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

### using prop example

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyFieldBase.md

Specifies the columns to use in the associative table. Defaults to '[resource]_id,[reference]_id' when not provided.

```tsx
<ReferenceManyToManyFieldBase
    reference="venues"
    through="performances"
    using="band_id,venue_id"
>
    {/* ... */}
</ReferenceManyToManyFieldBase>
```

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

### Install matching react-router-dom version

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Install.mdx

Installs react-router-dom with the exact version matching @react-router/dev to avoid duplicate react-router copies that break server-side rendering. Use the version from your package.json; 7.15.1 is current at the time of writing.

```shell
npm add --save-exact react-router-dom@7.15.1
```

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

### Example Event Object

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/RealtimeFeatures.md

Example event object with a type and payload field, as expected by the real-time dataProvider methods.

```js
{
    type: 'created',
    payload: 'New message',
}
```

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

### Lock Format Example

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/RealtimeFeatures.md

Example lock object storing the locked record, locker identity, and acquisition time. Returned by dataProvider.getLock() and dataProvider.getLocks().

```js
{
    resource: 'posts',
    recordId: 123,
    identity: 'julien',
    createdAt: '2023-01-02T21:36:35.133Z',
}
```

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

### mutationOptions prop example

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceOneInputBase.md

Passes a custom meta to the dataProvider.create() and dataProvider.update() mutations.

```tsx
<ReferenceOneInputBase
    reference="book_details"
    target="book_id"
    mutationOptions={{ meta: { foo: 'bar' } }}
>
    ...
</ReferenceOneInputBase>
```

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

### Example form value

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/AutocompleteArrayInput.md

Example of the form value structure, an array of selected values from the choices.

```jsx
{
    id: 123,
    title: 'Lorem Ipsum',
    roles: ['u001', 'u003', 'u004'],
}
```

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

### Queries issued by ReferenceArrayInput for the example post

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceArrayInput.md

Shows the dataProvider.getMany and dataProvider.getList calls that ReferenceArrayInput makes to fetch the related records and the list of possible choices.

```js
dataProvider.getMany('tags', { ids: [1, 23, 4] });
dataProvider.getList('tags', { 
    filter: {},
    sort: { field: 'id', order: 'DESC' },
    pagination: { page: 1, perPage: 25 }
});
```

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

### Response from getManyReference

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyFieldBase.md

Example response from the dataProvider for the getManyReference call.

```json
{
    "data": [
        { "id": 667, "band_id": 123, "venue_id": 732 },
        { "id": 895, "band_id": 123, "venue_id": 874 }
        { "id": 901, "band_id": 123, "venue_id": 756 }
    ],
    "total": 3
}
```

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

### Add Resource with ListGuesser (Tanstack Start)

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Quick-Start-Guide.mdx

Adds a users resource mapped to the API endpoint using the ListGuesser component for TanStack Start.

```diff
// src/routes/index.tsx
+import { Resource } from "ra-core";
import { tanStackRouterProvider } from "ra-router-tanstack";
import { createFileRoute } from "@tanstack/react-router";
-import { Admin } from "@/components/admin";
+import { Admin, ListGuesser } from "@/components/admin";
import { dataProvider } from "@/dataProvider.ts";

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

export function App() {
  return (
    <Admin routerProvider={tanStackRouterProvider} dataProvider={dataProvider}>
+      <Resource name={"users"} list={ListGuesser} />
    </Admin>
  );
}
```

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

### reference prop example

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceOneInputBase.md

Sets the resource name to fetch related records, e.g., 'book_details' for a given book.

```tsx
<ReferenceOneInputBase reference="book_details" target="book_id">
    ...
</ReferenceOneInputBase>
```

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

### Usage of ReferenceManyToManyInputBase with AutocompleteArrayInput

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyInputBase.md

Example showing how to wrap an AutocompleteArrayInput in a ReferenceManyToManyInputBase to edit venues for a band. Uses the reference, through, and using props.

```tsx
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>
);
```

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

### render prop example

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceOneInputBase.md

Uses a render function to control the display in all states, showing a skeleton while pending and inputs otherwise.

```tsx
<ReferenceOneInputBase
    reference="book_details"
    target="book_id"
    render={({ isPending }) =>
        isPending ? (
            <Skeleton />
        ) : (
            <>
                <NumberInput source="year" />
                <TextInput source="author" />
                <TextInput source="country" />
                <TextInput source="genre" />
                <NumberInput source="pages" />
            </>
        )
    }
/>
```

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

### Using ReferenceOneInputBase in a BookEdit component

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceOneInputBase.md

Example of using ReferenceOneInputBase inside an Edit view with a Form, to edit book details fields. Requires mutationMode="optimistic" (though the tip says pessimistic is needed, the example uses optimistic).

```tsx
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>
);
```

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

### Basic Admin usage with dataProvider and Resource

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Admin.md

Shows the minimal setup for the Admin component: a dataProvider from ra-data-simple-rest and a Resource for posts. Admin children can be Resource or CustomRoutes elements.

```tsx
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;
```

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

### Configure i18nProvider with polyglotI18nProvider and availableLocales

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/LocalesMenuButton.md

Shows how to set up the i18nProvider with polyglotI18nProvider, passing the list of available locales as the third parameter. The example includes the imports and the Admin component usage.

```jsx
// in src/App.js
import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from 'ra-language-english';
import frenchMessages from 'ra-language-french';
import { Admin } from '@/components/admin';
import { Resource } from 'ra-core';

const availableLocales = [
    { locale: 'en', name: 'English' }, 
    { locale: 'fr', name: 'Français' }
];
const i18nProvider = polyglotI18nProvider(
    locale => (locale === 'fr' ? frenchMessages : englishMessages),
    'en', // Default locale
    availableLocales
);

const App = () => (
    <Admin i18nProvider={i18nProvider} dataProvider={dataProvider}>
        ...
    </Admin>
);
```

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

### Use onCreate prop for simple creation

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/AutocompleteArrayInput.md

Use the onCreate prop to create a new option from a single string. The example pushes a new tag to the choices array and returns it.

```jsx
<AutocompleteArrayInput
    source="tags"
    choices={tags}
    onCreate={filter => {
        const newTag = { id: filter.toLowerCase(), name: filter };
        tags.push(newTag);
        return newTag;
    }}
    createLabel="Start typing to create a new tag"
    createItemLabel="Create %{item}"
/>
```

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

### Record with selected value

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/RadioButtonGroupInput.md

Example record showing the form value for the source must be the selected value, here 'lifestyle'.

```js
const record = {
  id: 1,
  name: "Hello, World",
  category: "lifestyle",
};
```

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

### DateField with options and expected output

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/DateField.md

Example showing how to pass formatting options to Intl.DateTimeFormat. The comment shows the expected rendered output for a specific record.

```tsx
<DateField source="published_at" options={{
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
}} />
// renders the record { id: 1234, published_at: new Date('2017-04-23') } as
<span>Sunday, April 23, 2017</span>
```

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

### NumberInput basic usage

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/NumberInput.md

Basic usage of the NumberInput component. The first example renders a simple numeric input bound to the 'price' field. The second example adds step, min, max, and placeholder props to constrain and guide input.

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

<NumberInput source="price" />
<NumberInput source="price" step={0.1} min={0} max={100} placeholder="Enter a price" />
```

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

### Guesser output for a list component

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/README.md

Example output printed by the guessers. Shows the generated list component code that you can copy and paste into your project.

```jsx
// Example output
Guessed List:

import { DataTable } from "@/components/admin/DataTable";
import { List } from "@/components/admin/List";

export const CategoryList = () => (
    <List>
        <DataTable>
            <DataTable.Col source="id" />
            <DataTable.Col source="name" />
        </DataTable>
    </List>
);
```

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

### Navigate to project directory

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Install.mdx

Change into the newly created project directory.

```shell
cd my-app
```

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

### Pass queryOptions to ReferenceOneInputBase

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceOneInputBase.md

Passes options to the `dataProvider.getManyReferences()` query that fetches the possible choices. In this example, a custom `meta` object is provided.

```tsx
<ReferenceOneInputBase
    reference="book_details"
    target="book_id"
    queryOptions={{ meta: { foo: 'bar' } }}
>
    ...
</ReferenceOneInputBase>
```

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

### Configure Admin with JSONPlaceholder data provider

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/rules/AGENTS.md

This TypeScript React component demonstrates the minimal setup for using the <Admin> component with a data provider. It imports the Admin component from the kit and the jsonServerProvider, then sets up the provider with the JSONPlaceholder endpoint. Ensure you have installed ra-data-json-server first.

```tsx
"use client";

import { Admin } from "@/components/admin/admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider(
  "https://jsonplaceholder.typicode.com/",
);

export const App = () => (
  <Admin dataProvider={dataProvider}>{/* Resources go here */}</Admin>
);
```

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

### Run demo locally with make run

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/README.md

Serves the demo application locally for development.

```bash
make run
```

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

### createMany method implementation

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/SoftDeleteFeatures.md

Example of adding a createMany method to a data provider to create multiple records at once, used by BulkSoftDeleteButton for performance when supported.

```tsx
const dataProviderWithCreateMany = {
    ...dataProvider,
    createMany: (resource, params: CreateManyParams): CreateManyResult => {
        const { data } = params; // data is an array of records.
        // ...
        return { data: createdRecords };
    },
};
```

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

### authProvider with canAccess implementation

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Security.md

Example `authProvider` that stores a list of authorized resources in `localStorage` on login and checks them in `canAccess`. The `canAccess` method is asynchronous and can fetch permissions from a server if needed.

```jsx
const authProvider = {
    async login({ username, password }) {
        // ...
        const permissions = await fetchPermissions();
        // permissions look like 
        // ['posts', 'comments', 'users']
        localStorage.setItem('permissions', JSON.stringify(permissions));
    },
    async logout() {
        // ...
        localStorage.removeItem('permissions');
    },
    async canAccess({ resource }) {
        const permissions = JSON.parse(localStorage.getItem('permissions'));
        return permissions.some(p => p.resource === resource);
    },
};
```

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

### Conditional row styling with rowClassName

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/DataTable.md

Use the rowClassName prop on DataTable to apply a CSS class to each row based on the record. The function receives the record and returns a string class name. In this example, rows with is_published true get 'bg-white', otherwise 'bg-gray-50'.

```tsx
import { DataTable, List } from '@/components/admin';

export const PostList = () => (
    <List>
        <DataTable
            rowClassName={(record) =>
                record.is_published ? 'bg-white' : 'bg-gray-50'
            }
        >
            ...
        </DataTable>
    </List>
);
```

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

### Image upload with FileInput and ImageField

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/FileInput.md

Image upload example using FileInput with ImageField for previews. The accept prop restricts to image files, and the className prop styles the preview images.

```tsx
import { FileInput, ImageField } from '@/components/admin';

<FileInput source="pictures" multiple accept={{ 'image/*': [] }}>
  <ImageField
    source="src"
    title="title"
    className="[&_img]:h-24 [&_img]:w-24 [&_img]:rounded-md [&_img]:object-cover"
  />
</FileInput>
```

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

### Use reference prop

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyFieldBase.md

Specify the reference prop to indicate the target resource to fetch. In this example, it displays the venues of a given band through performances.

```tsx
<ReferenceManyToManyFieldBase
    source="id"
    reference="venues"
    resource="bands"
    through="performances"
>
    {/* ... */}
</ReferenceManyToManyFieldBase>
```

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

### Compose List and DataTable in users.tsx

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Quick-Start-Guide.mdx

Defines the `UserList` component using `List` and `DataTable` composition to display a data grid with specified columns. This snippet is used for customizing the list page in the Quick Start guide, demonstrating how `List` handles data fetching and `DataTable` renders the table.

```tsx
// users.tsx
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>
);
```

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

### Create a product creation page with <Create> and <SimpleForm>

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Create.md

Shows how to use the `<Create>` component to build a creation page. The `ProductCreate` component wraps a `<SimpleForm>` with various inputs, and is then passed as the `create` prop of a `<Resource>` in the `<Admin>` component. The example includes a typo in the import path (`@/copmponents/admin`) and an unused `PostCreate` import, which are present in the original source.

```jsx
// in src/products.js
import {
  Create,
  SimpleForm,
  TextInput,
  ReferenceInput,
  AutocompleteInput,
} from "@/components/admin";
import { required } from "ra-core";

export const ProductCreate = () => (
  <Create>
    <SimpleForm>
      <TextInput source="reference" label="Reference" validate={required()} />
      <ReferenceInput source="category_id" reference="categories">
        <AutocompleteInput label="Category" validate={required()} />
      </ReferenceInput>
      <div className="grid grid-cols-2 gap-2">
        <TextInput source="width" type="number" />
        <TextInput source="height" type="number" />
      </div>
      <TextInput source="price" type="number" />
      <TextInput source="stock" label="Stock" type="number" />
    </SimpleForm>
  </Create>
);

// in src/App.js
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;
```

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

### Build project with make build

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/README.md

Builds the project for production.

```bash
make build
```

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

### Custom bulk action buttons with useListContext and useUpdateMany

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/DataTable.md

Create a custom bulk action button component that uses useListContext to get selectedIds and other callbacks, and useUpdateMany to perform a bulk update. The example shows a 'Reset views' button that sets the views field to 0 for all selected posts, with undoable mutation and notifications.

```tsx
import { List, DataTable, BulkDeleteButton, BulkExportButton } from '@/components/admin';

const PostBulkActionButtons = () => (
    <>
        <ResetViewsButton />
        <BulkDeleteButton />
        <BulkExportButton />
    </>
);

export const PostList = () => (
    <List>
        <DataTable bulkActionButtons={<PostBulkActionButtons />}>
            ...
        </DataTable>
    </List>
);
```

```tsx
import {
    useListContext,
    useUpdateMany,
    useRefresh,
    useNotify,
    useUnselectAll,
} from 'ra-core';
import { Button } from '@/components/admin';
import { EyeOff } from 'lucide-react';

const ResetViewsButton = () => {
    const { selectedIds } = useListContext();
    const refresh = useRefresh();
    const notify = useNotify();
    const unselectAll = useUnselectAll('posts');
    const [updateMany, { isPending }] = useUpdateMany();
    const handleClick = () => {
        updateMany(
            'posts',
            { ids: selectedIds, data: { views: 0 } },
            {
                onSuccess: () => {
                    notify('Posts updated', { undoable: true });
                    unselectAll();
                },
                onError: () => {
                    notify('Error: posts not updated', { type: 'error' });
                    refresh();
                },
                mutationMode: 'undoable',
            }
        );
    }

    return (
        <Button onClick={handleClick} disabled={isPending}>
            <EyeOff /> Reset views
        </Button>
    );
};
```

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

### Example post record with tag_ids array

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceArrayInput.md

A sample post object that the PostEdit component might edit, showing the tag_ids array of foreign keys.

```js
{
    id: 1234,
    title: "Lorem Ipsum",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    tag_ids: [1, 23, 4]
}
```

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

### Initialize Next.js project with shadcn-admin-kit

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Install.mdx

Run this command to create a new Next.js project with the shadcn-admin-kit preset. It adds components to `components/admin` and `components/ui`, and utilities to `hooks/` and `lib/`.

```shell
npx shadcn@latest init \
  --template next \
  --preset vega \
  --name my-app \
  https://marmelab.com/shadcn-admin-kit/r/admin.json
```

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

### Initialize Vite.js project with shadcn-admin-kit

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Install.mdx

Run this command to create a new Vite.js project with the shadcn-admin-kit preset. It adds components to `src/components/admin` and `src/components/ui`, and utilities to `src/hooks/` and `src/lib/`.

```shell
npx shadcn@latest init \
  --template vite \
  --preset vega \
  --name my-app \
  https://marmelab.com/shadcn-admin-kit/r/admin.json
```

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

### Initialize Admin with basename and dataProvider (React Router)

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Quick-Start-Guide.mdx

Sets up the admin app with a basename and a data provider. Required before adding resources.

```tsx
// app/admin/App.tsx
import { Admin } from "~/components/admin";
import { dataProvider } from "./dataProvider";

const App = () => <Admin basename="/admin" dataProvider={dataProvider}></Admin>;

export default App;
```

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

### Set up Auth0 authProvider with Admin component

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Security.md

Configure Auth0 authentication in shadcn-admin-kit by creating an Auth0Client and Auth0AuthProvider, then passing the provider to the Admin component. Requires environment variables for domain, client ID, audience, and redirect URIs. After setup, unauthenticated users are redirected to the login page and returned to the originally requested page after login.

```js
import { BrowserRouter } from 'react-router';
import { Auth0AuthProvider } from 'ra-auth-auth0';
import { Auth0Client } from '@auth0/auth0-spa-js';
import { Admin } from '@/components/admin';

const auth0 = new Auth0Client({
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
    cacheLocation: 'localstorage',
    authorizationParams: {
        audience: import.meta.env.VITE_AUTH0_AUDIENCE,
    },
});

const authProvider = Auth0AuthProvider(auth0, {
    loginRedirectUri: import.meta.env.VITE_LOGIN_REDIRECT_URL,
    logoutRedirectUri: import.meta.env.VITE_LOGOUT_REDIRECT_URL,
});

const App = () => (
    <BrowserRouter>
        <Admin authProvider={authProvider}>
            ...
        </Admin>
    </BrowserRouter>
);
```

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

### Create PostCreate component with Create and SimpleForm

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Quick-Start-Guide.mdx

Shows how to create a PostCreate component by copying PostEdit and replacing Edit with Create. The diff adds the Create import and the new component with a SimpleForm containing ReferenceInput, AutocompleteInput, and TextInput fields. Note that PostEdit includes an additional id input, but the creation form omits it because most APIs generate primary keys server-side.

```tsx
// posts.tsx
import {
+    Create,
    DataTable,
    List,
    ReferenceField,
    AutocompleteInput,
    Edit,
    ReferenceInput,
    SimpleForm,
    TextInput,
    EditButton,
} from "@/components/admin";

export const PostList = () => (
    /* ... */
);

export const PostEdit = () => (
    /* ... */
);

+export const PostCreate = () => (
+   <Create>
+       <SimpleForm>
+           <ReferenceInput source="userId" reference="users">
+               <AutocompleteInput />
+           </ReferenceInput>
+           <TextInput source="title" />
+           <TextInput source="body" />
+       </SimpleForm>
+   </Create>
+);

```

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

### Define Resource with Guessers

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/rules/AGENTS.md

This example shows how to use the <Resource> component with built-in guessers for list, edit, and show views. It imports the necessary guessers and the Resource component, and defines a resource named 'posts' with those guessers. The dataProvider is configured using JSONPlaceholder.

```tsx
"use client";

import { Resource } from "ra-core";
import jsonServerProvider from "ra-data-json-server";
import { Admin } from "@/components/admin/admin";
import { ListGuesser } from "@/components/admin/list-guesser";
import { ShowGuesser } from "@/components/admin/show-guesser";
import { EditGuesser } from "@/components/admin/edit-guesser";

const dataProvider = jsonServerProvider(
  "https://jsonplaceholder.typicode.com/",
);

export const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource
      name="posts"
      list={ListGuesser}
      edit={EditGuesser}
      show={ShowGuesser}
    />
  </Admin>
);
```

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

### Example record value for AutocompleteInput

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/AutocompleteInput.md

Example of a record value for the source field. The category field must be set to the selected choice's id, such as 'lifestyle'.

```js
{
    id: 123,
    title: 'Lorem Ipsum',
    category: 'lifestyle',
}
```

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

### Using Show in Resource - src/App.jsx

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Show.md

Shows how to use the `ProductShow` component as the `show` prop of a `<Resource>` component. This is defined in src/App.jsx.

```jsx
// in src/App.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>
);
```

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

### Test UI registry with make test-registry

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/README.md

Runs tests for the UI registry.

```bash
make test-registry
```

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

### through prop example

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyFieldBase.md

Specifies the associative table name using the through prop.

```tsx
<ReferenceManyToManyFieldBase reference="venues" through="performances">
    {/* ... */}
</ReferenceManyToManyFieldBase>
```

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

### Minimal List with DataTable and Admin setup

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/List.md

Use this snippet to display a basic list of users with sorting and pagination. It defines a `UserList` component using `<List>` and `<DataTable>`, and sets up an `Admin` with a `Resource` for the `users` endpoint. The data provider is `jsonServerProvider` pointing to a JSONPlaceholder API.

```tsx
// 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;
```

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

### Initialize Shadcn Admin Kit with React-Router

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Install.mdx

Initializes a new React-Router v7 project with the Shadcn Admin Kit preset. Adds components to app/components/admin and app/components/ui, plus utilities in app/hooks/ and app/lib/.

```shell
npx shadcn@latest init \
  --template react-router \
  --preset vega \
  --name my-app \
  https://marmelab.com/shadcn-admin-kit/r/admin.json
```

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

### useGetList

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/DataProviders.md

Fetches a list of records on mount. Calls dataProvider.getList(). Returns { data, isPending, error }.

```APIDOC
## useGetList

### Description
Fetches a list of records on mount. Calls `dataProvider.getList()`.

### Method
Hook

### Signature
`useGetList(resource, params)`

### Parameters
- **resource** (string) - Required - The resource name.
- **params** (object) - Required - The query parameters for the list, e.g., pagination, sorting, filtering.

### Return Value
Returns an object with the following properties:
- **data** (array) - The list of records.
- **isPending** (boolean) - Whether the request is in progress.
- **error** (Error) - The error object if the request failed.

### Example
Refer to the Data Fetching documentation for usage examples.
```

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

### sort prop example

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyFieldBase.md

Sets the sort order for the associative resource to date DESC.

```tsx
<ReferenceManyToManyFieldBase
    reference="venues"
    through="performances"
    using="band_id,venue_id"
    sort={{ field: 'date', order: 'DESC' }}
>
    {/* ... */}
</ReferenceManyToManyFieldBase>
```

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

### Usage - ProductShow with Show and RecordField

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Show.md

Minimal code to display a view to show a post. Uses `<Show>` with `<RecordField>` and various fields (NumberField, ReferenceField) plus render props. This is defined in src/products.jsx.

```jsx
// in src/products.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>
);
```

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

### source prop example

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/ReferenceManyToManyFieldBase.md

Uses the _id field as the target for the reference instead of the default id.

```tsx
<ReferenceManyToManyFieldBase
    source="_id"
    reference="venues"
    resource="bands"
    through="performances"
>
    {/* ... */}
</ReferenceManyToManyFieldBase>
```

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

### Use SoftDeleteButton in Edit view

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/SoftDeleteFeatures.md

Example of replacing the standard DeleteButton with the custom SoftDeleteButton within an Edit component.

```tsx
import { Edit } from '@/components/admin';
import { SoftDeleteButton } from './SoftDeleteButton';

const PostEdit = () => (
    <Edit actions={<SoftDeleteButton />}>
        ...
    </Edit>
);
```

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

### Initialize and pass dataProvider to <Admin>

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/DataProviders.md

Initialize the Simple REST data provider with the API URL and pass it to the <Admin> component via the dataProvider prop. This makes all shadcn-admin-kit components work with the API.

```jsx
// 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;
```

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

### Input value structure

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/FileInput.md

Example of the input value structure: an object or array of objects with title and src properties.

```js
{
    id: 123,
    attachments: [
        {
            title: 'Invoice-2929-01-06.pdf',
            src: 'https://example.com/uploads/invoice-2929-01-06.pdf',
        },
        {
            title: 'export.pdf',
            src: 'https://example.com/uploads/export.pdf',
        },
    ],
}
```

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

### FileField with target prop

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/FileField.md

Shows how to set the target prop to open the file in a new window.

```jsx
// Will make the file open in new window
<FileField source="file.url" target="_blank" />
```

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

### Initialize shadcn MCP server for multiple clients

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/MCP.md

Initializes the shadcn MCP server for Claude, Cursor, and VSCode clients. Run each command for the client you use.

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

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

### Example record with tags field

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/AutocompleteArrayInput.md

Shows the shape of a record where the tags field is an array of objects, each with an id property.

```json
{
  "id": 123,
  "tags": [
      { "id": "lifestyle" },
      { "id": "photography" }
   ] 
}
```

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

### Pass editorOptions to TipTap

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/RichTextInput.md

Spread `DefaultEditorOptions` to start with the kit's configuration, then override lifecycle hooks like `onCreate`.

```tsx
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);
        },
    }}
/>
```

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

### Reinstall shadcn-admin-kit

Source: https://github.com/marmelab/shadcn-admin-kit/blob/main/docs/src/content/docs/Migrate.md

Reinstall shadcn-admin-kit after updating components.json. Confirm to overwrite all the kit's components.

```shell
npx shadcn@latest add https://marmelab.com/shadcn-admin-kit/r/admin.json
```
Tokens:
Raw