UI framework recommendation
Are there any recommendations about UI frameworks for refine? Which one has best support by refine and is most future-proof?
4 Replies
Hi @yacubane. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Refine is a headless framework by default, which means you can build your app without any UI frameworks. However, if you want to use one, refine offers built-in support for the most popular UI frameworks such as Material UI, Ant Design, Mantine, and Chakra UI. Using one of these frameworks can significantly speed up your app's UI development process [^1^].
Refine also provides fantastic support for major UI libraries and frameworks as well as popular backend frameworks and services. To name a few, refine's UI support packages include Ant Design, Material UI, Chakra UI, and Mantine [^5^][^6^].
There are two ways to add UI elements to refine:
1. Using a UI Library such as Tailwind, Chakra UI, etc.
2. Using a complete UI Framework such as Ant Design, Material UI, etc. [^2^]
The recommended way to add UI elements is using the superplate tool. superplate's CLI wizard will let you create and customize your application in seconds [^2^].
As for which UI framework is the most future-proof, it's hard to say definitively as it can depend on the specific needs of your project. However, all the mentioned UI frameworks are popular and widely used, indicating strong community support and ongoing development.
^1^]: [refine.dev/docs/tutorial/introduction/select-framework (https://refine.dev/docs/tutorial/introduction/select-framework/)
^2^]: [refine.dev/blog/best-react-frameworks (https://refine.dev/blog/best-react-frameworks/)
^5^]: [refine.dev/blog/refine-pixels-1 (https://refine.dev/blog/refine-pixels-1/)
^6^]: [refine.dev/blog/refine-react-invoice-generator-1 (https://refine.dev/blog/refine-react-invoice-generator-1/)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@213209558850469889> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-goldOP•16mo ago
I mean, which one from Mantine, MUI, Chakra etc. is the best option for refine. There are some differences, like for example refine does not have wrapper for Mantine date component. Which UI framework works best with refine, or are they all well supported?
national-gold•16mo ago
Hey @yacubane,
refine is UI framework agnostic. You can use any UI framework you want. We created UI framework packages like
@refinedev/antd, @refinedev/mui etc. just help you get started quickly. You can think of them as a starter kit. So there is nothing that refine doesn't support, in fact you can use it any way you want.