Kappa / Client Only

Preparing browser controls…Loading browser-only features.

<script setup>
import { ClientOnly } from "@dicehub/kappa/components/client-only";
</script>

<template>
  <ClientOnly>
    <template #fallback>
      <div class="runtime-surface runtime-surface--fallback">
        <strong>Preparing browser controls…</strong>
        <span>Loading browser-only features.</span>
      </div>
    </template>
    <div class="runtime-surface runtime-surface--ready">
      <strong>Browser controls are ready.</strong>
      <span>Rendered after client mount.</span>
    </div>
  </ClientOnly>
</template>

Installation

Client Only is part of the main Kappa package. It is a renderless boundary backed by Ark UI and adds no runtime dependency beyond the existing Ark UI package.

Barrel

import { ClientOnly } from "@dicehub/kappa";

Granular

import { ClientOnly } from "@dicehub/kappa/components/client-only";

Usage

Put browser-only content in the default slot. Use the fallback slot for content that must be present during server-side rendering and before the browser mount completes.

Loading run summary…

<script setup>
import { ClientOnly } from "@dicehub/kappa/components/client-only";
</script>

<template>
  <ClientOnly>
    <template #fallback>
      <span>Loading run summary…</span>
    </template>
    <output aria-live="polite">Run summary available in the browser.</output>
  </ClientOnly>
</template>

Composition

Renderless slot composition

ClientOnly (renderless)
├── #fallback (SSR and pre-mount content)
└── #default (browser-mounted content)

Client Only renders the fallback slot until the component mounts in the browser. It then renders the default slot. The boundary does not add a wrapper, attributes, or layout styles to either slot.

Kappa follows Ark UI'sClient Only utility. Keep browser APIs, charts, and controls in the default slot when they cannot render during SSR. Keep fallback markup structurally useful and visually close to the ready state to reduce layout shift.

ClientOnly (renderless)
├── #fallback (SSR and pre-mount content)
└── #default (browser-mounted content)

Examples

Layout-safe Fallback

Reserve the same space as a browser-only chart or data view while the server fallback is visible.

<ClientOnly>
  <template #fallback>
    <div class="summary-placeholder" aria-hidden="true">
      <span class="summary-placeholder__line" />
      <span class="summary-placeholder__line summary-placeholder__line--short" />
      <span class="summary-placeholder__block" />
    </div>
  </template>
  <div class="run-summary">
    <span>Residual history</span>
    <strong>Converging</strong>
    <span>Latest values are ready in the browser.</span>
  </div>
</ClientOnly>

No Fallback

Omit the fallback slot when empty server output is the correct experience. The browser content still mounts after hydration.

<ClientOnly>
  <div class="browser-controls">
    <span aria-hidden="true" />
    <span>
      <strong>Browser-only controls mounted</strong>
      <small>No fallback supplied</small>
    </span>
  </div>
</ClientOnly>

Accessibility

Make fallback content communicate the same purpose as the browser-only content.
Preserve a stable region size so the client transition does not move nearby content.
Use live regions only for meaningful status changes, not for the boundary itself.
Keep interactive controls in the default slot so they cannot be activated before mount.

API Reference

ClientOnly

Prop	Type	Default	Description
`—`	`none`	`—`	ClientOnly has no component-specific props. Put attributes on content inside a slot.

Slots

Slot	Description
`default`	Content rendered after the component mounts in the browser.
`fallback`	Content rendered during server-side rendering and before browser mount.

Data Attributes

Attribute	Value	Description
`—`	`—`	ClientOnly renders no DOM root. Add attributes to an element inside default or fallback content.

Exports

Export	Description
`ClientOnly`	Renderless Ark-backed SSR and browser-mount boundary.
`ClientOnlyProps`	Public empty prop contract preserved from Ark UI.
`ClientOnlySlots`	Public default and fallback slot contract.