---
title: ClientOnly
description: "`ClientOnly` is a component that renders its children only on the client side."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/client-only
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-clientonly--basic
---

# ClientOnly

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

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

## Usage

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

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

```tsx
import { ClientOnly } from "@workspaces/ui"
```

```tsx
<ClientOnly />
```

### Fallback

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

```tsx
<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.

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

:::warning
While you can pass components directly, be careful with components that access browser APIs.
:::

```tsx
/* 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](https://yamada-ui.com/docs/components/show.md): `Show` is a component that shows or hides its children based on a condition.
- [For](https://yamada-ui.com/docs/components/for.md): `For` is a component used to loop over an array and render a component for each item.
- [Format](https://yamada-ui.com/docs/components/format.md): `Format` is used to format dates, numbers, and bytes according to a specific locale.
- [Portal](https://yamada-ui.com/docs/components/portal.md): `Portal` is a component that renders elements outside of the current `DOM` hierarchy.
- [Slot](https://yamada-ui.com/docs/components/slot.md): `Slot` is a component that merges its props onto its immediate child.

## Uses Components & Hooks

- [Show](https://yamada-ui.com/docs/components/show.md): `Show` is a component that shows or hides its children based on a condition.