Card Examples
A collection of Tailwind CSS card examples with beautiful shadcn/ui styling. Use them for things like login forms, user profiles, pricing, and dashboard widgets, or as inspiration for your own designs. Every example is built on the card component and ready to copy into your project.
Login
A login form with a forgot password link and social sign in.
<div class="card">
<div class="card-header">
<h3 class="card-title">Sign In</h3>
<p class="card-description">
Enter your credentials to access your account.
</p>
</div>
<div class="card-content field-group">
<form class="field-group">
<div class="field">
<label class="label" for="signin-email">Email</label
><input
class="input"
id="signin-email"
type="email"
placeholder="[email protected]"
name="email"
/>
</div>
<div class="field">
<div class="flex w-full items-center">
<label class="label" for="signin-password">Password</label
><a
href="#"
class="ml-auto text-sm underline-offset-4 hover:underline"
>Forgot password?</a
>
</div>
<input
class="input"
id="signin-password"
type="password"
name="password"
/>
</div>
<button class="btn" type="submit">Sign In</button>
</form>
<div class="field-separator">
<span class="text-xs uppercase">Or continue with</span>
</div>
<div class="grid grid-cols-2 gap-5">
<button class="btn btn-outline" type="button">
<svg
class="icon-start"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
></path></svg
>Google</button
><button class="btn btn-outline" type="button">
<svg
class="icon-start"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
></path></svg
>GitHub
</button>
</div>
</div>
<div class="card-footer justify-center">
<p class="text-sm text-muted-foreground">
Don't have an account?
<a
href="#"
class="font-medium text-foreground underline underline-offset-4"
>Sign up</a
>
</p>
</div>
</div>Sign Up
A sign up form with email and password fields and social providers.
<div class="card">
<div class="card-header">
<h3 class="card-title">Sign Up</h3>
<p class="card-description">
Create an account to get started on the platform and unlock all features
and benefits.
</p>
</div>
<div class="card-content field-group">
<div class="grid grid-cols-2 gap-5">
<button class="btn btn-outline" type="button">
<svg
class="icon-start"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
></path></svg
>Google</button
><button class="btn btn-outline" type="button">
<svg
class="icon-start"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
></path></svg
>GitHub
</button>
</div>
<div class="field-separator">
<span class="text-xs uppercase">Or continue with</span>
</div>
<form class="field-group">
<div class="field">
<label class="label" for="signup-email">Email</label
><input
class="input"
id="signup-email"
type="email"
placeholder="[email protected]"
name="email"
/>
</div>
<div class="field">
<label class="label" for="signup-password">Password</label
><input
class="input"
id="signup-password"
type="password"
name="password"
/>
</div>
<button class="btn" type="submit">Create Account</button>
</form>
</div>
<div class="card-footer justify-center">
<p class="text-sm text-muted-foreground">
Already have an account?
<a
href="#"
class="font-medium text-foreground underline underline-offset-4"
>Sign in</a
>
</p>
</div>
</div>Product
A product card with a cover photo, rating, price, and add to cart action.
<div class="card relative">
<img
src="https://images.unsplash.com/photo-1578500494198-246f612d3b3d?rect=0,0,4896,3264&w=640&h=427&fit=crop&auto=format&q=100"
alt="Vintage leather sofa"
class="aspect-3/2 w-full object-cover"
/><span class="badge absolute top-3 left-3">Sale</span>
<div class="card-header">
<span class="text-xs font-medium tracking-tight text-muted-foreground"
>Furniture</span
>
<h3 class="card-title">Vintage Leather Sofa</h3>
<p class="card-description">
Full-grain aniline leather sofa with a sturdy oak hardwood frame and a
soft, lived-in feel.
</p>
</div>
<div class="card-content flex items-center gap-2">
<div class="flex gap-1">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-primary"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-primary"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-primary"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-primary"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-muted"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path>
</svg>
</div>
<span class="text-sm text-muted-foreground">(128)</span>
</div>
<div class="card-footer justify-between">
<div class="flex items-baseline gap-2">
<span class="text-lg font-bold">$899</span
><span class="text-sm text-muted-foreground line-through">$1,099</span>
</div>
<button class="btn btn-sm">
Add to Cart<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="icon-end"
stroke="currentColor"
stroke-width="0.5"
>
<path
d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>Blog Post
An article preview with a cover image, title, and author.
<div class="card">
<img
src="https://images.unsplash.com/photo-1592765213254-f101ad9b8f76?rect=0,0,3000,2000&w=640&h=427&fit=crop&auto=format&q=100"
alt="White blossoms in muted warm tones"
class="aspect-3/2 w-full object-cover"
/>
<div class="card-header">
<span
class="flex items-center gap-1.5 text-xs font-medium tracking-tight text-muted-foreground"
><span>Mar 15, 2024</span><span>·</span><span>Design</span></span
>
<h3 class="card-title">Finding Color Palettes in Nature</h3>
<p class="card-description">
How muted, organic tones from the natural world can ground the color
system of your next project.
</p>
</div>
<div class="card-footer gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="Leila Navarro"
/><span class="avatar-fallback">LN</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Leila Navarro</p>
<p class="text-muted-foreground">Product Designer</p>
</div>
</div>
</div>Share Document
A share dialog with a copyable link and per-person access levels.
<div class="card">
<div class="card-header">
<h3 class="card-title">Share Document</h3>
<p class="card-description">
Invite others to view or edit this document and work together seamlessly.
</p>
</div>
<div class="card-content flex flex-col gap-6">
<div class="flex gap-2">
<input
class="input flex-1"
type="text"
readonly=""
aria-label="Document link"
value="https://example.com/doc/abc123"
/><button class="btn btn-outline btn-icon" aria-label="Copy link">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div class="separator"></div>
<span class="text-sm font-medium">People with access</span>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="Leila Navarro"
/><span class="avatar-fallback">LN</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Leila Navarro</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select class="select h-8 w-22" aria-label="Permission for Leila Navarro">
<option value="write">Write</option>
<option value="read">Read</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="Theo Marchetti"
/><span class="avatar-fallback">TM</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Theo Marchetti</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Theo Marchetti"
>
<option value="read">Read</option>
<option value="write">Write</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="Maya Santoso"
/><span class="avatar-fallback">MS</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Camille Laurent</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Camille Laurent"
>
<option value="read">Read</option>
<option value="write">Write</option>
</select>
</div>
</div>
</div>Payment Method
A payment method picker built from radio choice cards.
<div class="card">
<div class="card-header">
<h3 class="card-title">Payment Method</h3>
<p class="card-description">
Choose how you'd like to pay for your order.
</p>
</div>
<div
class="card-content grid grid-cols-3 gap-3"
role="radiogroup"
aria-label="Payment method"
>
<label class="label"
><div class="field items-center gap-2 text-center">
<input
type="radio"
class="sr-only"
name="payment"
checked=""
value="card"
/><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
d="M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z"
></path></svg
><span class="text-sm font-medium">Card</span>
</div></label
><label class="label"
><div class="field items-center gap-2 text-center">
<input type="radio" class="sr-only" name="payment" value="paypal" /><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"
></path></svg
><span class="text-sm font-medium">PayPal</span>
</div></label
><label class="label"
><div class="field items-center gap-2 text-center">
<input type="radio" class="sr-only" name="payment" value="apple" /><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
></path></svg
><span class="text-sm font-medium">Apple</span>
</div></label
>
</div>
<form class="card-content field-group">
<div class="field">
<label class="label" for="pay-name">Cardholder Name</label
><input
class="input"
id="pay-name"
type="text"
placeholder="John Doe"
name="cardholder-name"
/>
</div>
<div class="field">
<label class="label" for="pay-number">Card Number</label
><input
class="input"
id="pay-number"
type="text"
placeholder="1234 5678 9012 3456"
name="card-number"
/>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="field">
<label class="label" for="pay-month">Month</label
><input
class="input"
id="pay-month"
type="text"
placeholder="MM"
name="month"
/>
</div>
<div class="field">
<label class="label" for="pay-year">Year</label
><input
class="input"
id="pay-year"
type="text"
placeholder="YY"
name="year"
/>
</div>
<div class="field">
<label class="label" for="pay-cvv">CVV</label
><input
class="input"
id="pay-cvv"
type="text"
placeholder="123"
name="cvv"
/>
</div>
</div>
<button class="btn" type="submit">Continue</button>
</form>
</div>Notifications
Notification preferences with descriptive switch rows.
<div class="card">
<div class="card-header">
<h3 class="card-title">Notifications</h3>
<p class="card-description">Choose how you want to be notified.</p>
</div>
<div class="card-content field-group gap-5">
<div class="field field-horizontal">
<div class="field-content">
<label class="label" for="notif-email">Email notifications</label>
<p class="field-description">Receive updates and alerts via email.</p>
</div>
<input
type="checkbox"
role="switch"
class="switch"
id="notif-email"
name="notif-email"
checked=""
/>
</div>
<div class="field field-horizontal">
<div class="field-content">
<label class="label" for="notif-push">Push notifications</label>
<p class="field-description">
Get instant alerts on your mobile device.
</p>
</div>
<input
type="checkbox"
role="switch"
class="switch"
id="notif-push"
name="notif-push"
/>
</div>
<div class="field field-horizontal">
<div class="field-content">
<label class="label" for="notif-marketing">Marketing emails</label>
<p class="field-description">
Stay informed about new features and offers.
</p>
</div>
<input
type="checkbox"
role="switch"
class="switch"
id="notif-marketing"
name="notif-marketing"
/>
</div>
</div>
<div class="card-footer">
<button class="btn w-full">Save preferences</button>
</div>
</div>Feedback
A feedback form with a type select, title input, and message textarea.
<div class="card">
<div class="card-header">
<h3 class="card-title">Submit Feedback</h3>
<p class="card-description">Share your thoughts to help us improve.</p>
</div>
<form class="card-content field-group">
<div class="field">
<label class="label" for="fb-title">Title</label
><input
class="input"
id="fb-title"
type="text"
placeholder="Feedback title"
name="title"
/>
</div>
<div class="field">
<label class="label" for="fb-type">Type</label
><select class="select" id="fb-type" name="type">
<option value="">Select type</option>
<option value="suggestion">Suggestion</option>
<option value="complaint">Complaint</option>
<option value="praise">Praise</option>
</select>
</div>
<div class="field">
<label class="label" for="fb-description">Description</label
><textarea
class="textarea"
id="fb-description"
name="description"
placeholder="Tell us more..."
></textarea>
</div>
<div class="flex justify-end gap-2">
<button class="btn btn-outline" type="button">Cancel</button
><button class="btn" type="submit">Submit</button>
</div>
</form>
</div>Premium Plan
A pricing card with a feature list and upgrade action.
<div class="card">
<div class="card-header"><h3 class="card-title">Premium Plan</h3></div>
<div class="card-content flex flex-col gap-6">
<div>
<span class="text-4xl font-bold sm:text-5xl">$29</span
><span class="ml-1 text-muted-foreground">/ month</span>
</div>
<p class="text-sm/6 text-muted-foreground">
Everything you need to scale your project and collaborate with your entire
team.
</p>
<div class="separator"></div>
<ul class="grid gap-4 text-sm">
<li class="flex items-center text-muted-foreground">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-4 size-4 text-primary"
>
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
><span>Up to 10 team members</span>
</li>
<li class="flex items-center text-muted-foreground">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-4 size-4 text-primary"
>
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
><span>50GB cloud storage</span>
</li>
<li class="flex items-center text-muted-foreground">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-4 size-4 text-primary"
>
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
><span>Priority email support</span>
</li>
<li class="flex items-center text-muted-foreground">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-4 size-4 text-primary"
>
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
><span>Advanced analytics dashboard</span>
</li>
<li class="flex items-center text-muted-foreground">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-4 size-4 text-primary"
>
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path></svg
><span>API access</span>
</li>
</ul>
</div>
<div class="card-footer">
<button class="btn btn-lg w-full">Buy Now</button>
</div>
</div>Profile
A profile card with a photo, bio, follower stats, and a follow action.
<div class="card">
<div class="card-content">
<img
src="https://images.unsplash.com/photo-1604573824303-d0177f69461f?rect=0,0,4000,4000&w=640&h=640&fit=crop&auto=format&q=100"
alt="Vivienne Kleinfeld"
class="aspect-square w-full rounded-xl object-cover"
/>
</div>
<div class="card-header">
<h3 class="card-title">Vivienne Kleinfeld</h3>
<p class="card-description">
Product Designer who focuses on simplicity & usability. Currently
designing at Acme Inc.
</p>
</div>
<div class="card-footer gap-6">
<div class="leading-tight">
<p class="text-sm font-semibold tabular-nums">312</p>
<p class="text-xs text-muted-foreground">Followers</p>
</div>
<div class="leading-tight">
<p class="text-sm font-semibold tabular-nums">48</p>
<p class="text-xs text-muted-foreground">Following</p>
</div>
<button class="btn btn-sm ml-auto">
Follow<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="icon-end"
stroke="currentColor"
stroke-width="0.5"
>
<path
d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>Testimonial
A testimonial with a star rating and reviewer details.
<div class="card">
<div class="card-content flex flex-col gap-6">
<div class="flex gap-1">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-primary"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-primary"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-primary"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-primary"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path></svg
><svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-4.5 text-primary"
>
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
></path>
</svg>
</div>
<p class="text-sm/6 text-muted-foreground">
Starting Point UI has transformed how we build interfaces. The components
are beautifully designed and easy to customize.
</p>
</div>
<div class="card-footer gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="Leila Navarro"
/><span class="avatar-fallback">LN</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Leila Navarro</p>
<p class="text-muted-foreground">Product Designer</p>
</div>
</div>
</div>Music Player
A now playing card with track progress and transport controls.
<div class="card">
<img
src="https://images.unsplash.com/photo-1605084198811-7a358b91dc15?rect=0,0,4000,4000&w=640&h=640&fit=crop&auto=format&q=100"
alt="Album cover"
class="aspect-square w-full object-cover"
/>
<div class="card-header text-center">
<h3 class="card-title">Midnight Dreams</h3>
<p class="card-description">Luna Eclipse</p>
</div>
<div class="card-content grid gap-2">
<progress
class="progress"
value="83"
max="225"
aria-label="Playback position"
></progress>
<div class="flex justify-between text-xs text-muted-foreground">
<span>1:23</span><span>3:45</span>
</div>
</div>
<div class="card-footer justify-center gap-4">
<button class="btn btn-ghost btn-icon" aria-label="Shuffle">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.3536 1.14645C12.1583 0.951184 11.8417 0.951184 11.6464 1.14645C11.4512 1.34171 11.4512 1.65829 11.6464 1.85355L12.7929 3H12C10.7037 3 9.71111 3.58423 8.87248 4.38931C8.20065 5.03427 7.59349 5.85684 6.99461 6.6682C6.86287 6.84668 6.73154 7.02462 6.6 7.2C5.10874 9.18835 3.49037 11 0.5 11C0.223858 11 0 11.2239 0 11.5C0 11.7761 0.223858 12 0.5 12C4.00963 12 5.89126 9.81165 7.4 7.8C7.54367 7.60845 7.6832 7.41962 7.81996 7.23454L7.82005 7.23443L7.82006 7.23441C8.41674 6.42695 8.96069 5.69085 9.56502 5.11069C10.2889 4.41577 11.0463 4 12 4H12.7929L11.6464 5.14645C11.4512 5.34171 11.4512 5.65829 11.6464 5.85355C11.8417 6.04882 12.1583 6.04882 12.3536 5.85355L14.3536 3.85355C14.5488 3.65829 14.5488 3.34171 14.3536 3.14645L12.3536 1.14645ZM0.5 3C3.35278 3 5.12992 4.44588 6.50548 6.06746L6.3762 6.24266C6.2483 6.4161 6.12293 6.58609 6 6.75C5.96397 6.79804 5.92798 6.84581 5.892 6.89331C4.57348 5.29306 3.02637 4 0.5 4C0.223858 4 0 3.77614 0 3.5C0 3.22386 0.223858 3 0.5 3ZM8.87248 10.6107C8.37284 10.131 7.90897 9.55314 7.45767 8.95468C7.64688 8.71693 7.82704 8.48061 8 8.25L8.08987 8.12987C8.58412 8.79402 9.05288 9.39766 9.56502 9.88931C10.2889 10.5842 11.0463 11 12 11H12.7929L11.6464 9.85355C11.4512 9.65829 11.4512 9.34171 11.6464 9.14645C11.8417 8.95118 12.1583 8.95118 12.3536 9.14645L14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536C11.4512 13.6583 11.4512 13.3417 11.6464 13.1464L12.7929 12H12C10.7037 12 9.71111 11.4158 8.87248 10.6107Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg></button
><button class="btn btn-ghost btn-icon" aria-label="Previous track">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.94976 2.74989C1.94976 2.44613 2.196 2.19989 2.49976 2.19989C2.80351 2.19989 3.04976 2.44613 3.04976 2.74989V7.2825C3.0954 7.18802 3.17046 7.10851 3.26662 7.05776L12.2666 2.30776C12.4216 2.22596 12.6081 2.23127 12.7582 2.32176C12.9083 2.41225 13 2.57471 13 2.74995V12.25C13 12.4252 12.9083 12.5877 12.7582 12.6781C12.6081 12.7686 12.4216 12.7739 12.2666 12.6921L3.26662 7.94214C3.17046 7.89139 3.0954 7.81188 3.04976 7.7174V12.2499C3.04976 12.5536 2.80351 12.7999 2.49976 12.7999C2.196 12.7999 1.94976 12.5536 1.94976 12.2499V2.74989ZM4.57122 7.49995L12 11.4207V3.5792L4.57122 7.49995Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg></button
><button class="btn btn-icon rounded-full" aria-label="Pause">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.04995 2.74998C6.04995 2.44623 5.80371 2.19998 5.49995 2.19998C5.19619 2.19998 4.94995 2.44623 4.94995 2.74998V12.25C4.94995 12.5537 5.19619 12.8 5.49995 12.8C5.80371 12.8 6.04995 12.5537 6.04995 12.25V2.74998ZM10.05 2.74998C10.05 2.44623 9.80371 2.19998 9.49995 2.19998C9.19619 2.19998 8.94995 2.44623 8.94995 2.74998V12.25C8.94995 12.5537 9.19619 12.8 9.49995 12.8C9.80371 12.8 10.05 12.5537 10.05 12.25V2.74998Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg></button
><button class="btn btn-ghost btn-icon" aria-label="Next track">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.0502 2.74989C13.0502 2.44613 12.804 2.19989 12.5002 2.19989C12.1965 2.19989 11.9502 2.44613 11.9502 2.74989V7.2825C11.9046 7.18802 11.8295 7.10851 11.7334 7.05776L2.73338 2.30776C2.5784 2.22596 2.3919 2.23127 2.24182 2.32176C2.09175 2.41225 2 2.57471 2 2.74995V12.25C2 12.4252 2.09175 12.5877 2.24182 12.6781C2.3919 12.7686 2.5784 12.7739 2.73338 12.6921L11.7334 7.94214C11.8295 7.89139 11.9046 7.81188 11.9502 7.7174V12.2499C11.9502 12.5536 12.1965 12.7999 12.5002 12.7999C12.804 12.7999 13.0502 12.5536 13.0502 12.2499V2.74989ZM3 11.4207V3.5792L10.4288 7.49995L3 11.4207Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg></button
><button class="btn btn-ghost btn-icon" aria-label="Repeat">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.35355 1.85355C3.54882 1.65829 3.54882 1.34171 3.35355 1.14645C3.15829 0.951184 2.84171 0.951184 2.64645 1.14645L0.646447 3.14645C0.451184 3.34171 0.451184 3.65829 0.646447 3.85355L2.64645 5.85355C2.84171 6.04882 3.15829 6.04882 3.35355 5.85355C3.54882 5.65829 3.54882 5.34171 3.35355 5.14645L2.20711 4H9.5C11.433 4 13 5.567 13 7.5C13 7.77614 13.2239 8 13.5 8C13.7761 8 14 7.77614 14 7.5C14 5.01472 11.9853 3 9.5 3H2.20711L3.35355 1.85355ZM2 7.5C2 7.22386 1.77614 7 1.5 7C1.22386 7 1 7.22386 1 7.5C1 9.98528 3.01472 12 5.5 12H12.7929L11.6464 13.1464C11.4512 13.3417 11.4512 13.6583 11.6464 13.8536C11.8417 14.0488 12.1583 14.0488 12.3536 13.8536L14.3536 11.8536C14.5488 11.6583 14.5488 11.3417 14.3536 11.1464L12.3536 9.14645C12.1583 8.95118 11.8417 8.95118 11.6464 9.14645C11.4512 9.34171 11.4512 9.65829 11.6464 9.85355L12.7929 11H5.5C3.567 11 2 9.433 2 7.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>Shopping Cart
A cart summary with product thumbnails, quantities, a subtotal, and a checkout action.
<div class="card">
<div class="card-header">
<div class="card-title">Shopping Cart</div>
<div class="card-description">You have 3 items in your cart.</div>
<div class="card-action -mr-2.5">
<button type="button" class="btn btn-ghost btn-sm">Clear</button>
</div>
</div>
<div class="card-content flex flex-col gap-6">
<div class="flex gap-4">
<div class="size-20 shrink-0 overflow-hidden rounded-md border">
<img
src="https://images.unsplash.com/photo-1578500494198-246f612d3b3d?rect=220,0,3264,3264&w=640&h=640&fit=crop&auto=format&q=100"
alt="Vintage Leather Sofa"
class="size-full object-cover"
/>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="flex items-start justify-between gap-3">
<h3 class="truncate text-sm font-medium">Vintage Leather Sofa</h3>
<button
type="button"
class="btn btn-ghost btn-icon -mt-1.5 -mr-1.5 size-6 text-muted-foreground"
aria-label="Remove Vintage Leather Sofa"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-3.5"
>
<path
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<p class="mt-1 truncate text-xs text-muted-foreground">
Full-grain aniline
</p>
<div class="mt-auto flex items-center justify-between">
<div class="btn-group rounded-md bg-muted">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Decrease quantity of Vintage Leather Sofa"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-3"
>
<path
d="M2.25 7.5C2.25 7.22386 2.47386 7 2.75 7H12.25C12.5261 7 12.75 7.22386 12.75 7.5C12.75 7.77614 12.5261 8 12.25 8H2.75C2.47386 8 2.25 7.77614 2.25 7.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
<div
class="btn-group-text border-0 bg-transparent px-2 text-xs shadow-none tabular-nums"
>
1
</div>
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Increase quantity of Vintage Leather Sofa"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-3"
>
<path
d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<p class="text-sm font-medium tabular-nums">
<span
class="mr-1.5 text-xs font-normal text-muted-foreground line-through"
>$1,099</span
>$899
</p>
</div>
</div>
</div>
<div class="flex gap-4">
<div class="size-20 shrink-0 overflow-hidden rounded-md border">
<img
src="https://images.unsplash.com/photo-1571139627661-cf707929f465?rect=0,57,2592,2592&w=640&h=640&fit=crop&auto=format&q=100"
alt="Cable Knit Sweater"
class="size-full object-cover"
/>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="flex items-start justify-between gap-3">
<h3 class="truncate text-sm font-medium">Cable Knit Sweater</h3>
<button
type="button"
class="btn btn-ghost btn-icon -mt-1.5 -mr-1.5 size-6 text-muted-foreground"
aria-label="Remove Cable Knit Sweater"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-3.5"
>
<path
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<p class="mt-1 truncate text-xs text-muted-foreground">
Cream · Size S
</p>
<div class="mt-auto flex items-center justify-between">
<div class="btn-group rounded-md bg-muted">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Decrease quantity of Cable Knit Sweater"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-3"
>
<path
d="M2.25 7.5C2.25 7.22386 2.47386 7 2.75 7H12.25C12.5261 7 12.75 7.22386 12.75 7.5C12.75 7.77614 12.5261 8 12.25 8H2.75C2.47386 8 2.25 7.77614 2.25 7.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
<div
class="btn-group-text border-0 bg-transparent px-2 text-xs shadow-none tabular-nums"
>
1
</div>
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Increase quantity of Cable Knit Sweater"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-3"
>
<path
d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<p class="text-sm font-medium tabular-nums">$79</p>
</div>
</div>
</div>
<div class="flex gap-4">
<div class="size-20 shrink-0 overflow-hidden rounded-md border">
<img
src="https://images.unsplash.com/photo-1710954962775-c46bd6a5f67f?rect=0,0,3072,3072&w=640&h=640&fit=crop&auto=format&q=100"
alt="Oversized Cotton Tee"
class="size-full object-cover"
/>
</div>
<div class="flex min-w-0 flex-1 flex-col">
<div class="flex items-start justify-between gap-3">
<h3 class="truncate text-sm font-medium">Oversized Cotton Tee</h3>
<button
type="button"
class="btn btn-ghost btn-icon -mt-1.5 -mr-1.5 size-6 text-muted-foreground"
aria-label="Remove Oversized Cotton Tee"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-3.5"
>
<path
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<p class="mt-1 truncate text-xs text-muted-foreground">
Sand · Size M · $29 each
</p>
<div class="mt-auto flex items-center justify-between">
<div class="btn-group rounded-md bg-muted">
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Decrease quantity of Oversized Cotton Tee"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-3"
>
<path
d="M2.25 7.5C2.25 7.22386 2.47386 7 2.75 7H12.25C12.5261 7 12.75 7.22386 12.75 7.5C12.75 7.77614 12.5261 8 12.25 8H2.75C2.47386 8 2.25 7.77614 2.25 7.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
<div
class="btn-group-text border-0 bg-transparent px-2 text-xs shadow-none tabular-nums"
>
2
</div>
<button
type="button"
class="btn btn-ghost btn-xs btn-icon"
aria-label="Increase quantity of Oversized Cotton Tee"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-3"
>
<path
d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<p class="text-sm font-medium tabular-nums">$58</p>
</div>
</div>
</div>
</div>
<div class="card-footer flex-col">
<div class="separator mb-4"></div>
<div class="flex w-full items-center justify-between">
<span class="text-sm text-muted-foreground">Subtotal</span
><span class="text-base font-semibold tabular-nums">$1,036</span>
</div>
<button class="btn mt-4 w-full">Checkout</button>
<p class="mt-3 w-full text-center text-xs text-muted-foreground">
Free shipping & returns on all orders
</p>
</div>
</div>Invoice Paid
A payment confirmation with a success icon and stacked actions.
<div class="card">
<div
class="card-content flex flex-col items-center gap-4 text-center text-balance"
>
<div
class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="size-6"
>
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</div>
<div class="flex max-w-sm flex-col items-center gap-1">
<div class="text-lg font-medium tracking-tight">Invoice paid</div>
<div class="text-sm/relaxed text-muted-foreground">
You paid $17,975.30. A receipt copy was sent to [email protected].
</div>
</div>
<div class="flex w-full flex-col gap-3">
<button type="button" class="btn w-full">Next invoice</button
><button type="button" class="btn btn-outline w-full">Done</button>
</div>
</div>
</div>Attendance
Nested radio and checkbox options where selecting Private disables the sub-options with CSS alone.
<div class="card">
<div class="card-header">
<div class="card-title">Attendance</div>
<div class="card-description">Choose who can attend your event.</div>
</div>
<div class="card-content">
<div
class="group/att field-group gap-4"
role="radiogroup"
aria-label="Attendance"
>
<div class="field field-horizontal">
<input
type="radio"
class="radio"
id="lg-att-public"
name="lg-attendance"
checked=""
/>
<div class="field-content">
<label class="label" for="lg-att-public">Public</label>
<p class="field-description">
Tickets will be available to the general public.
</p>
<div
class="field-group mt-4 gap-4 transition-opacity group-has-[#lg-att-private:checked]/att:pointer-events-none group-has-[#lg-att-private:checked]/att:opacity-50"
>
<div class="field field-horizontal">
<input
type="checkbox"
class="checkbox"
id="lg-att-inperson"
checked=""
/>
<div class="field-content">
<label class="label" for="lg-att-inperson">In-person</label>
<p class="field-description">
Attendees will be at the event in person.
</p>
</div>
</div>
<div class="field field-horizontal">
<input type="checkbox" class="checkbox" id="lg-att-online" />
<div class="field-content">
<label class="label" for="lg-att-online">Online</label>
<p class="field-description">
Attendees will only be able to view the event online.
</p>
</div>
</div>
<div class="field field-horizontal">
<input type="checkbox" class="checkbox" id="lg-att-recorded" />
<div class="field-content">
<label class="label" for="lg-att-recorded">Recorded</label>
<p class="field-description">
A recording will be available after the event.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="field field-horizontal">
<input
type="radio"
class="radio"
id="lg-att-private"
name="lg-attendance"
/>
<div class="field-content">
<label class="label" for="lg-att-private">Private</label>
<p class="field-description">
Tickets are not available to the general public.
</p>
</div>
</div>
</div>
</div>
</div>