Components

The following Clerk UI components are available in Svelte Clerk:

<Show> (clerk docs)
<SignIn> (clerk docs)
<SignUp> (clerk docs)
<UserButton> (clerk docs)
<UserAvatar> (clerk docs)
<UserProfile> (clerk docs)
<OrganizationList> (clerk docs)
<OrganizationProfile> (clerk docs)
<OrganizationSwitcher> (clerk docs)
<CreateOrganization> (clerk docs)
<GoogleOneTap> (clerk docs)
<Waitlist /> (clerk docs)
<PricingTable /> (clerk docs)
<APIKeys /> (clerk docs)
<ClerkLoaded> (clerk docs)
<ClerkLoading> (clerk docs)

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

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

svelte

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

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

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

Components ​

Components