Skip to main content
764 questions
Newest Active Bountied Unanswered
Filter by
Sorted by
Tagged with
0 votes
0 answers
59 views

The Chakra UI docs, https://chakra-ui.com/docs/styling/dark-mode, state the following: To force dark mode, set the dark className on any parent element, or the root element of your application. <...
Paul's user avatar
  • 1
0 votes
0 answers
61 views

I’m trying to optimize bundle size by importing only the Chakra UI components I use (Box, Card, Flex, Icon, Heading, SimpleGrid, GridItem, Stack, VStack, HStack, Text, Button, Link, Container) and ...
Melikaly's user avatar
  • 19
0 votes
1 answer
99 views

I am using this approach <Box bgImage="gradients.gradientBluePurple_toR_600" w="64" h="64" /> Here’s my current theme setup: // src/theme/foundations/theme.ts ...
Melikaly's user avatar
  • 19
3 votes
1 answer
66 views

My apologies if this question has been asked, but I can't find the issue I'm having. I'm using React Vite and Chakra-UI. Everything works fine, until I use Card. This works fine (Item and Flex also ...
Sahdia's user avatar
  • 33
2 votes
0 answers
37 views

I'm using Chakra UI v3's PinInput component and need to eliminate the gaps between individual input fields. I've tried several approaches but none seem to work: What I've tried: gap={0} sx={{ '...
BlueMilkyh's user avatar
  • 91
0 votes
0 answers
24 views

The problem I am running into is that the local typecheck is OK, but the Vercel deployment typecheck is failing: "@chakra-ui/react": "^3.25.0", "@emotion/react": "^...
Phil Lucks's user avatar
  • 4,162
0 votes
0 answers
70 views

I am facing a strange situation with ChakraUI components. I am trying to use ChakraUI's NumberInput component and Select component. Scenario 1: If the NumberInput component is written before the ...
Sumit's user avatar
  • 97
0 votes
1 answer
67 views

I am newbie in react/chakra ui. I need to do some basic stuff: change background color of switch component (thumb part? when is checked). Was trying to do it in several ways, but none is working. ...
buks's user avatar
  • 435
1 vote
1 answer
56 views

I’m using Chakra UI’s List and ListItem components to render a simple bulleted list: import { List, ListItem } from "@chakra-ui/react"; function MyList() { return ( <List gap={3}>...
sakshya73's user avatar
  • 7,461
0 votes
0 answers
22 views

I am looking to set up custom themes for different customers in the same app. I am using extendTheme for the base theme at the moment, but the recommended usage is to create its own file where that ...
Merlin -they-them-'s user avatar
  • 3,006
2 votes
4 answers
441 views

So the prop value={defaultSystem} in the ChakraProvider it overwrite the styles from the TailwindCSS classes even in normal tags not a Chakra component. Example** <ChakraProvider value={...
ok i's user avatar
  • 149
0 votes
0 answers
81 views

i am trying to compose my own chakra 3 ui slot recipe based on the reference slot recipe provided by chakra. Currently i am trying to achieve the behavior whereby the indicator aka the down chervon ...
tytx t's user avatar
  • 1
1 vote
1 answer
119 views

So the main problem is that Chakra UI v3 tooltip component is not displayed near the wraped box, but in the upper left corner of the entire page. More likely problem is in positioning, but I can't ...
David Abramov's user avatar
  • 59
1 vote
0 answers
83 views

I'm currently developing a Chrome extension built with React 19, TypeScript, Vite 6.2, and Chakra UI 3.9.0. The extension UI is injected directly into web pages using a content script, not a popup. To ...
Dustin Lee's user avatar
  • 494
-1 votes
1 answer
261 views

According to the documentation for Chakra UI Toast We are supposed to be able to control the default location toasts appear using the following snippet const toaster = createToaster({ placement: &...
Matt's user avatar
  • 47.1k
0 votes
0 answers
51 views

I'm working on a monorepo using Nx with Chakra UI. I’ve set up a shared library to hold my custom theme, and I’m importing it into my apps and component libraries. Here’s the setup: I have a shared ...
Siby Mathew's user avatar
  • 1
0 votes
0 answers
136 views

I am following this tutorial: Build and Deploy an Instagram Clone with React and Firebase – Tutorial. package.json: { "name": "insta-clone", "private": true, "...
Mahesh's user avatar
  • 1,119
0 votes
2 answers
131 views

I am working through a React tutorial and this section is heaving with Chakra UI. The tutorial is based in a v2 version of Chakra and I just installed the latest and adjusted according based on the ...
Matt's user avatar
  • 47.1k
1 vote
1 answer
265 views

I just created a new React project using Vite and installed the latest version of Chakra UI (@chakra-ui/[email protected]). I previously used Chakra UI in older projects where the colorScheme prop was ...
davinceleecode's user avatar
  • 827
-1 votes
1 answer
75 views

I want to create a simple opacity gradient on an image. I'm using Next.JS with Chakra UI and Tailwind CSS for the front-end design, and I cannot find a way to do it. This is a result that I did on ...
Gormec's user avatar
  • 9
0 votes
1 answer
267 views

I created my empty react app with Vite v.6 and install Chakra UI. But after starting the application, I see an error: "Internal server error: Failed to resolve import "@chakra-ui/react"...
Nimble Stalker's user avatar
  • 385
0 votes
0 answers
138 views

I'm using Next.js 15 with Chakra UI v3 and running the app with the --turbopack. However, the Chakra UI styles don't seem to be applied correctly. For example, in the code below I'm using Chakra UI's ...
Kenny's user avatar
  • 1
0 votes
0 answers
68 views

Had this issue for a while where I can build to completion but initialisation leads to the following error: react-BqWMAaNf.js:1228 Uncaught TypeError: extendStatics is not a function at __extends ...
Ashleigh Dawson's user avatar
  • 1
2 votes
2 answers
549 views

I'm trying to change the focus outline color and set custom fonts using a custom Chakra UI theme in my React app, but neither the focus outline color nor the fonts are being applied as expected. ...
Stefano Fiore's user avatar
  • 53
1 vote
0 answers
52 views

I have an input that shows search results below it. When it's searching, I show a loading indicator inside the Input component. however, when I type many letters, as the search updates, the input ...
Phil Lucks's user avatar
  • 4,162
0 votes
0 answers
46 views

I have implemented Chakra-UI toast successfully. I have noticed everytime my toast notification is active, text is displayed on the component 'toast: {count}'. This is in my dev environment. Is this ...
Josh Kilov's user avatar
  • 1
1 vote
2 answers
911 views

I am facing an issue while trying to use Chakra UI in my React application. The following error occurs when I attempt to run the app. I am using the latest version of React and Chakra UI. The error ...
Anna Pons's user avatar
  • 67
1 vote
3 answers
769 views

I am following this tutorial - https://www.youtube.com/watch?v=O3BUHwfHf84 (MERN Stack Tutorial with Deployment - Beginners Course). @59.15 we are up to developing the front end using Chakra, Vite and ...
user23416362's user avatar
  • 11
1 vote
1 answer
175 views

I have a pretty fresh Nx/Next install with CI set up with GitHub Actions. I added a simple page to set up testing with Cypress and Jest, and the nx build succeeded as I'd suspect after pushing to ...
Derek's user avatar
  • 955
2 votes
2 answers
1k views

I've been migrating my projects from Chakra UI v2 to v3, following the Migration to v3 guide, but I'm unsure how to handle certain components that don't seem to have a direct equivalent in v3. For ...
Guillaume G's user avatar
  • 23
0 votes
1 answer
92 views

I'm using Chakra v3.7.0 There are variables missing, for example: zIndex, borderWidths etc. Even I tried to define the tokens. It doesn't work. export const tokens = defineTokens({ borderWidths: { ...
Tuhin's user avatar
  • 3,393
0 votes
1 answer
1k views

I'm using Chakra UI v3 + React for my UI and want to customize the background colors for both dark and light modes. I explored the Chakra UI docs and found information on tokens, semantic tokens, and ...
Sina Rahimi's user avatar
  • 283
0 votes
2 answers
214 views

I am trying to update the theme, with some custom colors for components. IE: I want my default buttons to be a specific shade of blue. So i followed the docs and added semantic tokens such as: ...
Phil Lucks's user avatar
  • 4,162
-1 votes
1 answer
202 views

everyone! I'd like to add powerful Tab on my Next.js app using Chakra UI. when I click main category, sub catergory will be show, animation is to right in and left out smoothly. content will be also ...
Shiba Y.'s user avatar
  • 89
0 votes
2 answers
804 views

My goal is to get this code (or some variation of it) to work in the latest version of Chakra UI. The app.tsx react file below runs but gives me a forwardRef() warning import { HStack, Icon } from &...
vpappano's user avatar
  • 121
0 votes
1 answer
66 views

I am trying to create a similar design to this image in HTML/CSS: The main focus here are the angled images. My goal is to have a row of images that are divided by a separator that can be straight or ...
MyPing0's user avatar
  • 63
0 votes
1 answer
572 views

Started using Chakra v3 and can't figure out why my fonts aren't applying to the app, colors are working fine. What is best approach using fonts from files at public folder with chakra v3? export ...
David Abramov's user avatar
  • 59
0 votes
0 answers
44 views

I have a chakraUI project which is using chakra2, and I want to use MUI icons. I don't need MUI for anything except the icons When I add an icon to the page I get the following errors: I have ...
undefined's user avatar
  • 34.4k
0 votes
0 answers
15 views

I've set colorPalette at the root of my project: createRoot(document.getElementById("root")!).render( <StrictMode> <Provider> <Theme colorPalette="...
Ashkan Arabi's user avatar
  • 129
1 vote
0 answers
83 views

I encountered an issue while trying to run pnpm run build (which is equivalent to next build) to create a production build. The Select component is installed by chakra v3 snippet. The error is shown ...
Truong Hoang's user avatar
  • 332
0 votes
0 answers
101 views

I want to download a Chakra UI component with @react-pdf/renderer Copying some code from react-pdf's documentation, I have this: import "./App.css"; import Header from "./components/...
Aaron's user avatar
  • 55
0 votes
0 answers
19 views

1.the login.js: Open the pop-up window and set the content according to the submitted response result. useEffect(() => { if (response) { onOpen(response.type, response.message); if(...
ka Fi's user avatar
  • 1
0 votes
0 answers
215 views

I am learning to use Nextjs with Chakra UI in building website. However, when I am about to finish, there is this error: I assume is has something to do with the dark mode? I have been modifying the ...
ciumai's user avatar
  • 21
0 votes
2 answers
144 views

I have been able create the above part but I want to create the as shown in the bottom part of the image highlighted by the red circle. I have to use Chakra UI 2.10.4 in React my code: <Box bg={...
XORPORTUGAL's user avatar
  • 23
1 vote
1 answer
89 views

So this is the task I am trying to complete, as you can see in the image there is a white dot next to words "Perspective" beforeAfter On hover it splits into halve diagonally. It has been ...
XORPORTUGAL's user avatar
  • 23
0 votes
0 answers
51 views

I have a navbar which has a button to open modal, which is a component. I added the chakra-ui code as seen in docs and after that the whole screen disappears when i remove the code the app appears ...
Kamo's user avatar
  • 1
0 votes
1 answer
247 views

In Chakra UI version 2, I have the following Tabs component whose content overflows instead of being scrollable: function App() { return ( <ChakraProvider> <Box width={300}...
goofy4224's user avatar
  • 330
4 votes
5 answers
4k views

I am following this tutorial: Build and Deploy an Instagram Clone with React and Firebase – Tutorial Which uses the package.json: { "name": "vite-project", "private": ...
Mahesh's user avatar
  • 1,119
0 votes
2 answers
53 views

I’m trying to fetch city data using the OpenCage API and display the results in a list using React and Chakra UI. However, I'm getting the following error: Error: Element type is invalid: expected a ...
beobble's user avatar
  • 1
0 votes
1 answer
61 views

import { Grid, GridItem, Show } from "@chakra-ui/react" function App() { return <Grid templateAreas={ { base: `"nav" "main"`, md: `"nav nav&...
Max's user avatar
  • 1

1
2 3 4 5
…
16