Client Only

Copy Markdown

Render content only on the client side.

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/client-only

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

<ClientOnly>
  <div>This content only renders on the client.</div>
</ClientOnly>

Pass fallback to show content while the client-only content is loading:

PreviewCode

Loading…

Shows children only on the client. Useful for hydration-safe client components.

Prop	Type	Default
`fallback`	`ReactNode`	-

For a complete list of props, see the Ark UI documentation.

[

Tree View ](/docs/components/tree-view)[

Download Trigger ](/docs/utilities/download-trigger)

On This Page