Stack Overflow
Stack Overflow

Questions tagged [chakra-ui]

Chakra UI is a simple, modular and accessible component library for React applications.

78 questions
0
votes
0 answers

It is possible to mix chakraUi with tailwind?

can i mix chakra-ui with tailwindcss ? , More specifically can I use some of the components in this library and add tailwind classes to customize them.
okirim
  • 89
  • 1
  • 4
0
votes
0 answers

How to create a center aligned div in a box with a left aligned div, with the center aligned div consuming the entire free space on small screens?

Here's an image that will better explain what I am attempting to create: I'm using Chakra UI with react and here's what I currently have:
MarketBuddy …
JacobiClark
  • 25
  • 4
0
votes
1 answer

JavaScript, React and Chakra-UI link: Replace text when link clicked

I'm writing code that empties box from text and replaces that text with new text when link is clicked. But for now it's only adding text below the old text. This must be done only with JavaScript if possible. I have tried to find information from…
megasupermoon
  • 1
0
votes
2 answers

Object.fromEntries is not a function error when using chakra-ui and next.js

I created a next.js app using Vercel and then installed chakra-ui using the following command line: npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 It resulted in the following error: TypeError: Object.fromEntries is…
Vaibhav Verma
  • 157
  • 1
  • 6
0
votes
1 answer

How to fill the remaining space in a Stack Chakra-UI?

Is there a way i can make this work? Since flex={1} doesn't do the job? Or else are there better ways to achieve the same ?
Yashwanth Remidi
  • 131
  • 3
  • 10
0
votes
1 answer

Deploing React site with ChackraUI on Vercel and modal window stopped showing

I have a page with a modal window. In development mode, it opens. But when I upload my React App to vercel, then the screen just darkens there, and the modal window does not appear, but all the window controls work. Who faced the same problem? const…
tot_dlinnyy
  • 1
  • 1
0
votes
1 answer

Custom chakra theme is slow on load

In our project, we have AngularJS at the core and we are transitioning to React. On the React side, we are using Chakra UI with a customized theme. When loading React component we are wrapping the component with ChakraProvider with a custom theme,…
Shurik Agulyansky
  • 2,162
  • 2
  • 21
  • 54
0
votes
1 answer

useColorMode not working for Chakra UI Footer Component

The ColorMode hook has been working for all my code so far when it comes to customizing my compoenents for Chakra UI's dark and light modes. However, when I tried to do the same with my footer, it does not work and I do not know why. Here is my…
Siddu Palaparthi
  • 1
  • 1
0
votes
1 answer

Adding underline to current page section in single page react app with Chakra.ui

I am building a single page react website using Chakra.ui component library. However, I do have different page sections that you can jump to from the header. I need it so that when you are on a certain page section, that section is underlined in the…
Siddu Palaparthi
  • 1
  • 1
0
votes
1 answer

How to apply css to components in Next JS

I have an app in next js that is also using chakra UI. I am attempting to add a footer to the app, but am unable to force the components under the navbar to take up the remaining height of the screen. I think my issue is that I am not correctly…
Rob Jarvis
  • 346
  • 4
  • 12
0
votes
0 answers

How to make Chakra's component inline?

I can't figure our how to make the Chakra component inline. Read the documentation but couldn't figure out the right property or if this is a css class thing. Hello World, place me next to the Text above!
uber
  • 1,341
  • 1
  • 9
  • 25
0
votes
0 answers

Chakra-UI Rendering Tabs Based On LocalStorage Setting

I can't seem to get the tab to render as active if a condition is met based on localStorage settings. Here is what I have:
Jon
  • 361
  • 2
  • 10
0
votes
1 answer

Framer Motion different Animations for different propoerties

I am trying to animate an animation in framer motion using Chakra-ui and Gatsby whereby there is rotation and movement and opacity change. At the moment the animation works as I intend on the movement on the x axis and rotation using type:spring…
Nick Wild
  • 395
  • 1
  • 6
  • 18
0
votes
1 answer

Formik + Chakra UI input Number don't work

When I use Formik with Chakra input element the code don't work. If I use a normal input, the value of formik works fine, but when I use number input and set the initial values in Formik the number frozen. I try set in initial values a string, a…
Nicolas Couto
  • 11
  • 3
0
votes
1 answer

Prevent Menu From Closing When User Clicks the Input

Is there a way to make it so that the doesn't close on click? Currently, if I click inside the input, the menu just closes. I have the same setup as the original poster. I've tried playing around with closeOnSelect="false" and that didn't…
Jon
  • 361
  • 2
  • 10
1 2
3
4 5 6