Using Chakra in Remix
A guide for installing Chakra UI with Remix projects
Templates
Use the remix template below to get started quickly.
Installation
Install dependencies
npm i @chakra-ui/react@next @emotion/react
Add snippets
Snippets are pre-built components that you can use to build your UI faster.
Using the @chakra-ui/cli
you can add snippets to your project.
npx @chakra-ui/cli@next snippet add
Setup emotion cache
Using snippets from the Remix sandbox, you can add the emotion cache to your application.
Setup root
Wrap your application with the Provider
component at the root of your
application.
This provider composes the following:
ChakraProvider
from@chakra-ui/react
for the styling systemThemeProvider
fromnext-themes
for color mode
app/root.tsx
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { Provider } from "@/components/ui/provider"
export default function App() {
return (
<Provider>
<Outlet />
</Provider>
)
}
Update tsconfig
If you're using TypeScript, you need to update the compilerOptions
in the
tsconfig file to include the following options:
tsconfig.json
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Bundler",
"skipLibCheck": true
}
}
Enjoy!
When the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.
import { Button } from "@/components/ui/button"
import { HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<Button>Click me</Button>
<Button>Click me</Button>
</HStack>
)
}
Known issues
You may encounter the following issues when using Chakra UI with Remix:
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
This is a known issue related to extension installed in your browser. We recommend testing your application in incognito mode to see if the issue persists.