Card

A rounded, elevated surface for grouping related content.

Upgrade to Pro

Unlock every component and priority support.

Your trial ends in 7 days. Upgrade now to keep your projects running without interruption.

Installation

npx lily-svelte@latest add card

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the card source from the registry into `$lib/components/ui/card`.

Usage

<script lang="ts">
	import {
		Card,
		CardHeader,
		CardTitle,
		CardDescription,
		CardContent,
		CardFooter
	} from '$lib/components/ui/card';
	import { Button } from '$lib/components/ui/button';
</script>
 
<Card>
	<CardHeader>
		<CardTitle>Upgrade to Pro</CardTitle>
		<CardDescription>Unlock every component and priority support.</CardDescription>
	</CardHeader>
	<CardContent>
		<p class="text-sm tracking-[-0.39px] text-(--text)/72">
			Your trial ends in 7 days. Upgrade now to keep going.
		</p>
	</CardContent>
	<CardFooter>
		<Button>Upgrade</Button>
		<Button variant="ghost">Maybe later</Button>
	</CardFooter>
</Card>

Composition

Every part is optional and accepts a class prop, so you can compose only what you need.

<Card class="rounded-3xl">
	<CardHeader>
		<CardTitle>Notifications</CardTitle>
	</CardHeader>
	<CardContent>You have 3 unread messages.</CardContent>
</Card>

← Calendar Carousel →