Client Only for React Aria

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

PropType

childrenReactNode | (() → ReactNode)

What renders once it's mounted in the browser: nodes, or a function that returns them, so browser-only code runs only then.

Type: ReactNode | (() → ReactNode)

fallback?ReactNode

What renders on the server and until it mounts.

Default: null