initial production version

src/lib/components/ui/card/card-content.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		children?: any;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<div class={cn('p-6 pt-0', className)} {...restProps}>
+	{@render children?.()}
+</div>

src/lib/components/ui/card/card-description.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLParagraphElement> & {
+		children?: any;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<p class={cn('text-sm text-muted-foreground', className)} {...restProps}>
+	{@render children?.()}
+</p>

src/lib/components/ui/card/card-header.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		children?: any;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...restProps}>
+	{@render children?.()}
+</div>

src/lib/components/ui/card/card-title.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLHeadingElement> & {
+		children?: any;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<h3 class={cn('font-semibold leading-none tracking-tight', className)} {...restProps}>
+	{@render children?.()}
+</h3>

src/lib/components/ui/card/card.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		children?: any;
+	};
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<div
+	class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/card/index.ts

@@ -0,0 +1,19 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+
+export {
+	Root,
+	Content,
+	Description,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Header as CardHeader,
+	Title as CardTitle
+};