Components

The following Clerk UI components are available in Svelte Clerk:

<ClerkLoaded> (clerk docs)
<ClerkLoading> (clerk docs)
<Protect> (clerk docs)
<SignedIn> (clerk docs)
<SignedOut> (clerk docs)
<SignIn> (clerk docs)
<SignUp> (clerk docs)
<UserButton> (clerk docs)
<UserProfile> (clerk docs)
<OrganizationList> (clerk docs)
<OrganizationProfile> (clerk docs)
<OrganizationSwitcher> (clerk docs)
<CreateOrganization> (clerk docs)
<GoogleOneTap> (clerk docs)
<Waitlist /> (clerk docs)

The main difference is that the Svelte components use Snippets to render their content.

Here's an example of the <Protect> component with a fallback message:

svelte

<script lang="ts">
	import { Protect } from 'svelte-clerk/client';
</script>

<template>
	<Protect permission="org:invoices:create">
		{#snippet fallback()}
			<p>You do not have the permissions to create an invoice.</p>
		{/snippet}
	</Protect>
</template>

To see list of available props for each components, visit the Clerk UI components documentation.

Components ​

Components