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.json

pnpm dlx shadcn@latest add https://kit.dev/r/client-only.json

npx shadcn@latest add https://kit.dev/r/client-only.json

yarn shadcn@latest add https://kit.dev/r/client-only.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/client-only.tsx

"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 "@/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

API Reference

ClientOnly

PropType

AttributeType

Type Table

Download Trigger