extended-salmon•4mo ago

Is it possible to create a NextJS project with ChakraUI ?

I want to create a NextJS refine panel using ChakraUI, is this possible? Because I can only find the Vite project for ChakraUI and the presented UI Frameworks are Ant, Material and Headless when creating a new project

5 Replies

kapa.ai•4mo ago

Hi @Max V. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to create a Next.js project with Chakra UI using Refine. Refine provides an app scaffolding tool that allows you to choose the platform you want to use (Vite, Next.js, or Remix), the UI library of your choice (Ant Design, Material UI, Chakra UI, Mantine, or none), and other options like data provider and authentication provider source (https://refine.dev/docs/guides-concepts/development). To create a new project, you can use the command-line interface by running the following command in your terminal:

npm create refine-app@latest -- my-refine-app

npm create refine-app@latest -- my-refine-app

After running the command, you will be prompted to select the options you want to use for your project. Here, you can select Next.js as your platform and Chakra UI as your UI library. If you prefer a visual interface, you can use the browser-based scaffolding tool by visiting refine.dev (https://refine.dev/?playground=true) and selecting the options you want to use for your project. After you are done with the options, you can click on the Create Project button to download your project. Once the project is created, you can install the necessary dependencies using npm install and start the development server using npm run dev source (https://refine.dev/blog/next-ui-react-admin-panel#how-to-create-a-refine-application). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@224923706701512705> kapa.ai is still learning and improving, please let us know how it did by reacting below

extended-salmon•4mo ago

@kapa.ai didn't work i dont have the chakra ui option

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. As of the current version of Refine, the Chakra UI option is not available directly from the create-refine-app command. However, you can manually integrate Chakra UI into your Refine project. Here are the steps to integrate Chakra UI with Refine: 1. First, create a new Refine project with Next.js:

npm create refine-app@latest -- my-refine-app

npm create refine-app@latest -- my-refine-app

2. Then, navigate to your project directory:

cd my-refine-app

cd my-refine-app

3. Install the necessary packages for Chakra UI:

npm install @refinedev/chakra-ui @chakra-ui/react @refinedev/react-table @refinedev/react-hook-form @tanstack/react-table react-hook-form @tabler/icons-react

npm install @refinedev/chakra-ui @chakra-ui/react @refinedev/react-table @refinedev/react-hook-form @tanstack/react-table react-hook-form @tabler/icons-react

4. Wrap your app with the <ChakraProvider /> to make sure you have the theme available for your app. Then use the layout components to wrap them around your routes. Here is an example:

import { Refine, Authenticated } from "@refinedev/core";
import {
    ErrorComponent,
    ThemedLayoutV2,
    RefineThemes,
    notificationProvider,
    AuthPage
} from "@refinedev/chakra-ui";
import { ChakraProvider } from "@chakra-ui/react";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, {
    NavigateToResource,
} from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet, Navigate } from "react-router-dom";

import authProvider from "./auth-provider";

import { ProductList, ProductCreate, ProductEdit, ProductShow } from "./pages/products";

import { Refine, Authenticated } from "@refinedev/core";
import {
    ErrorComponent,
    ThemedLayoutV2,
    RefineThemes,
    notificationProvider,
    AuthPage
} from "@refinedev/chakra-ui";
import { ChakraProvider } from "@chakra-ui/react";
import dataProvider from "@refinedev/simple-rest";
import routerProvider, {
    NavigateToResource,
} from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet, Navigate } from "react-router-dom";

import authProvider from "./auth-provider";

import { ProductList, ProductCreate, ProductEdit, ProductShow } from "./pages/products";

You can refer to the Refine Chakra UI documentation (https://refine.dev/docs/ui-integrations/chakra-ui/introduction/) for more details on how to use Refine's Chakra UI integration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@224923706701512705> kapa.ai is still learning and improving, please let us know how it did by reacting below