Skip to main content

A password field with a button to reveal what was typed.

Sign in

Welcome back.

No account? Ask your admin for an invitation.

Usage

Example.svelte
<script lang="ts">
	import AuthShell from "@zedensix/ui/blocks/auth-shell";
	import PasswordInput from "@zedensix/ui/blocks/password-input";
	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-5">
		<Input
			label="Email"
			name="email"
			type="email"
			autocomplete="email"
			required
		/>
		<PasswordInput label="Password" required />
		<Button type="submit" class="h-11">Sign in</Button>
	</form>
	{#snippet footer()}
		No account? Ask your admin for an invitation.
	{/snippet}
</AuthShell>