shadcn.io is an independent project built on shadcn/ui
Sign In opens Welcome back. The fields are Email and Password, with Remember me and Forgot password on one row. A full-width Sign In button sits under them, then a line that links to Sign up.
Use it when sign-in should return people to the same screen. Remember me does not persist anything here. A visit that is only sign-in can be a page, or a Drawer on a phone. In Svelte, Ark UI does not sign anyone in.
Installation
Anatomy
Usage
<Dialog><DialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Sign In</Button>{/snippet}</DialogTrigger><DialogContent class="sm:max-w-md"><DialogHeader><DialogTitle>Welcome back</DialogTitle><DialogDescription>Enter your credentials to access your account.</DialogDescription></DialogHeader><FieldGroup><Field><FieldLabel>Email</FieldLabel><Input autocomplete="email" name="email" placeholder="you@example.com" type="email" /></Field><Field><FieldLabel>Password</FieldLabel><Input autocomplete="current-password" name="password" type="password" /></Field><div class="flex items-center justify-between gap-4"><Field orientation="horizontal"><Checkbox name="remember" /><FieldLabel class="font-normal">Remember me</FieldLabel></Field><Button class="h-auto shrink-0 p-0" variant="link">Forgot password?</Button></div></FieldGroup><DialogFooter><Button class="w-full">Sign In</Button></DialogFooter><p class="text-center text-muted-foreground text-sm">Don't have an account?{" "}<Button class="h-auto p-0" variant="link">Sign up</Button></p></DialogContent></Dialog>FAQ
How does Remember me work?
It's a Checkbox with a name, so its value submits with the form. Your server uses it to issue a longer-lived session.
Will password managers fill it?
Yes. The inputs set autoComplete="email" and autoComplete="current-password", which is what password managers look for.
Where should Forgot password? go?
To a reset form, in this dialog or a page. It's a link-style Button here; wire it to your flow.
API Reference
Dialog
No extra props in this demo. The rest is on the Dialog page.
Button
Sets props, variant="outline" and variant="link". The rest is on the Button page.
Field
Sets orientation="horizontal". The rest is on the Field page.
Input
Sets autocomplete="email", name="email", placeholder="you@example.com", type="email", autocomplete="current-password" and name="password". The rest is on the Input page.
Checkbox
Sets name="remember". The rest is on the Checkbox page.
