Dice UI

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/client-only"

Manual

Install the following dependencies:

npm install @diceui/hydration-boundary

Copy and paste the following code into your project.

"use client";
 
import * as React from "react";
 
interface ClientOnlyProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}
 
function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  const [mounted, setMounted] = React.useState(false);
 
  React.useLayoutEffect(() => {
    setMounted(true);
  }, []);
 
  if (!mounted) return fallback;
 
  return children;
}
 
export { ClientOnly };

Usage

import { ClientOnly } from "@/components/client-only"
 
export default function App() {
  return (
    <ClientOnly fallback={<LoadingSpinner />}>
      <ClientComponent />
    </ClientOnly>
  )
}

API Reference

ClientOnly

A component that only renders its children on the client side.

Prop	Type	Default
`fallback`	`ReactNode`	`null`

Client Only

Installation

CLI

Manual

Usage

API Reference

ClientOnly

On this page