Skip to main content

Centered sign-in layout: heading, optional brand and footer.

Sign in

Welcome back.

No account? Ask your admin.

Usage

Example.svelte
<script lang="ts">
	import AuthShell from "@zedensix/ui/blocks/auth-shell";
	import Input from "@zedensix/ui/components/input";
	import { Button } from "@zedensix/ui/button";
</script>

<AuthShell heading="Sign in" subheading="Welcome back.">
	{#snippet brand()}
		<div class="bg-primary glow size-12 rounded-2xl"></div>
	{/snippet}
	<form class="grid gap-4">
		<Input label="Email" name="email" type="email" autocomplete="email" />
		<Button type="submit" class="h-11">Continue</Button>
	</form>
	{#snippet footer()}
		No account? Ask your admin.
	{/snippet}
</AuthShell>