Introduction

Installing the package is as simple as just by running the following command without any additional configuration:

npm
pnpm
yarn

npm i @refinedev/antd antd

pnpm add @refinedev/antd antd

yarn add @refinedev/antd antd

We'll wrap our app with the <ConfigProvider /> to make sure we have the theme available for our app, then we'll use the layout components to wrap them around our routes. Check out the examples below to see how to use Refine's Ant Design integration.

React Router
Next.js
Remix

import { Refine, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, { NavigateToResource } from "@refinedev/react-router";
import { BrowserRouter, Route, Routes, Outlet, Navigate } from "react-router";

import { ErrorComponent, RefineThemes, ThemedLayoutV2, useNotificationProvider, AuthPage } from "@refinedev/antd";
import { App as AntdApp, ConfigProvider } from "antd";

import authProvider from "./auth-provider";

import "@refinedev/antd/dist/reset.css";

import { ProductList, ProductShow, ProductEdit, ProductCreate } from "./pages/products";

export default function App() {
  return (
    <BrowserRouter>
      <ConfigProvider theme={RefineThemes.Blue}>
        <AntdApp>
          <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
            authProvider={authProvider}
            notificationProvider={useNotificationProvider}
            resources={[
              {
                name: "products",
                list: "/products",
                show: "/products/:id",
                edit: "/products/:id/edit",
                create: "/products/create"
              }
            ]}
            options={{ syncWithLocation: true }}
          >
            <Routes>
              <Route element={<Authenticated fallback={<Navigate to="/login" />}><Outlet /></Authenticated>}>
                <Route
                  element={
                    <ThemedLayoutV2>
                      <Outlet />
                    </ThemedLayoutV2>
                  }
                >
                  <Route path="/products" element={<Outlet />}>
                      <Route index element={<ProductList />} />
                      <Route path="create" element={<ProductCreate />} />
                      <Route path=":id" element={<ProductShow />} />
                      <Route path=":id/edit" element={<ProductEdit />} />
                  </Route>
                  <Route path="*" element={<ErrorComponent />} />
                </Route>
              </Route>
              <Route element={<Authenticated fallback={<Outlet />}><NavigateToResource resource="products" /></Authenticated>}>
                <Route path="/login" element={<AuthPage type="login" />} />
                <Route path="/register" element={<AuthPage type="register" />} />
                <Route path="/forgot-password" element={<AuthPage type="forgotPassword" />} />
                <Route path="/reset-password" element={<AuthPage type="resetPassword" />} />
                <Route path="*" element={<ErrorComponent />} />
              </Route>
            </Routes>
          </Refine>
        </AntdApp>
      </ConfigProvider>
    </BrowserRouter>
  );
};

import React from "react";

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/nextjs-router/pages";
import dataProvider from "@refinedev/simple-rest";
import type { AppProps } from "next/app";

import { RefineThemes, ThemedLayoutV2, useNotificationProvider } from "@refinedev/antd";
import { App as AntdApp, ConfigProvider } from "antd";

import "@refinedev/antd/dist/reset.css";

import authProvider from "../src/auth-provider";

export type ExtendedNextPage = NextPage & {
  noLayout?: boolean;
};

type ExtendedAppProps = AppProps & {
  Component: ExtendedNextPage;
};

function App({ Component, pageProps }: ExtendedAppProps) {
  const renderComponent = () => {
      if (Component.noLayout) {
          return <Component {...pageProps} />;
      }

      return (
          <ThemedLayoutV2>
              <Component {...pageProps} />
          </ThemedLayoutV2>
      );
  }

  return (
    <ConfigProvider theme={RefineThemes.Blue}>
      <AntdApp>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
          notificationProvider={useNotificationProvider}
          authProvider={authProvider}
          resources={[
            {
              name: "products",
              list: "/products",
              show: "/products/:id",
              edit: "/products/:id/edit",
              create: "/products/create"
            },
          ]}
          options={{ syncWithLocation: true }}
        >
          {renderComponent()}
        </Refine>
      </AntdApp>
    </ConfigProvider>
  );
}

export default App;

import React from "react";

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/remix-router";
import dataProvider from "@refinedev/simple-rest";

import { useNotificationProvider, RefineThemes } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

import resetStyle from "@refinedev/antd/dist/reset.css";

import authProvider from "./auth-provider";

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <ConfigProvider theme={RefineThemes.Blue}>
          <AntdApp>
            <Refine
              routerProvider={routerProvider}
              dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
              authProvider={authProvider}
              notificationProvider={useNotificationProvider}
              resources={[
                {
                  name: "products",
                  list: "/products",
                  show: "/products/:id",
                  edit: "/products/:id/edit",
                  create: "/products/create",
                },
              ]}
              options={{ syncWithLocation: true }}
            >
              <Outlet />
            </Refine>
          </AntdApp>
        </ConfigProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Refine provides a seamless integration with the <Table /> component of Ant Design from pagination to sorting and filtering via the useTable hook exported from the @refinedev/antd package. This hook is an extension of the @refinedev/core's useTable and provides a set of additional features and transformations to make it work with Ant Design's <Table /> component without any additional configuration.

pages/products/list.tsx

import { useTable } from "@refinedev/antd";
import { Table } from "antd";

export const ProductList = () => {
  const { tableProps } = useTable<IProduct>();
  // `tableProps` contains the necessary props to be passed
  // to the `<Table />` component of Ant Design
  // by transforming the values to fit the Ant Design's API.

  return (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="name" title="Name" />
      <Table.Column dataIndex="price" title="Price" />
    </Table>
  );
};

interface IProduct {
  id: string;
  name: string;
  price: number;
  description: string;
}

@refinedev/antd package also provides a <FilterDropdown /> component to be used in the filter popover of the <Table /> component. This component makes it easy to apply filters from the Ant Design UI without any additional configuration.

Refine provides a seamless integration with the <Form /> component of Ant Design from validation to submission via the useForm hook exported from the @refinedev/antd package. This hook is an extension of the @refinedev/core's useForm and provides a set of additional features and transformations to make it work with Ant Design's <Form /> component.

pages/products/create.tsx

import { useForm, SaveButton } from "@refinedev/antd";
import { Form, Input, InputNumber } from "antd";

export const ProductCreate = () => {
    const { formProps, saveButtonProps } = useForm<IProduct>();
    // `formProps` contains the necessary props to be passed
    // to the `<Form />` component of Ant Design
    // by transforming the values to fit the Ant Design's API.

    return (
        <Form {...formProps} layout="vertical">
            <Form.Item
                label="Name"
                name="name"
                rules={[{ required: true }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="Price"
                name="price"
                rules={[{ required: true }]}
            >
                <InputNumber />
            </Form.Item>
            <Form.Item
                label="Description"
                name="description"
                rules={[{ required: true }]}
            >
                <Input.TextArea rows={4} />
            </Form.Item>
            <SaveButton {...saveButtonProps}>
        </Form>
    )
}

interface IProduct {
  id: string;
  name: string;
  price: number;
  description: string;
}

@refinedev/antd also offers hooks to implement different types of forms such as useDrawerForm, useModalForm and useStepsForm hooks. Additionally useSelect, useCheckboxGroup and useRadioGroup hooks are also provided to make it easier to implement form fields with relational data. These hooks leverage the useSelect hook from the @refinedev/core package.

Ant Design has its own notification system which works seamlessly with its UI elements. Refine also provides a seamless integration with Ant Design's notification system and show notifications for related actions and events. This integration is provided by the useNotificationProvider hook exported from the @refinedev/antd package which can be directly used in the notificationProvider prop of the <Refine /> component.

app.tsx

import { Refine } from "@refinedev/core";
import { useNotificationProvider, RefineThemes } from "@refinedev/antd";
import { App as AntdApp } from "antd";

const App = () => {
  return (
    <ConfigProvider theme={RefineThemes.Green}>
      <AntdApp>
        <Refine notificationProvider={useNotificationProvider}>
          {/* ... */}
        </Refine>
      </AntdApp>
    </ConfigProvider>
  );
};

TIP

If you have any configurations in the Ant Design's theme, you should wrap your app with the <App /> component to make sure the notifications are also receiving the current theme configuration.

Refine provides Layout components that can be used to implement a layout for the application. These components are crafted using Ant Design's components and includes Refine's features and functionalities such as navigation menus, headers, authentication, authorization and more.

React Router
Next.js
Remix

import React from "react";

import { Refine, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider from "@refinedev/react-router";
import { BrowserRouter, Route, Routes, Outlet } from "react-router";

import { ErrorComponent, RefineThemes, ThemedLayoutV2, useNotificationProvider } from "@refinedev/antd";
import { App as AntdApp, ConfigProvider } from "antd";

import "@refinedev/antd/dist/reset.css";

import authProvider from "./auth-provider";
import { ProductList } from "./pages/products/list";

export default function App() {
  return (
    <BrowserRouter>
      <ConfigProvider theme={RefineThemes.Blue}>
        <AntdApp>
          <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
            notificationProvider={useNotificationProvider}
            authProvider={authProvider}
            resources={[
              {
                name: "products",
                list: "/products",
              }
            ]}
          >
            <Routes>
                <Route
                  // The layout will wrap all the pages inside this route
                  element={
                    <ThemedLayoutV2>
                      <Outlet />
                    </ThemedLayoutV2>
                  }
                >
                    <Route path="/products" element={<ProductList />} />
                    <Route path="*" element={<ErrorComponent />} />
                </Route>
            </Routes>
          </Refine>
        </AntdApp>
      </ConfigProvider>
    </BrowserRouter>
  );
};

Open Sandbox

Code Example

Dependencies: @refinedev/antd@latest,@refinedev/core@latest,@refinedev/simple-rest@latest,@refinedev/react-router@latest,react-router@^7.0.2,antd@^5.0.5

Code Files

File: /App.tsx

Content: import React from "react";

import { Refine, Authenticated } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import routerProvider from "@refinedev/react-router";
import { BrowserRouter, Route, Routes, Outlet } from "react-router";

import { ErrorComponent, RefineThemes, ThemedLayoutV2, useNotificationProvider } from "@refinedev/antd";
import { App as AntdApp, ConfigProvider } from "antd";

import "@refinedev/antd/dist/reset.css";

import authProvider from "./auth-provider";
import { ProductList } from "./pages/products/list";

export default function App() {
  return (
    <BrowserRouter>
      <ConfigProvider theme={RefineThemes.Blue}>
        <AntdApp>
          <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
            notificationProvider={useNotificationProvider}
            authProvider={authProvider}
            resources={[
              {
                name: "products",
                list: "/products",
              }
            ]}
          >
            <Routes>
                <Route
                  // The layout will wrap all the pages inside this route
                  element={
                    <ThemedLayoutV2>
                      <Outlet />
                    </ThemedLayoutV2>
                  }
                >
                    <Route path="/products" element={<ProductList />} />
                    <Route path="*" element={<ErrorComponent />} />
                </Route>
            </Routes>
          </Refine>
        </AntdApp>
      </ConfigProvider>
    </BrowserRouter>
  );
};

File: /pages/products/list.tsx

Content: import React from "react";
import { List, useTable } from "@refinedev/antd";
import { Space, Table } from "antd";

export const ProductList = () => {
  const { tableProps } = useTable();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="Id" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column dataIndex="price" title="Price" />
      </Table>
    </List>
  );
};

File: /auth-provider.tsx

Content: const authProvider = {
    login: async ({ username, password }) => {
      (window as any).authenticated = true;
      return { success: true };
    },
    check: async () => {
      // auto login at first time
      if (typeof (window as any).authenticated === "undefined") {
        (window as any).authenticated = true;
      }
      return { authenticated: Boolean((window as any).authenticated) };
    },
    logout: async () => {
      (window as any).authenticated = false;
      return { success: true };
    },
    register: async () => {
      return { success: true };
    },
    forgotPassword: async () => {
      return { success: true };
    },
    resetPassword: async () => {
      return { success: true };
    },
    getIdentity: async () => ({ id: 1, name: "John Doe", avatar: "https://i.pravatar.cc/300"})
};

export default authProvider;

import React from "react";

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/nextjs-router/pages";
import dataProvider from "@refinedev/simple-rest";
import type { AppProps } from "next/app";

import { RefineThemes, ThemedLayoutV2, useNotificationProvider } from "@refinedev/antd";
import { App as AntdApp, ConfigProvider } from "antd";

import "@refinedev/antd/dist/reset.css";

function App({ Component, pageProps }: AppProps) {
    return (
        <ConfigProvider theme={RefineThemes.Blue}>
            <AntdApp>
                <Refine
                    routerProvider={routerProvider}
                    dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                    notificationProvider={useNotificationProvider}
                    resources={[
                        {
                        name: "products",
                        list: "/products",
                        },
                    ]}
                >
                  <ThemedLayoutV2>
                    <Component {...pageProps} />
                  </ThemedLayoutV2>
                </Refine>
            </AntdApp>
        </ConfigProvider>
    );
}

export default App;

import { ThemedLayoutV2 } from "@refinedev/antd";
import { Outlet } from "@remix-run/react";
import { LoaderFunctionArgs, redirect } from "@remix-run/node";

/**
 * Routes starting with `_layout` will have their children rendered inside the layout.
 */
export default function Layout() {
    return (
        <ThemedLayoutV2>
            <Outlet />
        </ThemedLayoutV2>
    );
}

Code Example

Dependencies: @refinedev/antd@latest,@refinedev/core@latest,@refinedev/simple-rest@latest,@refinedev/remix-router@latest,antd@^5.0.5

Code Files

File: /app/root.tsx

Content: import React from "react";

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/remix-router";
import dataProvider from "@refinedev/simple-rest";

import { useNotificationProvider, RefineThemes } from "@refinedev/antd";
import { ConfigProvider, App as AntdApp } from "antd";

import resetStyle from "@refinedev/antd/dist/reset.css";

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <ConfigProvider theme={RefineThemes.Blue}>
          <AntdApp>
            <Refine
              routerProvider={routerProvider}
              dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
              notificationProvider={useNotificationProvider}
              resources={[
                {
                  name: "products",
                  list: "/products",
                },
              ]}
            >
              <Outlet />
            </Refine>
          </AntdApp>
        </ConfigProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

File: /app/routes/_layout.tsx

Content: import { ThemedLayoutV2 } from "@refinedev/antd";
import { Outlet } from "@remix-run/react";
import { LoaderFunctionArgs, redirect } from "@remix-run/node";

/**
 * Routes starting with `_layout` will have their children rendered inside the layout.
 */
export default function Layout() {
    return (
        <ThemedLayoutV2>
            <Outlet />
        </ThemedLayoutV2>
    );
}

File: /app/routes/_layout.products._index.tsx

Content: import React from "react";
import { List, useTable } from "@refinedev/antd";
import { Space, Table } from "antd";

export default function ProductList() {
  const { tableProps } = useTable();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="Id" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column dataIndex="price" title="Price" />
      </Table>
    </List>
  );
};

<ThemedLayoutV2 /> component consists of a header, sider and a content area. The sider have a navigation menu items for the defined resources of Refine, if an authentication provider is present, it will also have a functional logout button. The header contains the app logo and name and also information about the current user if an authentication provider is present.

Additionally, Refine also provides a <Breadcrumb /> component that uses the Ant Design's component as a base and provide appropriate breadcrumbs for the current route. This component is used in the basic views provided by Refine's Ant Design package automatically.

Refine's Ant Design integration offers variety of buttons that are built above the <Button /> component of Ant Design and includes many logical functionalities such as;

Authorization checks
Confirmation dialogs
Loading states
Invalidation
Navigation
Form actions
Import/Export and more.

You can use buttons such as <EditButton /> or <ListButton /> etc. in your views to provide navigation for the related routes or <DeleteButton /> and <SaveButton /> etc. to perform related actions without having to worry about the authorization checks and other logical functionalities.

An example usage of the <EditButton /> component is as follows:

pages/products/list.tsx

import { useTable, EditButton } from "@refinedev/antd";
import { Table } from "antd";

export const ProductList = () => {
  const { tableProps } = useTable<IProduct>();

  return (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="name" title="Name" />
      <Table.Column dataIndex="price" title="Price" />
      <Table.Column
        title="Actions"
        dataIndex="actions"
        render={(_, record) => (
          <EditButton hideText size="small" recordItemId={record.id} />
        )}
      />
    </Table>
  );
};

interface IProduct {
  id: string;
  name: string;
  price: number;
  description: string;
}

The list of provided buttons are:

Many of these buttons are already used in the views provided by Refine's Ant Design integration. If you're using the basic view elements provided by Refine, you will have the appropriate buttons placed in your application out of the box.

Views are designed as wrappers around the content of the pages in the application. They are designed to be used within the layouts and provide basic functionalities such as titles based on the resource, breadcrumbs, related actions and authorization checks. Refine's Ant Design integration uses components such as <Card /> and <Space /> to provide these views and provides customization options by passing related props to these components.

The list of provided views are:

import { List, ShowButton, EditButton, useTable } from "@refinedev/antd";
import { Space, Table } from "antd";
import React from "react";

export const ProductList = () => {
  const { tableProps } = useTable();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="Id" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column dataIndex="price" title="Price" />
        <Table.Column
          title="Actions"
          dataIndex="actions"
          render={(_, record: BaseRecord) => (
            <Space>
              <ShowButton hideText size="small" recordItemId={record.id} />
              <EditButton hideText size="small" recordItemId={record.id} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
};

Open Sandbox

Refine's Ant Design also provides field components to render values with appropriate design and format of Ant Design. These components are built on top of respective Ant Design components and also provide logic for formatting of the values. While these components might not always be suitable for your use case, they can be combined or extended to provide the desired functionality.

The list of provided field components are:

pages/products/show.tsx

import { useShow } from "@refinedev/core";
import { Show, TextField, NumberField } from "@refinedev/antd";
import { Typography } from "antd";

export const ProductShow = () => {
  const { queryResult } = useShow<IProduct>();
  const { data, isLoading } = queryResult;
  const record = data?.data;

  return (
    <Show isLoading={isLoading}>
      <Typography.Title level={5}>Id</Typography.Title>
      <TextField value={record?.id} />

      <Typography.Title level={5}>Title</Typography.Title>
      <TextField value={record?.title} />

      <Typography.Title level={5}>Price</Typography.Title>
      <NumberField
        value={record?.price}
        options={{ style: "currency", currency: "USD" }}
      />
    </Show>
  );
};

interface IProduct {
  id: string;
  name: string;
  price: number;
  description: string;
}

Auth pages are designed to be used as the pages of the authentication flow of the application. They offer an out of the box solution for the login, register, forgot password and reset password pages by leveraging the authentication hooks of Refine. Auth page components are built on top of basic Ant Design components such as <Form /> and <Card /> etc.

The list of types of auth pages that are available in the UI integrations are:

<AuthPage type="login" />
<AuthPage type="register" />
<AuthPage type="forgot-password" />
<AuthPage type="reset-password" />

An example usage of the <AuthPage /> component is as follows:

import { AuthPage } from "@refinedev/antd";

export const LoginPage = () => {
    return (
        <AuthPage
            type="login"
            formProps={{
                initialValues: {
                  email: "demo@refine.dev",
                  password: "demodemo",
                },
            }}
        />
    );
};

Open Sandbox

Refine's Ant Design integration also provides an <ErrorComponent /> component that you can use to render a 404 page in your app. While these components does not offer much functionality, they are provided as an easy way to render an error page with a consistent design language.

An example usage of the <ErrorComponent /> component is as follows:

pages/404.tsx

import { ErrorComponent } from "@refinedev/antd";

const NotFoundPage = () => {
  return <ErrorComponent />;
};

Since Refine offers application level components such as layout, sidebar and header and page level components for each action, it is important to have it working with the styling of Ant Design. All components and providers exported from the @refinedev/antd package will use the current theme of Ant Design without any additional configuration.

Additionally, Refine also provides a set of carefully crafted themes for Ant Design which outputs a nice UI with Refine's components with light and dark theme support. These themes are exported as RefineThemes object from the @refinedev/antd package and can be used in <ConfigProvider /> component of Ant Design.

import { ConfigProvider, App } from "antd";
import { RefineThemes } from "@refinedev/antd";

export const ThemeProvider = ({ children }) => (
    // Available themes: Blue, Purple, Magenta, Red, Orange, Yellow, Green
    // Change the line below to change the theme
    <ConfigProvider theme={RefineThemes.Magenta}>
        <App>
            {children}
        </App>
    </ConfigProvider>
);

To learn more about the theme configuration of Ant Design, please refer to the official documentation.

You can automatically generate views for your resources using @refinedev/inferencer. Inferencer exports the AntdListInferencer, AntdShowInferencer, AntdEditInferencer, AntdCreateInferencer components and finally the AntdInferencer component, which combines all in one place.

To learn more about Inferencer, please refer to the Ant Design Inferencer docs.

Next.js Pages Router with version 14 and above gives the following error when using @ant-design package:

Compile errors

Server Error
SyntaxError: Unexpected token 'export'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
/Users/user/Desktop/refine/node_modules/ (ant-design/icons-svg/es/asn/AccountBookFilled.js (3)

You can find issue details from the official Ant Design repository:

Code Example

Installation

Usage

React Router

Code Example

Next.js

Code Example

Remix

Code Example

Tables

Forms

Notifications

TIP

Predefined Components and Views

React Router

Code Example

Next.js

Code Example

Remix

Code Example

Buttons

Views

Code Example

Fields

Auth Pages

Code Example

Error Components

Theming

Code Example

Inferencer

Known Issues

Code Example

Installation​

Usage​

React Router

Code Example

Next.js

Code Example

Remix

Code Example

Tables​

Forms​

Notifications​

TIP

Predefined Components and Views​

Layouts, Menus and Breadcrumbs​

React Router

Code Example

Next.js

Code Example

Remix

Code Example

Buttons​

Views​

Code Example

Fields​

Auth Pages​

Code Example

Error Components​

Theming​

Code Example

Inferencer​

Known Issues​

Installation

Usage

Tables

Forms

Notifications

Predefined Components and Views

Layouts, Menus and Breadcrumbs

Buttons

Views

Fields

Auth Pages

Error Components

Theming

Inferencer

Known Issues