Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Using Chakra in Remix

A guide for installing Chakra UI with Remix projects

Templates

Use the remix template below to get started quickly.

Installation

1

Install dependencies

npm i @chakra-ui/react@next @emotion/react
2

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
3

Setup emotion cache

Using snippets from the Remix sandbox, you can add the emotion cache to your application.

Emotion cache snippet

4

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 system
  • ThemeProvider from next-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>
  )
}
5

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
  }
}
6

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.

We welcome contributions to fix this issue.

Previous

Next.js (Pages)

Next

Storybook