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.

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

Installation

npx lily-svelte@latest add card

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 →