Docs
Card
Card
Displays a card with header, content, and footer.
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import * as Select from "$lib/components/ui/select/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
const frameworks = [
{
value: "sveltekit",
label: "SvelteKit"
},
{
value: "next",
label: "Next.js"
},
{
value: "astro",
label: "Astro"
},
{
value: "nuxt",
label: "Nuxt.js"
}
];
let framework = $state("");
const frameworkLabel = $derived(
frameworks.find((f) => f.value === framework)?.label ?? "Select a framework"
);
</script>
<Card.Root class="w-[350px]">
<Card.Header>
<Card.Title>Create project</Card.Title>
<Card.Description>Deploy your new project in one-click.</Card.Description>
</Card.Header>
<Card.Content>
<form>
<div class="grid w-full items-center gap-4">
<div class="flex flex-col space-y-1.5">
<Label for="name">Name</Label>
<Input id="name" placeholder="Name of your project" />
</div>
<div class="flex flex-col space-y-1.5">
<Label for="framework">Framework</Label>
<Select.Root type="single" bind:value={framework}>
<Select.Trigger id="framework">
{frameworkLabel}
</Select.Trigger>
<Select.Content>
{#each frameworks as framework}
<Select.Item value={framework.value} label={framework.label} />
{/each}
</Select.Content>
</Select.Root>
</div>
</div>
</form>
</Card.Content>
<Card.Footer class="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</Card.Footer>
</Card.Root>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import * as Select from "$lib/components/ui/select/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
const frameworks = [
{
value: "sveltekit",
label: "SvelteKit"
},
{
value: "next",
label: "Next.js"
},
{
value: "astro",
label: "Astro"
},
{
value: "nuxt",
label: "Nuxt.js"
}
];
let framework = $state("");
const selectedFramework = $derived(
frameworks.find((f) => f.value === framework)?.label ?? "Select a framework"
);
</script>
<Card.Root class="w-[350px]">
<Card.Header>
<Card.Title>Create project</Card.Title>
<Card.Description>Deploy your new project in one-click.</Card.Description>
</Card.Header>
<Card.Content>
<form>
<div class="grid w-full items-center gap-4">
<div class="flex flex-col space-y-1.5">
<Label for="name">Name</Label>
<Input id="name" placeholder="Name of your project" />
</div>
<div class="flex flex-col space-y-1.5">
<Label for="framework">Framework</Label>
<Select.Root type="single" bind:value={framework}>
<Select.Trigger id="framework">
{selectedFramework}
</Select.Trigger>
<Select.Content>
{#each frameworks as { value, label }}
<Select.Item {value} {label} />
{/each}
</Select.Content>
</Select.Root>
</div>
</div>
</form>
</Card.Content>
<Card.Footer class="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</Card.Footer>
</Card.Root>
Installation
npx shadcn-svelte@next add card
Copy and paste the component source files linked at the top of this page into your project.
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>
Modify the heading level
By default, the <Card.Title> component renders an <h3> element. You can change this by passing a tag prop to the component.
For example:
<Card.Title tag="h1">This will render an H1</Card.Title>
...
<Card.Title tag="h6">This will render an H6</Card.Title>
Examples
<script lang="ts">
import BellRing from "lucide-svelte/icons/bell-ring";
import Check from "lucide-svelte/icons/check";
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Switch } from "$lib/components/ui/switch/index.js";
const notifications = [
{
title: "Your call has been confirmed.",
description: "1 hour ago"
},
{
title: "You have a new message!",
description: "1 hour ago"
},
{
title: "Your subscription is expiring soon!",
description: "2 hours ago"
}
];
</script>
<Card.Root class="w-[380px]">
<Card.Header>
<Card.Title>Notifications</Card.Title>
<Card.Description>You have 3 unread messages.</Card.Description>
</Card.Header>
<Card.Content class="grid gap-4">
<div class="flex items-center space-x-4 rounded-md border p-4">
<BellRing />
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">Push Notifications</p>
<p class="text-muted-foreground text-sm">
Send notifications to device.
</p>
</div>
<Switch />
</div>
<div>
{#each notifications as notification, idx (idx)}
<div
class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
>
<span class="flex size-2 translate-y-1 rounded-full bg-sky-500"
></span>
<div class="space-y-1">
<p class="text-sm font-medium leading-none">
{notification.title}
</p>
<p class="text-muted-foreground text-sm">
{notification.description}
</p>
</div>
</div>
{/each}
</div>
</Card.Content>
<Card.Footer>
<Button class="w-full">
<Check /> Mark all as read
</Button>
</Card.Footer>
</Card.Root>
<script lang="ts">
import BellRing from "lucide-svelte/icons/bell-ring";
import Check from "lucide-svelte/icons/check";
import { Button } from "$lib/components/ui/button/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Switch } from "$lib/components/ui/switch/index.js";
const notifications = [
{
title: "Your call has been confirmed.",
description: "1 hour ago"
},
{
title: "You have a new message!",
description: "1 hour ago"
},
{
title: "Your subscription is expiring soon!",
description: "2 hours ago"
}
];
</script>
<Card.Root class="w-[380px]">
<Card.Header>
<Card.Title>Notifications</Card.Title>
<Card.Description>You have 3 unread messages.</Card.Description>
</Card.Header>
<Card.Content class="grid gap-4">
<div class=" flex items-center space-x-4 rounded-md border p-4">
<BellRing />
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">Push Notifications</p>
<p class="text-muted-foreground text-sm">
Send notifications to device.
</p>
</div>
<Switch />
</div>
<div>
{#each notifications as notification, idx (idx)}
<div
class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
>
<span class="flex size-2 translate-y-1 rounded-full bg-sky-500"
></span>
<div class="space-y-1">
<p class="text-sm font-medium leading-none">
{notification.title}
</p>
<p class="text-muted-foreground text-sm">
{notification.description}
</p>
</div>
</div>
{/each}
</div>
</Card.Content>
<Card.Footer>
<Button class="w-full">
<Check class="mr-2 size-4" /> Mark all as read
</Button>
</Card.Footer>
</Card.Root>
On This Page