ClientOnly

ClientOnly is a component that renders its children only on the client side.

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

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>

While you can pass components directly, 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

Prop	Default	Type / Description
`children`	-	`ReactNodeOrFunction` The content to render on the client side. Note: Use the function pattern when accessing browser-only APIs.
`fallback`	-	`ReactNode` The fallback content to render while the component is mounting on the client side.

Similar Components

Show is a component that shows or hides its children based on a condition.

For is a component used to loop over an array and render a component for each item.

Format is used to format dates, numbers, and bytes according to a specific locale.

Portal is a component that renders elements outside of the current DOM hierarchy.

Slot is a component that merges its props onto its immediate child.