# Client Only

URL: https://ark-ui.com/docs/utilities/client-only
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/utilities/client-only.mdx

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

**Example: basic**

```ripple
import { ClientOnly } from 'ark-ripple/client-only';

export component Basic() {
  <ClientOnly>
    <div>{'This content is only rendered on the client side.'}</div>
  </ClientOnly>
}

```

### With Fallback

**Example: with-fallback**

```ripple
import { ClientOnly } from 'ark-ripple/client-only';

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

```

## API Reference

**Component API Reference**

**ClientOnly Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fallback` | `any` | No |  |