Client Only for Ark UI

Render content only on the client side.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

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

<ClientOnly>
  <div className="rounded-xl border bg-muted px-4 py-3 text-foreground text-sm">
    This content is only rendered on the client side.
  </div>
</ClientOnly>

Demos

Fallback

PreviewCode

API Reference

ClientOnly

data-slot="client-only"

PropType

childrenReact.ReactNode | (() → React.ReactNode)

What renders once it's mounted in the browser: nodes, or a function that returns them.

Type: React.ReactNode | (() → React.ReactNode)

fallback?React.ReactNode

What renders on the server and until it mounts.

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.