<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import * as Card from "$lib/components/ui/card/index.js";
</script>
<Card.Root class="-my-4 w-full max-w-sm">
<Card.Header>
<Card.Title>Login to your account</Card.Title>
<Card.Description
>Enter your email below to login to your account</Card.Description
>
<Card.Action>
<Button variant="link">Sign Up</Button>
</Card.Action>
</Card.Header>
<Card.Content>
<form>
<div class="flex flex-col gap-6">
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="[email protected]" required />
</div>
<div class="grid gap-2">
<div class="flex items-center">
<Label for="password">Password</Label>
<a
href="##"
class="ms-auto inline-block text-sm underline-offset-4 hover:underline"
>
Forgot your password?
</a>
</div>
<Input id="password" type="password" required />
</div>
</div>
</form>
</Card.Content>
<Card.Footer class="flex-col gap-2">
<Button type="submit" class="w-full">Login</Button>
<Button variant="outline" class="w-full">Login with Google</Button>
</Card.Footer>
</Card.Root>Installation
pnpm dlx jsrepo@latest add cardnpx jsrepo@latest add cardyarn dlx jsrepo@latest add cardbunx jsrepo@latest add cardCopy and paste the following code into your project.
<script lang="ts">
import { cn, type WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="card-action"
class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end text-link', className)}
{...restProps}
>
{@render children?.()}
</div>
Usage
<script lang="ts">
import * as Card from '$lib/components/ui/card/index.js';
</script><Card.Root>
<Card.Header>
<Card.Title>Card Title</Card.Title>
<Card.Description>Card Description</Card.Description>
</Card.Header>
<Card.Content>
<p>Card Content</p>
</Card.Content>
<Card.Footer>
<p>Card Footer</p>
</Card.Footer>
</Card.Root>Examples
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import * as Card from "$lib/components/ui/card/index.js";
</script>
<Card.Root class="-my-4 w-full max-w-sm">
<Card.Header>
<Card.Title>Login to your account</Card.Title>
<Card.Description
>Enter your email below to login to your account</Card.Description
>
<Card.Action>
<Button variant="link">Sign Up</Button>
</Card.Action>
</Card.Header>
<Card.Content>
<form>
<div class="flex flex-col gap-6">
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="[email protected]" required />
</div>
<div class="grid gap-2">
<div class="flex items-center">
<Label for="password">Password</Label>
<a
href="##"
class="ms-auto inline-block text-sm underline-offset-4 hover:underline"
>
Forgot your password?
</a>
</div>
<Input id="password" type="password" required />
</div>
</div>
</form>
</Card.Content>
<Card.Footer class="flex-col gap-2">
<Button type="submit" class="w-full">Login</Button>
<Button variant="outline" class="w-full">Login with Google</Button>
</Card.Footer>
</Card.Root>