Using Chakra in Remix

Templates

Use the remix template below to get started quickly.

:::card-group

<ResourceCard type="github" title="Remix template" url="https://github.com/chakra-ui/chakra-ui/tree/main/sandbox/remix-ts" />

:::

Installation

:::steps

Install dependencies

npm i @chakra-ui/react @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 snippet add

Setup emotion cache

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

Emotion cache snippet

Update tsconfig

If you're using TypeScript, you need to update the compilerOptions in the tsconfig file to include the following options:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true
  }
}

If you're using JavaScript, create a jsconfig.json file and add the above code to the file.

Setup provider

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

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

Enjoy!

When the power of the snippets and the primitive components from Chakra UI, you can build your UI faster.

import { Button, 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.