ClientOnly

<ClientOnly>
  <IconButton aria-label="Plus" icon={<PlusIcon />} />
</ClientOnly>

Usage

import { ClientOnly } from "@yamada-ui/react"

import { ClientOnly } from "@/components/ui"

import { ClientOnly } from "@workspaces/ui"

<ClientOnly />

Fallback

To render a loading state while child elements are being prepared, use the fallback prop.

<ClientOnly fallback={<Skeleton boxSize="10" rounded="l2" />}>
  <IconButton aria-label="Plus" icon={<PlusIcon />} />
</ClientOnly>

Render Prop

When your component accesses browser-only APIs like window, document, localStorage, use the render prop pattern. This pattern ensures that components accessing browser APIs are evaluated only 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.

<ClientOnly fallback={<SkeletonText lineClamp={2} />}>
  {() => (
    <VStack gap="sm">
      <Text>Current URL: {window.location.href}</Text>
      <Text>Screen width: {window.innerWidth}px</Text>
    </VStack>
  )}
</ClientOnly>

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

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

Props