This is a source code for example app built in refine Ant Design tutorial.
The tutorial section will take you through the steps involved in creating an app from scratch using refine Ant Design.
You can use the source code as a starting point for your own custom apps. We hope that these examples and tutorials will be a great resource for you.
refine is a React-based framework for the rapid development of CRUD web applications. It shines✨ on data-intensive applications like admin panels, dashboards and internal tools. Thanks to the built-in SSR support, refine can also power customer-facing applications like storefronts.
It's headless by design, thereby offering unlimited styling and customization options.
refine seamlessly works with any custom design or UI framework that you favor. For convenience, it ships with ready-made integrations for Ant Design System, Material UI, Mantine, and Chakra UI.
We will show how you can use the CLI to bootstrap the same refine example app with Ant Design and React. You can also use Material UI, Chakra UI and Mantine as well.
npm create refine-app@latest my-antd-project
Select the following options to complete CLI wizard:
? Select your project type:
❯ refine-react
? Do you want to use a UI Framework?:
❯ Ant Design
? Do you want a customized theme?:
❯ Default theme
? Router Provider:
❯ React Router v6
? Data Provider:
❯ REST API
? Auth Provider:
❯ None
? Do you want to add example pages?
❯ Yes
? Do you want a customized layout?
❯ No
🚦Info: We only show important options for this example. You can prefer to select other options like Kbar and i18n. Different options selections may be result in a different project structure.
Once the setup is complete, navigate to the project folder and start your project with:
npm run dev
You can now view refine application at http://localhost:3000.
You can also react the same app on Stackblitz ➡️
Join our community to get help, share ideas and connect with other developers.
