Skip to content

Commit 5bf9230

Browse files
committed
Mention shadcn-admin-kit
1 parent beb7e84 commit 5bf9230

File tree

2 files changed

+38
-9
lines changed

2 files changed

+38
-9
lines changed

docs/Architecture.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -219,9 +219,9 @@ Although this drawback exists, we accept it because the use of composition in re
219219

220220
## Hooks
221221

222-
When you find that you cannot tweak a react-admin component using props, you can always turn to the lower-level API: hooks. In fact, react-admin is built on top of a headless library called `ra-core`, which primarily consists of hooks. These hooks hide the framework's implementation details, allowing you to focus on your business logic. It's perfectly normal to use react-admin hooks in your own components if the default UI doesn't meet your specific requirements.
222+
When you find that you cannot tweak a react-admin component using props, you can always turn to the lower-level API: hooks. In fact, the core of react-admin is a headless library called `ra-core`, which primarily consists of hooks. These hooks hide the framework's implementation details, allowing you to focus on your business logic. It's perfectly normal to use react-admin hooks in your own components if the default UI doesn't meet your specific requirements.
223223

224-
For example, the `<DeleteWithConfirmButton>` button renders a confirmation dialog when clicked and then calls the `dataProvider.delete()` method for the current record. If you want the same feature but with a different UI, you can use the `useDeleteWithConfirmController` hook:
224+
For example, the `<DeleteButton>` button used in `pessimistic` mode renders a confirmation dialog when clicked and then calls the `dataProvider.delete()` method for the current record. If you want the same feature but with a different UI, you can use the `useDeleteWithConfirmController` hook:
225225

226226
{% raw %}
227227
```jsx
@@ -269,7 +269,7 @@ The fact that hook names often end with `Controller` is intentional and reflects
269269
- The view logic is managed by React components (e.g. `<List>`).
270270
- The model logic is left to the developer, and react-admin simply defines the interface that the model must expose through its Providers.
271271

272-
React-admin exposes [dozens of hooks](./Reference.md#hooks) to assist you in building your own components. You can even construct an entire react-admin application without relying on the Material UI components and use a different UI kit if desired. This flexibility allows you to tailor the application to your specific needs and preferences.
272+
React-admin exposes [dozens of hooks](./Reference.md#hooks) to assist you in building your own components. You can even construct an entire react-admin application without relying on the Material UI components and use a different UI kit if desired (see for instance [shadcn-admin-kit](https://github.com/marmelab/shadcn-admin-kit), a library for building admin apps with Shadcn UI). This flexibility allows you to tailor the application to your specific needs and preferences.
273273

274274
## Context: Pull, Don't Push
275275

docs/Features.md

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -273,11 +273,43 @@ And for mobile users, react-admin renders a different layout with larger margins
273273

274274
## Headless Core
275275

276-
React-admin components use Material UI components by default, which lets you scaffold a page in no time. As material UI supports [theming](#theming), you can easily customize the look and feel of your app. But in some cases, this is not enough, and you need to use another UI library.
276+
React-admin components use Material UI components by default, which lets you scaffold a page in no time. As Material UI supports [theming](#theming), you can easily customize the look and feel of your app. But in some cases, this is not enough, and you need to use another UI library.
277277

278278
You can change the UI library you use with react-admin to use [Ant Design](https://ant.design/), [Daisy UI](https://daisyui.com/), [Chakra UI](https://chakra-ui.com/), or even you own custom UI library. The **headless logic** behind react-admin components is agnostic of the UI library, and is exposed via `...Base` components and controller hooks.
279279

280-
For instance, here a List view built with [Ant Design](https://ant.design/):
280+
For instance, [`shadcn-admin-kit`](https://github.com/marmelab/shadcn-admin-kit) is a react-admin distribution that replaces Material UI with [Shadcn UI](https://ui.shadcn.com/).
281+
282+
[![Shadcn admin kit](https://github.com/marmelab/shadcn-admin-kit/raw/main/public/shadcn-admin-kit.webp)](https://github.com/marmelab/shadcn-admin-kit)
283+
284+
`shadcn-admin-kit` follows the same syntax conventions as react-admin, so most of the react-admin documentation still applies. For example, the `<ProductEdit>` component looks like this:
285+
286+
```tsx
287+
import {
288+
AutocompleteInput,
289+
Edit,
290+
ReferenceInput,
291+
SimpleForm,
292+
TextInput,
293+
} from "@/components/admin";
294+
import { required } from "ra-core";
295+
296+
export const ProductEdit = () => (
297+
<Edit>
298+
<SimpleForm>
299+
<TextInput source="reference" label="Reference" validate={required()} />
300+
<ReferenceInput source="category_id" reference="categories">
301+
<AutocompleteInput label="Category" validate={required()} />
302+
</ReferenceInput>
303+
<TextInput source="width" type="number" />
304+
<TextInput source="height" type="number" />
305+
<TextInput source="price" type="number" />
306+
<TextInput source="stock" label="Stock" type="number" />
307+
</SimpleForm>
308+
</Edit>
309+
);
310+
```
311+
312+
Here is another example: a List view built with [Ant Design](https://ant.design/):
281313

282314
![List view built with Ant Design](./img/list_ant_design.png)
283315

@@ -360,10 +392,7 @@ Check the following hooks to learn more about headless controllers:
360392
- [`useCreateController`](./useCreateController.md)
361393
- [`useShowController`](./useShowController.md)
362394

363-
And check these examples for admin panels built with react-admin but without Material UI:
364-
365-
- [DaisyUI, Tailwind CSS, Tanstack Table and React-Aria](https://marmelab.com/blog/2023/11/28/using-react-admin-with-your-favorite-ui-library.html)
366-
- [shadcn/ui, Tailwind CSS and Radix UI](https://github.com/marmelab/ra-shadcn-demo)
395+
And for a more in-depth tutorial about using react-admin with your favorite UI library, check the following article: [Building an admin with DaisyUI, Tailwind CSS, Tanstack Table and React-Aria](https://marmelab.com/blog/2023/11/28/using-react-admin-with-your-favorite-ui-library.html).
367396

368397
## Guessers & Scaffolding
369398

0 commit comments

Comments
 (0)