Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.
What is refine?
refine is a React-based framework for the rapid ✨ development of web applications.
It eliminates repetitive tasks demanded by CRUD operations and provides industry standard solutions for critical parts like authentication, access control, routing, networking, state management, and i18n.
refine is headless by design, thereby offering unlimited styling and customization options.
What do you mean by "headless" ?
Instead of being a limited set of pre-styled components, refine is a collection of helper hooks, components, and providers. They are all decoupled from UI components and business logic, so that they never keep you from customizing your UI or coding your own flow.
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.
Use cases
refine 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.
You can take a look at some live examples that can be built using refine from scratch:
The fastest way to get started with refine is by using the create refine-app project starter tool.
Run the following command to create a new refine project configured with Ant Design System as the default UI framework:
Let's consume a public fake REST API and add two resources (posts, categories) to our project. Replace the contents of src/App.tsx with the following code:
🚀 Thanks to refine Inferencer package, it guesses the configuration to use for the list, show, create, and edit pages based on the data fetched from the API and generates the pages automatically.
Now, you should see the output as a table populated with post & category data:
You can get the auto-generated pages codes by clicking the Show Code button on each page. Afterward, simply pass the pages to the resources array by replacing with the Inferencer components.
Next Steps
👉 Jump to Tutorial to continue your work and turn the example into a full-blown CRUD application.
Ant Design UI support for Refine, offering enterprise-level UI components.
The npm package @refinedev/antd receives a total of 11,433 weekly downloads. As such, @refinedev/antd popularity was classified as popular.
We found that @refinedev/antd demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 0 open source maintainers collaborating on the project.
Package last updated on 30 Mar 2023
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.