Questions tagged [chakra-ui]

Is it feasible to modify the transition of Chakra's Menu component List element using custom CSS or Chakra's built-in transitions? See more information at here ...

I am currently developing my own customized "wrapper" for a Chakra UI component. This wrapper allows me to include additional props, methods, and any other functionalities that I may require in the future. However, one drawback of this approach is that I ...

I have been attempting to customize the font size for h elements within a Chakra-UI theme, but I am facing challenges in overriding the default responsive definitions set by the base theme. In my NextJS project, where I fetch content from DatoCMS headless ...

Currently, I am utilizing NextLink in my project to generate links. However, it appears that using NextLink is causing the following error: Hydration failed because the initial UI does not match what was rendered on the server. Upon inspecting the console ...

Our team is currently working on a project to create a clone of flipkart.com. We have divided the tasks among team members, with one individual focusing on the landing page using material UI and myself working on the product page with chakra UI. However, a ...

For my current project, I am utilizing react-beautiful-dnd, Chakra UI, and Next.js. If you're interested in seeing the issue in action, check out this video: . Despite attempting various methods like ondragupdate, ondragstart, and ondragend for reordering, ...

I am trying to design a uniquely shaped button that sits on top of an image, but I am encountering some challenges with the scaling of the button mask. Both the image and masks were created at the same base dimensions for easy alignment at 0,0. Here is a ...

<> <Button onClick={onOpen}>Trigger modal</Button> <Modal onClose={onClose} isOpen={isOpen} isCentered> <ModalOverlay /> <ModalContent> <ModalHeader>Modal Title</ModalHeader> <Moda ...

Currently, I am working on a user creation form for my Next.js front end project using TypeScript. The main goal is to allow an administrator to create new users by filling out a simple form which will generate a basic user object. Here is the structure of ...

Struggling to remove the underline from all links globally in my NextJS project has been quite a challenge. I've attempted various methods, including CSS (by importing the globals.css file into _app.tsx) and through ChakraUI. The only solution that seems ...

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

Currently, I'm in the process of developing my own web-based version of a painting software similar to MS Paint using React. The initial javascript canvas code has been completed, and now I am focusing on creating an aesthetically pleasing GUI that include ...

I have a basic understanding of coding, so please consider that. I am working on incorporating a NavBar component into my Next.js app. Initially, I followed a tutorial on building a blog site with Next.js. Despite encountering several errors while adding t ...

They say a picture is worth more than a thousand words, and in this case, it holds true. The best way to illustrate what I'm trying to accomplish is through the image linked below. https://i.stack.imgur.com/5WvkV.png I envision having the avatar positio ...

Having trouble submitting a form with a dropdown list. Formik doesn't seem to recognize the values from the options for some reason, and I'm not sure how to resolve this issue. const [value, setValue] = React.useState(""); const handleChange = (e ...

Currently in the process of developing a website using Next.js and Chakra-ui. I'm facing some issues with aligning the ButtonGroup to the end of the container. Despite trying to use justifyContent="space-between", it doesn't seem to be working as ...

Upon refreshing the page in my Next.js 13 /app folder application using Chakra UI, I notice a few things: A momentary white flash appears before switching to the dark theme. The internationalization and font settings momentarily revert to default before l ...

In this section, I will provide details about my current project. Tech Stack: NextJs (version below 13), ChakraUI (Utilizing predefined components, mainly Flex) The concept is as follows: After testing different screen sizes and determining when UI eleme ...

I am currently working on a project that involves Next.js, TypeScript, and Chakra UI. While configuring Button themes in the button.ts file, I encountered an error related to the baseStyle object for properties like borderRadius, color, and border: Type ' ...

Encountering an issue with Chakra UI modal dialog in Next.js. Attempting to utilize the code below in pages/index.tsx for displaying a modal dialog. import type { NextPage } from "next"; import { Modal, ModalOverlay, ModalContent, Moda ...

Currently, I am utilizing Chakra UI to design a menu and here is what I have so far: <Menu> <MenuButton>hover over this</MenuButton> <MenuList> <Flex>To show/hide this</Flex> </MenuList> </ ...

Encountering an issue with the combination of forwardRef and Input from ChakraUI. Attempting to create a generic input component with a flushed variant, but facing difficulty as Chakra keeps resetting it back to default. ModalInput Component import { for ...

I'm stumped on this one... Maybe there's something simple I'm overlooking, but I'm hoping for some help from you guys. When viewed on mobile devices, the entire HTML element takes up around 80% of the screen width. Oddly enough, resiz ...

Currently, I am working on developing a side menu with accordion functionality in Nextjs. I have managed to get the index values from 0 to 1 based on the page URL, but I am facing an issue where the accordion is not opening as expected. Each time a user ...

I am currently working on a component that includes the following code: import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, Button, } from "@chakra-ui/react"; import { ReactNode } from "react"; import { Co ...

Currently, I am trying to set up Chakra UI (latest version V1) with a basic Next.js application. After following the instructions in the 'getting started' guide on , I encountered an error while running the development server: Error - ./node_modu ...

I created a custom Component that can be re-rendered as another component using the BoxProps: export function Label ({ children, ...boxProps }: BoxProps) { return ( <Box {...boxProps}> {children} </Box> ); } It functio ...