diff --git a/packages/components/src/lib/ui/card/Card.svelte b/packages/components/src/lib/ui/card/Card.svelte
new file mode 100644
index 0000000..88576d9
--- /dev/null
+++ b/packages/components/src/lib/ui/card/Card.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		"rounded-lg border bg-card text-card-foreground shadow-sm",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:focusin
+	on:focusout
+	on:mouseenter
+	on:mouseleave
+>
+	<slot />
+</div>
diff --git a/packages/components/src/lib/ui/card/CardContent.svelte b/packages/components/src/lib/ui/card/CardContent.svelte
new file mode 100644
index 0000000..9dcf30b
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardContent.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/packages/components/src/lib/ui/card/CardDescription.svelte b/packages/components/src/lib/ui/card/CardDescription.svelte
new file mode 100644
index 0000000..81dc138
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardDescription.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</p>
diff --git a/packages/components/src/lib/ui/card/CardFooter.svelte b/packages/components/src/lib/ui/card/CardFooter.svelte
new file mode 100644
index 0000000..d46c7f0
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardFooter.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/packages/components/src/lib/ui/card/CardHeader.svelte b/packages/components/src/lib/ui/card/CardHeader.svelte
new file mode 100644
index 0000000..9cd2ab1
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardHeader.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/packages/components/src/lib/ui/card/CardTitle.svelte b/packages/components/src/lib/ui/card/CardTitle.svelte
new file mode 100644
index 0000000..0b122e0
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardTitle.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	export let tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h3";
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/packages/components/src/lib/ui/card/index.ts b/packages/components/src/lib/ui/card/index.ts
new file mode 100644
index 0000000..738a0ad
--- /dev/null
+++ b/packages/components/src/lib/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.svelte";
+export { default as CardContent } from "./CardContent.svelte";
+export { default as CardDescription } from "./CardDescription.svelte";
+export { default as CardFooter } from "./CardFooter.svelte";
+export { default as CardHeader } from "./CardHeader.svelte";
+export { default as CardTitle } from "./CardTitle.svelte";