Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Login Card for Svelte

A card titled Login to your account, with email and password fields, Forgot your password?, Login, Login with Google, and a sign-up link.

UI library: Ark UI

The title is Login to your account. Email shows the placeholder m@example.com. Password has Forgot your password? beside the label. The buttons are Login and Login with Google, and the footer links to Sign up.

Use a login card on a sign-in page. Put the same form in a Dialog if signing in should not leave the page. On Svelte, Ark UI does not check the password.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Card anatomy: root, header, title, description, action, content, footer

Usage

<Card class="w-full max-w-md"><CardHeader><CardTitle>Login to your account</CardTitle><CardDescription>Enter your email below to login to your account</CardDescription></CardHeader><CardContent class="flex flex-col gap-4"><Field class="gap-2"><FieldLabel>Email</FieldLabel><Input placeholder="m@example.com" type="email" /></Field><Field class="gap-2"><div class="flex items-center justify-between"><FieldLabel>Password</FieldLabel><a class="text-sm hover:underline" href="#">Forgot your password?</a></div><Input type="password" /></Field><Button class="w-full">Login</Button><Button class="w-full" variant="outline">Login with Google</Button></CardContent><CardFooter class="justify-center"><p class="text-muted-foreground text-sm">Don't have an account?{" "}<a class="underline" href="#">Sign up</a></p></CardFooter></Card>

FAQ

How are the labels tied to the fields?

Each label and input sit in a Field. Field connects FieldLabel to the input for you, so there is no id to write. Clicking a label focuses its field.

How do I submit the form?

Wrap the content in a form, make Login type="submit", and give the inputs a name and required. The demo has no form or handler, so the buttons do nothing yet.

Where is Forgot your password?

In a flex items-center justify-between row with the password label, above the input. It's a plain link: point its href at your reset page.

What are the two buttons?

Login, the default filled button, and Login with Google, variant="outline". Both are w-full. Add your provider's logo before the second label, or more outline buttons for more providers.

How wide is the login card?

Up to max-w-md with w-full, so it fills a phone screen and stops at 28rem. The fields and buttons stack with gap-4, and each label sits gap-2 above its input.

API Reference

Card

No extra props in this demo. The rest is on the Card page.

Field

No extra props in this demo. The rest is on the Field page.

Input

Sets placeholder="m@example.com", type="email" and type="password". The rest is on the Input page.

Button

Sets variant="outline". The rest is on the Button page.

All 4 card examples