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

#### React

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

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ClientOnly } from '@ark-ui/vue/client-only'
</script>

<template>
  <ClientOnly>
    <div>This content is only rendered on the client side.</div>
  </ClientOnly>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ClientOnly } from '@ark-ui/svelte/client-only'
</script>

<ClientOnly>
  <div>This content is only rendered on the client side.</div>
</ClientOnly>

```

### With Fallback

**Example: with-fallback**

#### React

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

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ClientOnly } from '@ark-ui/vue/client-only'
</script>

<template>
  <ClientOnly>
    <template #fallback>
      <div>Loading...</div>
    </template>
    <div>This content is only rendered on the client side.</div>
  </ClientOnly>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ClientOnly } from '@ark-ui/svelte/client-only'
</script>

<ClientOnly>
  {#snippet fallback()}
    <div>Loading...</div>
  {/snippet}
  <div>This content is only rendered on the client side.</div>
</ClientOnly>

```

## API Reference

**Component API Reference**

#### React

**ClientOnly Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fallback` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No |  |


#### Solid

**ClientOnly Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fallback` | `number | boolean | Node | (string & {}) | ArrayElement` | No |  |


#### Svelte

**ClientOnly Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fallback` | `Snippet<[]>` | No |  |