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
fallback
string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>

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

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Previous

Tree View

Next

Download Trigger