React-admin With Shadcn UI

React-admin, the SPA framework for B2B apps, comes with a Material Design look and feel by default. However, react-admin is a design-agnostic framework, and you can use it with any design system. Today, we’re announcing premium support for Shadcn UI, the popular component library.

You can use Shadcn UI with react-admin in two ways:

1. Just the Look: Change the theme of your react-admin app to a Shadcn UI-inspired theme.
2. The Shadcn UI DX: Use the shadcn-admin-kit library, which provides a set of Shadcn UI components built on top of react-admin’s headless core.

Just the Look: Change The Theme

React-admin comes with 5 built-in themes, including a theme inspired by Shadcn UI called B&W.

To use this theme in your react-admin app, change the theme and darkTheme props of the <Admin> component.

import { Admin, bwLightTheme, bwDarkTheme } from 'react-admin';

export const App = () => (
    <Admin
        dataProvider={dataProvider}
        theme={bwLightTheme}
        darkTheme={bwDarkTheme}
    >
        {/* ... */}
    </Admin>
);

You must also import the Geist font in your index.html file:

<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">

Now the application skin is Shadcn UI.

Under the hood, react-admin still uses Material UI, so you get all the power of Material UI’s theming system.

import { Admin, bwDarkTheme } from 'react-admin';
import { deepmerge } from '@mui/utils';

// Define a custom theme by merging customizations into the base bwDarkTheme
const myTheme = deepmerge(bwDarkTheme, {
    palette: {
        secondary: { main: '#536dfe' },
    },
});

import { Admin, bwDarkTheme } from 'react-admin';
import { deepmerge } from '@mui/utils';

// Define a custom theme with button overrides
const myTheme = deepmerge(bwDarkTheme, {
    components: {
        // Target the MuiButton component
        MuiButton: {
            defaultProps: {
                // Set default variant for all buttons
                variant: 'contained',
            },
            styleOverrides: {
                // Override specific styles
                root: {
                    // Disable text transformation (e.g., uppercase)
                    textTransform: 'none',
                },
            }
        },
    },
});

import { DeleteButton } from 'react-admin';

const MyDeleteButton = () => (
    <DeleteButton
        sx={{
            backgroundColor: 'red',
            '&:hover': {
                backgroundColor: 'darkred',
            },
        }}
    />
);

Getting The Shadcn Developer Experience

Shadcn UI isn’t only about design. It also provides a different way to customize UI components, by copying UI components in the project source code rather than offering extension points in each component.

React-admin relies on a headless core, which provides hooks and components independent of any specific UI library. This means it’s possible to build another version of react-admin that uses Shadcn UI components instead of Material UI components.

That’s exactly what we did with shadcn-admin-kit. It’s an open-source library that provides a set of React components using Shadcn UI and react-admin headless core.

The syntax is very similar to react-admin, so most of the react-admin documentation applies to shadcn-admin-kit as well. For example, the <ProductEdit> component looks like this:

import {
  AutocompleteInput,
  Edit,
  ReferenceInput,
  SimpleForm,
  TextInput,
} from "@/components/admin";
import { required } from "ra-core";

export const ProductEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput source="reference" label="Reference" validate={required()} />
      <ReferenceInput source="category_id" reference="categories">
        <AutocompleteInput label="Category" validate={required()} />
      </ReferenceInput>
      <TextInput source="width" type="number" />
      <TextInput source="height" type="number" />
      <TextInput source="price" type="number" />
      <TextInput source="stock" label="Stock" type="number" />
    </SimpleForm>
  </Edit>
);

But the components are entirely built with Shadcn UI - no Material UI components in sight. So you can entirely customize the admin components by modifying the files in the components/admin directory.

Shadcn-admin-kit relies on the following tech stack:

• UI: shadcn/ui & Radix UI
• Styling: Tailwind CSS
• Icons: Lucide
• Routing: React Router
• API calls: TanStack Query
• Forms & Validation: React Hook Form
• Admin Framework: React Admin
• Type safety: TypeScript
• Build tool: Vite (SPA mode)

It already proposes the most important features of react-admin, such as:

• CRUD: working List, Show, Edit and Create pages
• Data Table with sorting, filtering, export, bulk actions, and pagination
• Form components with data binding and validation
• View and edit references (one-to-many, many-to-one)
• Sidebar menu
• Login page (compatible with any authentication backend)
• Dashboard page
• Automatically guess the code based on the data, using Guessers
• i18n support
• Light/dark mode
• Responsive
• Accessible
• Compatible with any API (REST, GraphQL, etc.)

So if the Material UI developer experience is not your cup of tea, you can use shadcn-admin-kit to get the Shadcn UI look and feel, while keeping the react-admin architecture and robustness.

Conclusion

React-admin is a design-agnostic framework adaptable to any design system. We’ve already documented how to integrate react-admin with various UI libraries in a previous article: Using React-Admin With Your Favorite UI Library.

With the B&W theme and the shadcn-admin-kit library, we’re going a step further by making Shadcn a first-class citizen in the react-admin ecosystem. Look for more Shadcn UI components in the future, as we continue to build a rich ecosystem around react-admin.

We were unable to confirm your registration.

Your registration is confirmed.

Keep up to date

Join our react-admin newsletter for regular updates. No spam ever.

Subscribe