Login to your account
Enter your email below to login to your account
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
</script>
<template>
<Card class="w-full max-w-sm">
<CardHeader>
<CardTitle>Login to your account</CardTitle>
<CardDescription>
Enter your email below to login to your account
</CardDescription>
<CardAction>
<Button variant="link">
Sign Up
</Button>
</CardAction>
</CardHeader>
<CardContent>
<form>
<div class="grid w-full items-center gap-4">
<div class="flex flex-col space-y-1.5">
<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="m@example.com" />
</div>
<div class="flex flex-col space-y-1.5">
<div class="flex items-center">
<Label for="password">Password</Label>
<a
href="#"
class="ml-auto inline-block text-sm underline"
>
Forgot your password?
</a>
</div>
<Input id="password" type="password" />
</div>
</div>
</form>
</CardContent>
<CardFooter class="flex flex-col gap-2">
<Button class="w-full">
Login
</Button>
<Button variant="outline" class="w-full">
Login with Google
</Button>
</CardFooter>
</Card>
</template>Installation
Usage
<script setup lang="ts">
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card'
</script>
<template>
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>
</template>With Image
Use the CardImage component to display images at the top of a card with flush edges.
<script setup lang="ts">
import {
Card,
CardContent,
CardHeader,
CardImage,
CardTitle,
} from '@/components/ui/card'
</script>
<template>
<Card>
<CardImage>
<img src="/image.jpg" alt="Product" class="aspect-video w-full object-cover">
</CardImage>
<CardHeader>
<CardTitle>Card Title</CardTitle>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
</Card>
</template>Variants
Use the variant prop to change the card's visual style.
Default
Free Shipping
On orders over $50
Enjoy complimentary delivery on all qualifying orders.
<script setup lang="ts">
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
</script>
<template>
<Card variant="default">
<CardHeader>
<CardTitle>Free Shipping</CardTitle>
<CardDescription>On orders over $50</CardDescription>
</CardHeader>
<CardContent>
<p class="text-sm">Enjoy complimentary delivery on all qualifying orders.</p>
</CardContent>
</Card>
</template>Subtle
Order Summary
3 items in your cart
Subtotal: $129.99 — Ready for checkout.
<script setup lang="ts">
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
</script>
<template>
<Card variant="subtle">
<CardHeader>
<CardTitle>Order Summary</CardTitle>
<CardDescription>3 items in your cart</CardDescription>
</CardHeader>
<CardContent>
<p class="text-sm">Subtotal: $129.99 — Ready for checkout.</p>
</CardContent>
</Card>
</template>Elevated
Featured Product
Best seller this week
Premium leather wallet — handcrafted in Italy.
<script setup lang="ts">
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
</script>
<template>
<Card variant="elevated">
<CardHeader>
<CardTitle>Featured Product</CardTitle>
<CardDescription>Best seller this week</CardDescription>
</CardHeader>
<CardContent>
<p class="text-sm">Premium leather wallet — handcrafted in Italy.</p>
</CardContent>
</Card>
</template>Colors
Use the color prop to change the card's color scheme. Colors can be combined with any variant.
Primary
Loyalty Member
Gold tier benefits
Earn 2x points on every purchase.
<script setup lang="ts">
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
</script>
<template>
<Card color="primary">
<CardHeader>
<CardTitle>Loyalty Member</CardTitle>
<CardDescription>Gold tier benefits</CardDescription>
</CardHeader>
<CardContent>
<p class="text-sm">Earn 2x points on every purchase.</p>
</CardContent>
</Card>
</template>Secondary
Seasonal Sale
Spring collection
Up to 40% off selected styles.
<script setup lang="ts">
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
</script>
<template>
<Card color="secondary">
<CardHeader>
<CardTitle>Seasonal Sale</CardTitle>
<CardDescription>Spring collection</CardDescription>
</CardHeader>
<CardContent>
<p class="text-sm">Up to 40% off selected styles.</p>
</CardContent>
</Card>
</template>Inverted
Exclusive Deal
Limited edition
Only 12 remaining — members-only pricing.
<script setup lang="ts">
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
</script>
<template>
<Card color="inverted">
<CardHeader>
<CardTitle>Exclusive Deal</CardTitle>
<CardDescription>Limited edition</CardDescription>
</CardHeader>
<CardContent>
<p class="text-sm">Only 12 remaining — members-only pricing.</p>
</CardContent>
</Card>
</template>Examples
Product Card
New Arrival
Classic Timepiece
Swiss-made automatic movement
$349.00$429.00
-30%
Leather Crossbody
Hand-stitched Italian leather
$189.00$270.00
<script setup lang="ts">
import {
Card,
CardAction,
CardContent,
CardDescription,
CardHeader,
CardImage,
CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
</script>
<template>
<div class="grid gap-6 sm:grid-cols-2">
<Card class="overflow-hidden">
<CardImage>
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Placeholder"
class="aspect-[4/3] w-full object-cover"
>
</CardImage>
<CardHeader>
<CardAction>
<Badge color="new">New Arrival</Badge>
</CardAction>
<CardTitle>Classic Timepiece</CardTitle>
<CardDescription>Swiss-made automatic movement</CardDescription>
</CardHeader>
<CardContent>
<div class="flex items-baseline gap-2">
<span class="text-lg font-semibold">$349.00</span>
<span class="text-sm text-muted-foreground line-through">$429.00</span>
</div>
</CardContent>
</Card>
<Card class="overflow-hidden">
<CardImage>
<img
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Placeholder"
class="aspect-[4/3] w-full object-cover"
>
</CardImage>
<CardHeader>
<CardAction>
<Badge color="discount">-30%</Badge>
</CardAction>
<CardTitle>Leather Crossbody</CardTitle>
<CardDescription>Hand-stitched Italian leather</CardDescription>
</CardHeader>
<CardContent>
<div class="flex items-baseline gap-2">
<span class="text-lg font-semibold">$189.00</span>
<span class="text-sm text-muted-foreground line-through">$270.00</span>
</div>
</CardContent>
</Card>
</div>
</template>API Reference
Card
Renders a <div> element. The root container for card content.
CardHeader
Container for the card's title and description. Renders a <div> with horizontal padding.
CardTitle
The card's heading. Renders an <h3> element.
CardDescription
Supporting text below the title. Renders a <p> element.
CardContent
The main body of the card. Renders a <div> with horizontal padding.
CardFooter
Bottom section for actions. Renders a <div> with horizontal padding.
CardImage
Container for images at the top of a card. Provides flush edges that align with the card boundary.
CardAction
Top-right positioned action slot for buttons or icons.