Server Components
Learn how to use Chakra UI with React Server Components.
React Server Components is a new feature in React that allows you to build components that render on the server and return UI to the client without hydration.
Client components are still server-rendered but hydrated on the client. Learn more about Server component patterns
Chakra UI components are client components because they rely on useState, useRef and useState which are not available in server components.
Usage
Here's an example of how to use Chakra UI components with React Server Components in Next.js
import { Heading } from "@chakra-ui/react" import fs from "node:fs" export default async function Page() { const content = fs.readFileSync("path/to/file.md", "utf-8") return <Heading as="h1">{content}</Heading> }Chakra Factory
When using the chakra() factory function, use the use client directive and move the component to a dedicated file.
"use client" import { chakra } from "@chakra-ui/react" export const BlogPost = chakra("div", { base: { color: "red", }, variants: { primary: { true: { color: "blue" }, false: { color: "green" }, }, }, })Then import the component in your page server component
import { BlogPost } from "./blog-post" export default async function Page() { const content = fs.readFileSync("path/to/file.md", "utf-8") return <BlogPost>{content}</BlogPost> }Hooks
When importing hooks from Chakra UI, use the use client directive
"use client" import { useBreakpointValue } from "@chakra-ui/react" export function MyComponent() { const value = useBreakpointValue({ base: "mobile", md: "desktop" }) return <div>{value}</div> }Render Props
When using render props, use the use client directive
"use client" import { ProgressContext } from "@chakra-ui/react" export function MyComponent() { return <ProgressContext>{({ value }) => <div>{value}</div>}</ProgressContext> }