How to use multiple UI libs at one next js project?

Is it possible to use chakra ui and antd in the same project? If yes how? to configure it

2 Replies

Hi @internal_server_error_enjoyer. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- While it is technically possible to use multiple UI libraries like Chakra UI and Ant Design in the same Next.js project with Refine, it's generally not recommended due to potential conflicts and increased bundle size. Refine is designed to work with one UI framework at a time for optimal performance and consistency. However, if you still want to proceed, here's a general approach you could take: 1. Install both UI libraries and their Refine integrations:

npm install @refinedev/chakra-ui @chakra-ui/react @refinedev/antd antd

npm install @refinedev/chakra-ui @chakra-ui/react @refinedev/antd antd

2. In your _app.tsx file, you'll need to wrap your application with both providers. For example:

import { ChakraProvider } from "@chakra-ui/react";
import { ConfigProvider } from "antd";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <ConfigProvider>
        {/* Your Refine setup here */}
      </ConfigProvider>
    </ChakraProvider>
  );
}

import { ChakraProvider } from "@chakra-ui/react";
import { ConfigProvider } from "antd";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <ConfigProvider>
        {/* Your Refine setup here */}
      </ConfigProvider>
    </ChakraProvider>
  );
}

3. When using components, import them from their respective libraries:

import { Button as ChakraButton } from "@chakra-ui/react";
import { Button as AntButton } from "antd";

import { Button as ChakraButton } from "@chakra-ui/react";
import { Button as AntButton } from "antd";

Keep in mind that this approach may lead to: - Increased bundle size - Potential styling conflicts - Inconsistent user interface For the best experience with Refine, it's recommended to choose one UI library and stick with it throughout your project. Refine offers integrations for multiple UI libraries, allowing you to select the one that best fits your needs UI Libraries (https://refine.dev/docs/guides-concepts/ui-libraries/). If you need components from different libraries, consider using Refine's headless mode and implementing custom components as needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@492429659154415657> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How to use multiple UI libs at one next js project?

Did you find this page helpful?