Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Get Chakra UI working with Remix Run

See original GitHub issue

Description

Incompatible with remix-run

Link to Reproduction

https://codesandbox.io/s/autumn-dream-se227

Steps to reproduce

Click on ‘button’
Color mode value doesn’t change with useColorMode and useDisclosure doesn’t work with Slide component.
Initial color mode doesn’t load correctly too

Chakra UI Version

1.7.2

Browser

FireFox Nightly 96.0a1（2021-11-26）

Operating System

macOS
Windows
Linux

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:33 (18 by maintainers)

Top GitHub Comments

11reactions

primos63commented, Jan 1, 2022

@JClackett You can get the sample I created from my Github

7reactions

macjabethcommented, Dec 4, 2021

Having an official way to integrate Chakra UI w/ Remix would be nice!

I wanted to add that I’ve been getting issues when navigating to routes that aren’t defined. I add the provider in the Document component which is shared between the App and CatchBoundary. Despite it being in both places, all styling is removed when it hits the CatchBoundary.

I’ve tried adding the provider to the server.entry file and using the provided solution @primos63 added above. Neither seems to fix the issue.

Top Results From Across the Web

Remix - Chakra UI

A guide for installing Chakra UI with Remix projects. ... Inside your Remix project root directory, install Chakra UI by running either of...

Discover - Remix Guide

The Remix Stack with Clerk authentication, Supabase database, Chakra UI, testing, linting, and more. Made by clerkinc. package / www.

Moving from Next to Remix - OpenReplay Blog

Once Chakra UI was set up and running, we could start with the fun stuff of porting existing Next.js-based code over to Remix....

Using a custom font with Remix Run and Chakra UI

The documentation that Chakra has regarding fonts did not work for me. So if it doesn't work for you, here's how to do...

Remix - Saas UI

Inside your Remix project root directory, install Saas UI by running either of the following: npm i @saas-ui/react @chakra-ui/react @emotion/react@^11 ...