SSO Registration Card
blockauthCentered sign-up card. Name + email + password + confirm with inline mismatch warning, terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub). Footer links back to sign-in. Pass onSubmit, onSignIn, onOauth, onViewTerms, onViewPrivacy callbacks.
Installation
$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/register-01.json$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/register-01.json$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/register-01.json$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/register-01.jsonManifest:
https://uipkge.dev/r/svelte/register-01.jsonInstalls to:src/lib/components/blocks/register-01/Variants
Loading interactive previews…
Loading interactive previews…
Files installed (1)
src/lib/components/blocks/register-01/Register01.svelte7.6 kB
<script lang="ts"> import { Button } from '$lib/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$lib/components/ui/card' import { Checkbox } from '$lib/components/ui/checkbox' import { Input } from '$lib/components/ui/input' import { Label } from '$lib/components/ui/label' import { Separator } from '$lib/components/ui/separator' interface Props { onSubmit?: (payload: { name: string; email: string; password: string }) => void onSignIn?: () => void onOauth?: (provider: 'github' | 'google') => void onViewTerms?: () => void onViewPrivacy?: () => void } let { onSubmit, onSignIn, onOauth, onViewTerms, onViewPrivacy }: Props = $props() let name = $state('') let email = $state('') let password = $state('') let confirmPassword = $state('') let acceptTerms = $state(false) const passwordsMatch = $derived(!confirmPassword || password === confirmPassword) const canSubmit = $derived( name.length > 0 && email.length > 0 && password.length >= 8 && passwordsMatch && acceptTerms, ) function handleSubmit(e: SubmitEvent) { e.preventDefault() if (!canSubmit) return onSubmit?.({ name, email, password }) } // ----- Optional: zod validation ----- // The `canSubmit` derived already guards basic shape (lengths + // matching passwords + terms checked), but for typed parsing, // regex-driven password rules, or shared schema with the backend, // drop in zod. Add `zod` to your project and uncomment below. // // import { z } from 'zod' // const registerSchema = z // .object({ // name: z.string().min(1, 'Name is required'), // email: z.string().email('Enter a valid email'), // password: z // .string() // .min(8, 'At least 8 characters') // .regex(/[A-Z]/, 'One uppercase letter') // .regex(/[0-9]/, 'One number'), // confirmPassword: z.string(), // acceptTerms: z.literal(true, { errorMap: () => ({ message: 'Required' }) }), // }) // .refine((d) => d.password === d.confirmPassword, { // path: ['confirmPassword'], // message: "Passwords don't match", // }) // function handleSubmit(e: SubmitEvent) { // e.preventDefault() // const parsed = registerSchema.safeParse({ name, email, password, confirmPassword, acceptTerms }) // if (!parsed.success) { // // parsed.error.flatten().fieldErrors -> { email: [...], password: [...], ... } // return // } // onSubmit?.({ name: parsed.data.name, email: parsed.data.email, password: parsed.data.password }) // } </script> <div data-slot="register-01" class="bg-muted/30 flex min-h-svh items-center justify-center p-6"> <Card class="w-full max-w-sm"> <CardHeader class="text-center"> <CardTitle class="text-2xl">Create your account</CardTitle> <CardDescription>Free for personal projects. No credit card.</CardDescription> </CardHeader> <CardContent class="space-y-4"> <form class="space-y-4" onsubmit={handleSubmit}> <div class="space-y-2"> <Label for="r-name">Full name</Label> <Input id="r-name" bind:value={name} type="text" placeholder="Ada Lovelace" autocomplete="name" required /> </div> <div class="space-y-2"> <Label for="r-email">Email</Label> <Input id="r-email" bind:value={email} type="email" placeholder="[email protected]" autocomplete="email" required /> </div> <div class="space-y-2"> <Label for="r-password">Password</Label> <Input id="r-password" bind:value={password} type="password" autocomplete="new-password" minlength={8} required /> <p class="text-muted-foreground text-xs">Minimum 8 characters.</p> </div> <div class="space-y-2"> <Label for="r-confirm">Confirm password</Label> <Input id="r-confirm" bind:value={confirmPassword} type="password" autocomplete="new-password" required /> {#if !passwordsMatch} <p class="text-destructive text-xs" role="alert">Passwords don't match.</p> {/if} </div> <div class="flex items-start gap-2.5 pt-1"> <Checkbox id="r-terms" bind:checked={acceptTerms} /> <Label for="r-terms" class="text-muted-foreground cursor-pointer text-xs leading-relaxed font-normal"> I agree to the <button type="button" class="text-foreground mx-0.5 hover:underline" onclick={() => onViewTerms?.()}> Terms of Service </button> and <button type="button" class="text-foreground mx-0.5 hover:underline" onclick={() => onViewPrivacy?.()}> Privacy Policy</button >. </Label> </div> <Button type="submit" class="w-full" disabled={!canSubmit}>Create account</Button> </form> <div class="relative"> <Separator /> <span class="bg-card text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-xs tracking-wider uppercase" > Or continue with </span> </div> <div class="grid grid-cols-2 gap-2"> <Button type="button" variant="outline" onclick={() => onOauth?.('google')}> <svg viewBox="0 0 24 24" class="size-4" aria-hidden="true"> <path fill="#4285F4" d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z" /> <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" /> <path fill="#FBBC05" d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z" /> <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z" /> </svg> Google </Button> <Button type="button" variant="outline" onclick={() => onOauth?.('github')}> <svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true"> <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /> </svg> GitHub </Button> </div> </CardContent> <CardFooter class="justify-center"> <p class="text-muted-foreground text-xs"> Already have an account? <button type="button" class="text-foreground ml-1 font-medium hover:underline" onclick={() => onSignIn?.()}> Sign in </button> </p> </CardFooter> </Card> </div>
Raw manifest:https://uipkge.dev/r/svelte/register-01.json