Chakra UI is a simple, modular and accessible component library for React applications.
Questions tagged [chakra-ui]
701 questions
22
votes
3 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
- 937
- 1
- 8
- 25
16
votes
5 answers
Chakra UI using multiple models in a single component
I am using Chakra UI and I want to use two modals in a single component.
const { isOpen , onOpen, onClose } = useDisclosure()
Pasan Madhushan
- 205
- 1
- 4
- 10
14
votes
4 answers
How to add ::-webkit-scrollbar pseudo element in Chakra UI element? (React)
I'm working with Chakra UI and i needed to customize the scrollbar style using the css pseudo element ::-webkit-scrollbar, but Chakra UI doesn't seen to have this pseudo element and a I don't know where I can style this specific component without…
Gabriel Mochi
- 509
- 1
- 4
- 10
13
votes
1 answer
It is possible to use Tailwind CSS to style Chakra UI components?
It is possible to use Tailwind CSS to style Chakra UI components?
kadiro
- 956
- 1
- 10
- 16
12
votes
3 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
- 4,163
- 5
- 26
- 55
12
votes
3 answers
changing the dark mode color in chakra ui
I am using the "dark mode" feature provided by the Chakra UI library. However, I can't figure out how to change the "dark mode" colors. In the documentation, I see that Chakra UI is based on something called "styled-system", so I tried to pass a new…
scripter
- 1,211
- 2
- 11
- 21
11
votes
1 answer
How can i make chakra ui components use next/image to optimize the photos automatically?
in this snippet i use the Avatar component but the image is not optimized in the site like next/image does automatically
code snippet
const ee = (props: any) => {
const { colorMode, toggleColorMode } = useColorMode();
return (
Moystafa Aliogloy
- 111
- 1
- 3
10
votes
2 answers
Unable to use two modals on same page using useDisclosure() in ChakraUI
There is a custom hook useDisclosure() provided by chakraUI which returns isOpen, onClose , onOpen.
const { isOpen, onOpen, onClose } = useDisclosure()
The onOpen is passed to the onClick of the button which is triggered to open the modal.
Ibad Shaikh
- 2,704
- 3
- 15
- 27
9
votes
2 answers
Chakra UI colorScheme prop on button
i extended the theme provider in chakra_ui
import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import App from "./App";
const theme = extendTheme({
colors: {
brand: {
…
AbdulAzeez Olanrewaju
- 976
- 1
- 13
- 32
8
votes
1 answer
How can I make my sticky navbar stay at the front in Chakra-UI
I am using Chakra-UI to create a UI for my NextJS project, and am struggling to get the navbar working correctly. It is fixed correctly as well as the mobile nav menu but the menu sits in front of the background div, but behind the hero div (with…
HubertBlu
- 747
- 1
- 7
- 20
7
votes
0 answers
input field focus issue with chakra-ui
I'm building a simple form in chakra-ui with a controlled field. Whenever the user types in an input after a single keystroke focus moves to the next field.
I think there's a bug with react re-rendering the page, and the focus being "off by one" but…
dcsan
- 11,333
- 15
- 77
- 118
7
votes
6 answers
how to make custom sized modal in chakra UI
i want to create custom sized modals in chakra UI in react js.
the modal should have width 1000px and height 800px
I have tried to create a custom sized modal by using themes where I have overriden the xl size of modal but it doesn't work
const…
Ruchi Ray
- 157
- 1
- 2
- 10
7
votes
2 answers
How can I not pass children as props. Instead, nest children between the opening and closing tags on React?
error says : Do not pass children as props. Instead, nest children between the opening and closing tags when i add this part "children={}"
i'm not familiar with react and chakra so can somebody help solving this prolem ?
UNFVMILIVR
- 73
- 1
- 1
- 6
7
votes
2 answers
Next Js Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
Full Error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have…
Sean
- 1,368
- 2
- 9
- 21
7
votes
0 answers
Next.JS app (with Chakra UI) not full width on mobile devices
This one is giving me a headache..
Perhaps I'm just missing something silly, hope you guys can help.
The whole html element has a width of approximately 80% of the screen on mobile devices.
On a laptop, reducing the screen size does not replicate…
sniv
- 101
- 1
- 4