Refine v4 Documentation
I just moved from Refine v3 to Refine v4 but I got confused by the new folder structure and I am searching a Documentation that explains every folder and page so that I can understand where to go to customize the layout of the sider and header, how to perform any customization. Is there this type of documentation?
12 Replies
Hi @ging_freecs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Custom Layout (https://refine.dev/docs/advanced-tutorials/custom-layout) documentation for information on customizing the layout. For customizing the Sider and Header, you can check the SiderRenderFunction (https://refine.dev/docs/advanced-tutorials/custom-layout#siderrenderfunction) and Custom Header (https://refine.dev/docs/advanced-tutorials/multi-tenancy/strapi-v4#shop-select-to-sider-component-part-1) examples.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------Custom Layout | refine
refine supports any layout you want with no restrictions and also provides default layouts with its UI packages. You are free to use them or create your own with the help of refine's hooks and components. You can also use the swizzle command to customize the default layouts and adapt them to your needs.
Strapi-v4 | refine
What is Multitenancy?
<@296624290843983873> kapa.ai is still learning and improving, please let us how it did by reacting below
genetic-orange•17mo ago
Hey @ging_freecs Visit the theme docs.
for antd: https://refine.dev/docs/api-reference/antd/theming/
for material: https://refine.dev/docs/api-reference/mui/theming/
for mantine: https://refine.dev/docs/api-reference/mantine/theming/
for chakra ui:
https://refine.dev/docs/api-reference/chakra-ui/theming/
Theme | refine
Ant Design allows you to customize design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc.
Theme | refine
Theme specifies the color of the components, the darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc. You can either create your own Theme or use Themes that provide from refine. Theme provides a way to your app's design to meet them.
Theme | refine
Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored. You can either create your own theme object or use themes that provide from refine. Theme provides a way to your app's design to meet them.
Theme | refine
The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more. You can either create your own theme object or use theme that provide from refine. You can find more information about theme in Chakra UI documentation.
genetic-orange•17mo ago
If you have a more specific question, please let me know 🚀
ratty-blush•17mo ago
unfortunately when i try to modify the theme for material ui the header doesn't get the changes.
ratty-blush•17mo ago
ratty-blush•17mo ago
@yildirayunlu
genetic-orange•17mo ago
https://refine.dev/docs/api-reference/mui/theming/#create-custom-theme
The demo here is working. You can take a sample.
ratty-blush•17mo ago
Yes I am simply copy-pasting the code
It seems like RefineThemes doesn't work for me. For example if I change the RefineThemes.Blue to RefineThemes.Green
I get no changes
ratty-blush•17mo ago
ratty-blush•17mo ago
@yildirayunlu
Ok, I undestood the issue it was the ThemedLayoutV2 that needed to be wrapped up by ThemeProvider too!