Questions tagged [chakra-ui]
Chakra UI is a simple, modular and accessible component library for React applications.
613
questions
0
votes
0
answers
7
views
ChakraUI Can't Hide Select Icon completely
I have the following component
<Select
style={{ paddingInlineEnd: "0px" }}>
...
</Select>
Setting the iconSize property to 0px seems to successfully affect the ...
0
votes
0
answers
31
views
Does using Chakra UI with Next.js 13 server components expose server-side code logic to the client?
I'm working on a project using Next.js 13 with server components and Chakra UI for styling. My main concern is protecting sensitive server-side code logic from being exposed to the client when using ...
0
votes
0
answers
14
views
Any way to activate auto import of functions when the functions are being typed in VSCode
Was creating a program using ReactJS and ChakraUI.
Each time I input a function such as Heading, Image, VStack etc.
I have to manually scroll to the top of the file and import the function.
But in the ...
-1
votes
0
answers
15
views
Chakra ui Code Blocks not working, has there been an update
Hey I was trying to use the chakra UI <Code> component but for some reason all it does is change the font to mono. Did they have an update breaking this functionality. Even on their website with ...
0
votes
0
answers
8
views
Do we need to install the required dependencies in client as well if we are using Chakra UI in a custom library?
I am creating a custom component library . I have created a LoginBox component in the library using Chakra UI , also i have created a Wrapper which I export from the index.js so that ChakraProvider is ...
0
votes
2
answers
35
views
Use React to implement a page with fixed navbar and collapsible fixed sidebar
I'm trying to implement a page with fixed navbar and collapsible fixed sidebar, using React and chakra-ui component. Below are the example code.
import { Box } from "@chakra-ui/react";
...
0
votes
0
answers
19
views
Content scrolls up when opening sticky navbar overlay menu
I'm working on a sticky nav bar that has an overlaid nav menu opened via a button press. The overlay menu renders beneath the stick navbar.
So far things are working nicely except that when I scroll ...
0
votes
0
answers
8
views
Chakra-UI fetch theme settings from API
At the moment we're building a multitenant NextJS app using Chakra-UI. We want to give our clients the option to customise their theme and identity. We can already store color values, images and other ...
-1
votes
0
answers
19
views
Using Chakra Drawer and React router?
I have a requirement that certain drawers have their own route. This is relatively straightforward except that means the drawer must transition in/out when the route is active/inactive.
The only way I ...
0
votes
0
answers
14
views
remove chakra ui tab background
I use chakra ui tabs but there is problem that when I click on tabs there appears a blinking background color I want to remove background color\
enter image description her
I have used variant="...
0
votes
1
answer
31
views
Chakra Ui Number input is getting cut off
When trying to use the number input field in chakra ui the right end of the text is always cutoff towards the end
<NumberInput width={16} size={'xs'} >
<NumberInputField />
</...
0
votes
1
answer
35
views
How to hide Chakra UI flex box item when it drops to second row without using @media?
I'm using Chakra UI's flex box system.
In the flex box, I have a left item and a right item that I want to keep on the same row.
When the screen size is reduced, the right item drops down to the ...
1
vote
0
answers
14
views
How to center position targeted element in flexbox group [duplicate]
I have a flexbox grouping consisting of two elements. The first is an arrow icon and the other is text. I want the items to be center aligned vertically. However, horizontally, I want the arrow to be ...
0
votes
0
answers
23
views
How to make Chakra Slider perform a method after value change
TL;DR: I want to know how to make Chakra slider call a method after the user moves the handler and releases it. The onChange doesn't get called until the user clicks outside the slider (so the handler ...
0
votes
1
answer
16
views
How to make an avater appear on top and over the edge of a background element in Chakra UI?
In this case, a picture is definitely worth more than a thousand words.
What I want to achieve can best be depicted by the image below.
So have the avatar on top of a colored background, but it ...
0
votes
0
answers
28
views
switch component modal to link component?
I'm new to the world of react, and I have a little problem here that I can't solve. I'm creating some screens and I identified myself with the chakra ui component of react. and I currently have the ...
0
votes
2
answers
42
views
Background Image for Main Section
I'm writing a React web application and I also use Chakra-UI. In general, I have a header, main section and a footer. Like this
https://jsfiddle.net/7cmasxLq/
<div id="header">
...
1
vote
1
answer
58
views
How to filter product based on checkbox with two components sharing state?
I've been scratching my head trying to figure out how to display my subCategory products in my Accordian.jsx component based on this checkbox filter that filters products based on their condition in ...
0
votes
0
answers
28
views
Chakra UI CheckBox Slows down page considerably Virtualization?
When I implemented a checkbox on one of my compents in chakra I noticed that there is a considerable change in the overall page especially with checking and unchecking the checkbox. additionally the ...
0
votes
2
answers
32
views
Hide style props in VScode extention
I am looking for an extension, maybe their is a setting?, that would hide the big style block in my React components. I am using Chakra UI Library and all styles are given using properties so a single ...
0
votes
2
answers
49
views
How do I differentiate style for last element in .map
First off, let me leave the codesandbox for this problem here.
I am mapping through an array of letters.
const letters = ["A", "B", "C", "D", "E", &...
0
votes
0
answers
44
views
React hook form and chakraUI radio button saved previous state
This is multistep questionnaire. Possible same answers. When I go to the next step, the answer which I select before saved and displayed in the next question.
import { useEffect, useState } from "...
0
votes
0
answers
71
views
Styles not showing up with bundles up Chakra UI Components using Rollup (with typescript React and Chakra UI)
I am trying to build a Chakra UI Component Library using Typescript, React and Chakra UI. However after bundling the folder and using npm link to test my library out, none of the CSS styling is ...
0
votes
1
answer
31
views
Multiple forms in one page Formik
Is is possible to have multiple formik forms in one page? I have 2 forms and Submit button is not working for any of them.
I tried refs but i couldnt fix the problem
0
votes
1
answer
299
views
How to use Server Components in Nextjs 13 with Chakra UI
I'm trying to use React Server Component (with NextJS 13) in Chakra UI but I think it's not still possible.
From Chakra UI docs (https://chakra-ui.com/getting-started/nextjs-guide):
In my example I ...
0
votes
1
answer
29
views
Should I just create a Category Schema instead?
I want to create a Drawer Component that lists a Main Category and a Sub Category underneath it. When a user clicks on the sub category link, I want to render a component (Accordian.jsx) that shows a ...
0
votes
1
answer
56
views
React chakra-ui is centering the all layout
I am trying create a react app with chackra-ui but when I add chakra to project its centers all layout. I can't make the width property 100. Chakra is breaking something or my config is wrong.
index....
0
votes
0
answers
30
views
How do I get bolding to work with a Google font (Nunito) and Chakra UI?
I expect when I try to make a Google font bold that it becomes bold. I've tried to do this several ways, including using inline styles.
Here is a code snippet where I define Nunito as the font family ...
-1
votes
1
answer
40
views
ReactJS Performance Best Practice
Let's say I have a user table containing 10 rows, each row will have a modal accepting user id as its props versus only one modal and then access user id via redux for example. Which one is better for ...
1
vote
0
answers
52
views
vite errors when built with components of chakra UI
I am trying to use Chakra UI with ReactJS in a Vite built project.
I have not been able to integrate them together. Whether I use an older or newer version of Chakra
I am the following Vite and Chakra ...
0
votes
0
answers
108
views
Using Chakra UI Select component in react app - it keeps on showing place holder but value is being updated
i have the following code:
<Select
placeholder='Bet Size'
onChange={handleWhichBetSize}
>
<option value={BetSizes.Solana01}>0.1 SOL</option>
<option value={...
0
votes
1
answer
48
views
How not to close Chakra Modal when clicking on overlay background but still interact with background elements
Is it possible to interact with background elements with an open modal? The modal should be always open before I not clicking the Close Button.
export default PhoneNumberInput;
function BasicUsage() {
...
0
votes
0
answers
46
views
Chakra UI gives wrong font
So I'm trying to use the M Plus Rounded 1c font following chakra ui direction https://chakra-ui.com/community/recipes/using-fonts, but the for some reason chakra ui does not change the font. It shows ...
0
votes
1
answer
34
views
After running npm install, first I got an error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-typed@1.2.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.2&...
2
votes
0
answers
61
views
Chakra UI Range Slider Filter Issues
I don't understand why my RangeSlider is acting the way it does.
my price variable is a number.
I have a filters component which has the following RangeSlider from Chakra.
<div className="pt-...
0
votes
1
answer
171
views
Setting "max" on an Input with type "number" in Chakra-UI
While building a user interface with a few inputs, I decided to migrate the base input components to form a single component I can use, while that's not really the problem. Here's the code for it. For ...
1
vote
0
answers
87
views
Chakra-ui heading size by heading level in theme
I'm trying to define the font size for h elements in a Chakra-UI theme, and for some reason, no matter what I do it's not overriding what I'm assuming is the base theme responsive definitions.
This is ...
1
vote
1
answer
98
views
How can I use Chakra UI _after Pseudo-Class to create a dark layer in front of my video? (Hero section)
I'm trying to create this layer effect in front of a video using Next.js and Chakra UI. Example made in Figma:
Code:
function Hero() {
const videoRef = useRef();
useEffect(() => {
...
0
votes
0
answers
16
views
Can't use the '_peerFocus' property in ChakraUI
I am using ChakraUI in a form component.
I have an input and a label that are siblings. I want to change the color of the label when I focus on the input field.
I tried to use the _peerFocus property,...
1
vote
1
answer
31
views
Flip Chakra UI MenuList to top
I want to make the MenuList that I added appear on top of the MenuButton. Is there any way possible to do that?
I tried to use position: absolute; but it didn't do anything to the MenuList.
here are ...
0
votes
1
answer
70
views
Render toastify using a function dynamically
I am dealing with a form taking input and am validating it. I want to show the validation error that a function returns using Toasts. Its quire redundant to go toast({}) and write down the status (...
0
votes
0
answers
18
views
react-i18next switching i18n json file based on theme name isn't working
I’m trying to switch language based on two factors 1. Theme Name(MN, NY, ..) and 2.language (en,es) selected. It. Doesn’t seem to work.
Sample Button.json
{
"generic": "Button Text ...
1
vote
1
answer
44
views
Chakra Editable component does not submit when input blurs
I'm trying to make the data that shows in this card editable, using Chakra's Editable component. According to the docs I should be able to pass the onSubmit prop my handleSubmit function and from ...
0
votes
1
answer
79
views
Reference chakra-ui custom colors in React components & theme
I'm using Chakra-UI for the first time, and extending the base theme. Following their Scaling Out Your Project suggestion, I've broken things out into separate files and then include them, so I have:
/...
-2
votes
1
answer
24
views
What is the smartest way of creating complex custom themed components with Chakra UI?
We want to implement a scalable way of using Chakra UI to create complex custom components with our custom theme styles. But we are finding it difficult to crack which approach would be most scalable.
...
0
votes
0
answers
20
views
Why chakra ui toast is not showing on react-query useQuery success?
I am using react-query. On Successful completion of a query I want a toast to appear with an appropriate message. I am using chakra UI toast.
Here is the code:
import { useToast } from "@chakra-...
2
votes
1
answer
153
views
Setup Chakra UI in Next.js's new app folder
I am trying to use Chakra UI v2.4.9 with my Next.js v13.1.6 following the the Chakra UI step-up guide with Next.js, but it doesn't work.
I am using the src/ folder which contains app/ and pages/. as ...
1
vote
1
answer
110
views
Chakra UI theme not rendering
I have followed the documentation of chakra UI and am trying to style my website. For some reason the config part for the dark/light mode works but the theme part does not work.
I have used create-...
0
votes
1
answer
120
views
How can I modify the scrollbar with ReactJS + Chakra UI?
I'm trying to modify the style of my scrollbar but I can't get it.
I have tried with the parameters: css, __css and sx.
Example:
__css={{
'&::-webkit-scrollbar': {
...
0
votes
0
answers
21
views
How I can implement chakra-ui MenuList component with horizontal orientation?
As usual, MenuList in Chakra-ui works as simple dropdown list and opens from MennuButton down. How I can remake this behavior to open menulist from leftside to rightside? Using aria-orientation="...