Build faster with Premium Chakra UI Components šŸ’Ž

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Client Only

Used to render content only on the client side.

Source

Usage

import { ClientOnly, Skeleton } from "@chakra-ui/react"
<ClientOnly>
  <ColorModeButton />
</ClientOnly>

Examples

Fallback

Use the fallback prop to render a loading state while the client-side content is being prepared.

<ClientOnly fallback={<Skeleton boxSize="8" />}>
  <ColorModeButton />
</ClientOnly>

When your component accesses browser-only APIs (like window, document, or localStorage), use the render prop pattern to prevent server-side rendering issues:

<ClientOnly fallback={<Skeleton />}>
  {() => (
    <div>
      Current URL: {window.location.href}
      Screen width: {window.innerWidth}px
    </div>
  )}
</ClientOnly>

This pattern ensures that components accessing browser APIs are only evaluated on the client side, preventing hydration mismatches and server-side errors.

It can also be used for rendering heavy components that are not needed on the server side.

Direct Children (Use with Caution)

While you can pass components directly as children, be careful with components that access browser APIs:

/* āŒ This may cause server-side errors */
<ClientOnly fallback={<Skeleton />}>
  <ComponentThatUsesWindow />
</ClientOnly>

/* āœ… This is safe */
<ClientOnly fallback={<Skeleton />}>
  {() => <ComponentThatUsesWindow />}
</ClientOnly>

Props

These props can be passed to the ClientOnly component.

PropDefaultType
children *
React.ReactNode | (() => React.ReactNode)

The content to render on the client side. Can be a React node or a function that returns a React node. Use the function pattern when accessing browser-only APIs.

fallback
React.ReactNode

The fallback content to render while the component is mounting on the client side.

Previous

Tree View

Next

Download Trigger