# Client Only

URL: https://ark-ui.com/docs/utilities/client-only
LLM: https://ark-ui.com/llms.txt/utilities/client-only

Render content only on the client side.

---

## Motivation

The `ClientOnly` component renders its children only on the client side. This is useful for components that need to
access the DOM or browser APIs that are not available on the server side.

## Examples

### Basic

```tsx
import { ClientOnly } from '@ark-ui/react/client-only'

export const Basic = () => (
  <ClientOnly>
    <div>This content is only rendered on the client side.</div>
  </ClientOnly>
)
```

### With Fallback

```tsx
import { ClientOnly } from '@ark-ui/react/client-only'

export const WithFallback = () => (
  <ClientOnly fallback={<div>Loading...</div>}>
    <div>This content is only rendered on the client side.</div>
  </ClientOnly>
)
```

## API Reference

### ClientOnly

#### Props

**`fallback`**
Type: `any`
Required: false
Default Value: `undefined`
Description: undefined