shadcn.io is not affiliated with official shadcn/ui
Shadcn Client Only for React and Tailwind
Render content only on the client side.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/client-only.jsonpnpm dlx shadcn@latest add https://kit.dev/r/client-only.jsonnpx shadcn@latest add https://kit.dev/r/client-only.jsonyarn shadcn@latest add https://kit.dev/r/client-only.jsonInstall the following dependencies:
bun add @ark-ui/reactpnpm add @ark-ui/reactnpm install @ark-ui/reactyarn add @ark-ui/reactCopy and paste the following code into your project.
"use client";
import { ClientOnly as ArkClientOnly } from "@ark-ui/react/client-only";
export const ClientOnly = (
props: React.ComponentProps<typeof ArkClientOnly>
) => <ArkClientOnly data-slot="client-only" {...props} />;Update the import paths to match your project setup.
Usage
import { ClientOnly } from "@/registry/react/components/client-only";<ClientOnly>
<div>This content only renders on the client.</div>
</ClientOnly>Examples
With fallback
Pass fallback to show content while the client-only content is loading:
API Reference
ClientOnly
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.