Client Only for Svelte

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

<script lang="ts">
import { ClientOnly } from "@/components/ui/client-only";
</script>

<ClientOnly>
  <div class="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

data-slot="client-only"

PropType

childrenSnippet | (() → Snippet)

What renders once it's mounted in the browser: nodes, or a function that returns them.

Type: Snippet | (() → Snippet)

fallback?Snippet

What renders on the server and until it mounts.

asChild?Snippet<[PropsFn]>

Render your own element: a snippet that gets the part's props to spread on it.

Type: Snippet<[PropsFn]>