diff --git a/package-lock.json b/package-lock.json
index 621c331..47fa9c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
 			"dependencies": {
 				"@mdi/js": "^7.4.47",
 				"bits-ui": "^1.0.0-next.46",
+				"tailwind-merge": "^2.5.4",
 				"tailwind-variants": "^0.3.0"
 			},
 			"devDependencies": {
diff --git a/package.json b/package.json
index 2d02448..b601c35 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
 	"dependencies": {
 		"@mdi/js": "^7.4.47",
 		"bits-ui": "^1.0.0-next.46",
+		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.3.0"
 	}
 }
diff --git a/src/docs/components/Lorem.svelte b/src/docs/components/Lorem.svelte
new file mode 100644
index 0000000..ead253f
--- /dev/null
+++ b/src/docs/components/Lorem.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	type Props = { count?: number };
+	const { count = 1 }: Props = $props();
+</script>
+
+{#each Array(count) as i}
+	<p data-index={i}>
+		Lorem ipsum dolor sit amet consectetur adipisicing elit. A ipsam tenetur accusantium impedit
+		beatae omnis necessitatibus. Voluptatum blanditiis libero impedit, harum eius inventore nihil,
+		officia voluptate dolorum error consequatur animi.
+	</p>
+{/each}
diff --git a/src/lib/common/use-context.svelte.ts b/src/lib/common/use-context.svelte.ts
new file mode 100644
index 0000000..1679904
--- /dev/null
+++ b/src/lib/common/use-context.svelte.ts
@@ -0,0 +1,23 @@
+import { ContextKey } from '$lib/constants.js';
+import { withPrefix } from '$lib/utils.js';
+import { setContext, type Snippet } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+
+export const withChildrenSnippets = (key: ContextKey) => {
+	const map = $state(new SvelteMap<ContextKey, Snippet>());
+
+	setContext(withPrefix(key), {
+		register: async (child: ContextKey, snippet: Snippet) => {
+			if (map.has(child)) {
+				console.warn(`Snippet with key ${child} already exists in the context`);
+				return;
+			}
+
+			map.set(child, snippet);
+		},
+	});
+
+	return {
+		getChildren: (key: ContextKey) => map.get(key),
+	};
+};
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button/Button.svelte
similarity index 100%
rename from src/lib/components/Button.svelte
rename to src/lib/components/Button/Button.svelte
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
deleted file mode 100644
index 347b255..0000000
--- a/src/lib/components/Card.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cleanClass } from '$lib/utils.js';
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>;
-
-	let { ref = $bindable(null), class: className, children, ...restProps }: Props = $props();
-</script>
-
-<div
-	bind:this={ref}
-	class={cleanClass(
-		'rounded-2xl border border-gray-300 bg-light text-dark shadow-sm dark:border-gray-600',
-		className,
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte
new file mode 100644
index 0000000..dec9d82
--- /dev/null
+++ b/src/lib/components/Card/Card.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+	import { withChildrenSnippets } from '$lib/common/use-context.svelte.js';
+	import { ContextKey } from '$lib/constants.js';
+	import type { Color, Shape } from '$lib/types.js';
+	import { cleanClass } from '$lib/utils.js';
+	import { IconButton } from '@immich/ui';
+	import { mdiChevronDown } from '@mdi/js';
+	import { type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { tv } from 'tailwind-variants';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		color?: Color;
+		shape?: Shape;
+		variant?: 'filled' | 'outline';
+		expandable?: boolean;
+		children: Snippet;
+	};
+
+	let {
+		color = 'secondary',
+		class: className,
+		expandable = false,
+		variant,
+		children,
+		...restProps
+	}: Props = $props();
+
+	const cardStyles = tv({
+		base: 'rounded-2xl bg-light text-dark shadow-sm dark:border-gray-600 w-full overflow-hidden',
+		variants: {
+			defaultStyle: {
+				true: 'border border-gray-300 dark:border-gray-600',
+				false: '',
+				default: '',
+			},
+			outlineColor: {
+				primary: 'border border-primary',
+				secondary: 'border border-gray-300 dark:border-gray-600',
+				success: 'border border-success',
+				danger: 'border border-danger',
+				warning: 'border border-warning',
+				info: 'border border-info',
+			},
+		},
+	});
+
+	const iconColor = tv({
+		variants: {
+			filledColor: {
+				primary: 'text-light',
+				secondary: 'text-light',
+				success: 'text-light',
+				danger: 'text-light',
+				warning: 'text-light',
+				info: 'text-light',
+			},
+			outlineColor: {
+				primary: 'text-primary',
+				secondary: 'text-dark',
+				success: 'text-success',
+				danger: 'text-danger',
+				warning: 'text-warning',
+				info: 'text-info',
+			},
+		},
+	});
+
+	const headerContainerStyles = tv({
+		variants: {
+			bottomPadding: {
+				true: '',
+				false: 'pb-0',
+			},
+			filledColor: {
+				primary: 'bg-primary text-light rounded-t-xl',
+				secondary: 'bg-dark text-light rounded-t-xl',
+				success: 'bg-success text-light rounded-t-xl',
+				danger: 'bg-danger text-light rounded-t-xl',
+				warning: 'bg-warning text-light rounded-t-xl',
+				info: 'bg-info text-light rounded-t-xl',
+			},
+			outlineColor: {
+				primary: 'text-primary',
+				secondary: 'text-dark',
+				success: 'text-success',
+				danger: 'text-danger',
+				warning: 'text-warning',
+				info: 'text-info',
+			},
+		},
+	});
+
+	let expanded = $state(!expandable);
+	const onToggle = () => {
+		expanded = !expanded;
+	};
+
+	const { getChildren: getChildSnippet } = withChildrenSnippets(ContextKey.Card);
+	const headerChildren = $derived(getChildSnippet(ContextKey.CardHeader));
+	const bodyChildren = $derived(getChildSnippet(ContextKey.CardBody));
+	const footerChildren = $derived(getChildSnippet(ContextKey.CardFooter));
+
+	const headerClasses = 'flex flex-col space-y-1.5';
+	const headerContainerClasses = $derived(
+		cleanClass(
+			headerContainerStyles({
+				bottomPadding: !expanded || !bodyChildren || variant === 'filled' || variant === 'outline',
+				outlineColor: variant === 'outline' ? color : undefined,
+				filledColor: variant === 'filled' ? color : undefined,
+			}),
+		),
+	);
+</script>
+
+{#snippet header()}
+	{#if expandable}
+		<button type="button" onclick={onToggle} class="w-full">
+			<div class={cleanClass(headerContainerClasses, 'flex items-center justify-between px-4')}>
+				<div class={cleanClass(headerClasses, 'py-4')}>
+					{@render headerChildren?.()}
+				</div>
+				<div>
+					<IconButton
+						class={iconColor({
+							filledColor: variant === 'filled' ? color : undefined,
+							outlineColor: variant === 'outline' ? color : undefined,
+						}) as Color}
+						icon={mdiChevronDown}
+						flopped={expanded}
+						variant="ghost"
+						shape="round"
+						size="large"
+					/>
+				</div>
+			</div>
+		</button>
+	{:else}
+		<div class={cleanClass(headerClasses, headerContainerClasses, 'p-4')}>
+			{@render headerChildren?.()}
+		</div>
+	{/if}
+{/snippet}
+
+{#snippet body()}
+	<div class="p-4">
+		{@render bodyChildren?.()}
+	</div>
+{/snippet}
+
+{#snippet footer()}
+	<div class="flex items-center p-4 pt-0">
+		{@render footerChildren?.()}
+	</div>
+{/snippet}
+
+<div
+	class={cleanClass(
+		cardStyles({
+			defaultStyle: variant === undefined,
+			outlineColor: variant === 'outline' || variant === 'filled' ? color : undefined,
+		}),
+		className,
+	)}
+	{...restProps}
+>
+	{#if headerChildren}
+		{@render header()}
+	{/if}
+
+	{#if bodyChildren && expanded}
+		{@render body()}
+	{/if}
+
+	{#if footerChildren}
+		{@render footer()}
+	{/if}
+
+	{@render children()}
+</div>
diff --git a/src/lib/components/Card/CardBody.svelte b/src/lib/components/Card/CardBody.svelte
new file mode 100644
index 0000000..c00b8bc
--- /dev/null
+++ b/src/lib/components/Card/CardBody.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ContextKey } from '$lib/constants.js';
+	import Child from '$lib/internal/Child.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+	};
+
+	let { children }: Props = $props();
+</script>
+
+<Child for={ContextKey.Card} as={ContextKey.CardBody}>
+	{@render children?.()}
+</Child>
diff --git a/src/lib/components/CardDescription.svelte b/src/lib/components/Card/CardDescription.svelte
similarity index 100%
rename from src/lib/components/CardDescription.svelte
rename to src/lib/components/Card/CardDescription.svelte
diff --git a/src/lib/components/Card/CardFooter.svelte b/src/lib/components/Card/CardFooter.svelte
new file mode 100644
index 0000000..30328bf
--- /dev/null
+++ b/src/lib/components/Card/CardFooter.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ContextKey } from '$lib/constants.js';
+	import Child from '$lib/internal/Child.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+	};
+
+	let { children }: Props = $props();
+</script>
+
+<Child for={ContextKey.Card} as={ContextKey.CardFooter}>
+	{@render children?.()}
+</Child>
diff --git a/src/lib/components/Card/CardHeader.svelte b/src/lib/components/Card/CardHeader.svelte
new file mode 100644
index 0000000..904c72d
--- /dev/null
+++ b/src/lib/components/Card/CardHeader.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ContextKey } from '$lib/constants.js';
+	import Child from '$lib/internal/Child.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+	};
+
+	let { children }: Props = $props();
+</script>
+
+<Child for={ContextKey.Card} as={ContextKey.CardHeader}>
+	{@render children?.()}
+</Child>
diff --git a/src/lib/components/CardTitle.svelte b/src/lib/components/Card/CardTitle.svelte
similarity index 100%
rename from src/lib/components/CardTitle.svelte
rename to src/lib/components/Card/CardTitle.svelte
diff --git a/src/lib/components/CardBody.svelte b/src/lib/components/CardBody.svelte
deleted file mode 100644
index b92379b..0000000
--- a/src/lib/components/CardBody.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cleanClass } from '$lib/utils.js';
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div bind:this={ref} class={cleanClass('p-6', className)} {...restProps}>
-	{@render children?.()}
-</div>
diff --git a/src/lib/components/CardFooter.svelte b/src/lib/components/CardFooter.svelte
deleted file mode 100644
index 6c262f3..0000000
--- a/src/lib/components/CardFooter.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cleanClass } from '$lib/utils.js';
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div bind:this={ref} class={cleanClass('flex items-center p-6 pt-0', className)} {...restProps}>
-	{@render children?.()}
-</div>
diff --git a/src/lib/components/CardHeader.svelte b/src/lib/components/CardHeader.svelte
deleted file mode 100644
index 18fa1d2..0000000
--- a/src/lib/components/CardHeader.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { cleanClass } from '$lib/utils.js';
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>;
-
-	let { ref = $bindable(null), class: className, children, ...restProps }: Props = $props();
-</script>
-
-<div
-	bind:this={ref}
-	class={cleanClass('flex flex-col space-y-1.5 rounded-t-lg p-6 pb-0', className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/src/lib/components/Checkbox.svelte b/src/lib/components/Form/Checkbox.svelte
similarity index 97%
rename from src/lib/components/Checkbox.svelte
rename to src/lib/components/Form/Checkbox.svelte
index 23334d8..1ec85f6 100644
--- a/src/lib/components/Checkbox.svelte
+++ b/src/lib/components/Form/Checkbox.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
 	import { mdiCheck, mdiMinus } from '@mdi/js';
-	import Icon from '$lib/components/Icon.svelte';
+	import Icon from '$lib/components/Icon/Icon.svelte';
 	import { tv } from 'tailwind-variants';
 	import type { Color, Shape, Size } from '$lib/types.js';
 	import { cleanClass } from '$lib/utils.js';
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Form/Input.svelte
similarity index 100%
rename from src/lib/components/Input.svelte
rename to src/lib/components/Form/Input.svelte
diff --git a/src/lib/components/Label.svelte b/src/lib/components/Form/Label.svelte
similarity index 100%
rename from src/lib/components/Label.svelte
rename to src/lib/components/Form/Label.svelte
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
deleted file mode 100644
index 9db6fed..0000000
--- a/src/lib/components/Icon.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-	import type { Color } from '$lib/types.js';
-	import { cleanClass } from '$lib/utils.js';
-	import type { AriaRole } from 'svelte/elements';
-
-	type IconProps = {
-		path: string;
-		size?: string;
-		color?: Color | 'currentColor' | string;
-		flipped?: boolean;
-		class?: string;
-		viewBox?: string;
-		role?: AriaRole;
-		title?: string;
-		description?: string;
-		ariaHidden?: boolean;
-		ariaLabel?: string;
-		ariaLabelledby?: string;
-		strokeWidth?: number;
-		strokeColor?: string;
-		spin?: false;
-	};
-
-	const {
-		size = '1em',
-		viewBox = '0 0 24 24',
-		class: className = '',
-		flipped = false,
-		spin = false,
-		role = 'img',
-		ariaLabelledby,
-		strokeColor = 'transparent',
-		strokeWidth = 2,
-		ariaLabel = '',
-		ariaHidden = false,
-		title,
-		path,
-		color = 'currentColor',
-		description,
-	}: IconProps = $props();
-</script>
-
-<svg
-	width={size}
-	height={size}
-	{viewBox}
-	class={cleanClass(className, flipped && '-scale-x-100', spin && 'animate-spin')}
-	{role}
-	stroke={strokeColor}
-	stroke-width={strokeWidth}
-	aria-label={ariaLabel}
-	aria-hidden={ariaHidden}
-	aria-labelledby={ariaLabelledby}
->
-	{#if title}
-		<title>{title}</title>
-	{/if}
-	{#if description}
-		<desc>{description}</desc>
-	{/if}
-	<path d={path} fill={color} />
-</svg>
diff --git a/src/lib/components/Icon/Icon.svelte b/src/lib/components/Icon/Icon.svelte
new file mode 100644
index 0000000..970a814
--- /dev/null
+++ b/src/lib/components/Icon/Icon.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types.js';
+	import { cleanClass } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	const {
+		size = '1em',
+		viewBox = '0 0 24 24',
+		class: className = '',
+		flipped = false,
+		flopped = false,
+		spin = false,
+		strokeColor = 'transparent',
+		strokeWidth = 2,
+		role = 'img',
+		title,
+		icon,
+		color = 'currentColor',
+		description,
+		...restProps
+	}: IconProps & HTMLAttributes<EventTarget> = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	{viewBox}
+	class={cleanClass(
+		className,
+		flipped && '-scale-x-100',
+		flopped && 'rotate-180',
+		spin && 'animate-spin',
+	)}
+	stroke={strokeColor}
+	stroke-width={strokeWidth}
+	{role}
+	{...restProps}
+>
+	{#if title}
+		<title>{title}</title>
+	{/if}
+	{#if description}
+		<desc>{description}</desc>
+	{/if}
+	<path d={icon} fill={color} />
+</svg>
+
+<style>
+	svg {
+		transition: transform 0.2s ease;
+	}
+</style>
diff --git a/src/lib/components/IconButton.svelte b/src/lib/components/IconButton/IconButton.svelte
similarity index 53%
rename from src/lib/components/IconButton.svelte
rename to src/lib/components/IconButton/IconButton.svelte
index 54d0c53..38f3dda 100644
--- a/src/lib/components/IconButton.svelte
+++ b/src/lib/components/IconButton/IconButton.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import InternalButton from '$lib/internal/InternalButton.svelte';
-	import { Icon } from '$lib/components/index.js';
+	import Icon from '$lib/components/Icon/Icon.svelte';
 	import type { IconButtonProps } from '$lib/types.js';
 
-	const { icon, ...buttonProps }: IconButtonProps = $props();
+	const { icon, flipped, flopped, ...buttonProps }: IconButtonProps = $props();
 </script>
 
 <InternalButton icon {...buttonProps}>
-	<Icon path={icon}></Icon>
+	<Icon {icon} {flipped} {flopped} size="66%"></Icon>
 </InternalButton>
diff --git a/src/lib/components/Logo.svelte b/src/lib/components/Logo/Logo.svelte
similarity index 100%
rename from src/lib/components/Logo.svelte
rename to src/lib/components/Logo/Logo.svelte
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
deleted file mode 100644
index f967a29..0000000
--- a/src/lib/components/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export { default as Button } from '$lib/components/Button.svelte';
-export { default as Card } from '$lib/components/Card.svelte';
-export { default as CardBody } from '$lib/components/CardBody.svelte';
-export { default as CardDescription } from '$lib/components/CardDescription.svelte';
-export { default as CardFooter } from '$lib/components/CardFooter.svelte';
-export { default as CardHeader } from '$lib/components/CardHeader.svelte';
-export { default as CardTitle } from '$lib/components/CardTitle.svelte';
-export { default as Checkbox } from '$lib/components/Checkbox.svelte';
-export { default as Icon } from '$lib/components/Icon.svelte';
-export { default as IconButton } from '$lib/components/IconButton.svelte';
-export { default as Input } from '$lib/components/Input.svelte';
-export { default as Label } from '$lib/components/Label.svelte';
-export { default as Logo } from '$lib/components/Logo.svelte';
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..5e3aae0
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,6 @@
+export enum ContextKey {
+	Card = 'card',
+	CardHeader = 'card-header',
+	CardBody = 'card-body',
+	CardFooter = 'card-footer',
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index bb7d297..5e826bb 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,2 +1,14 @@
-export * from '$lib/components/index.js';
+export { default as Button } from '$lib/components/Button/Button.svelte';
+export { default as Card } from '$lib/components/Card/Card.svelte';
+export { default as CardBody } from '$lib/components/Card/CardBody.svelte';
+export { default as CardDescription } from '$lib/components/Card/CardDescription.svelte';
+export { default as CardFooter } from '$lib/components/Card/CardFooter.svelte';
+export { default as CardHeader } from '$lib/components/Card/CardHeader.svelte';
+export { default as CardTitle } from '$lib/components/Card/CardTitle.svelte';
+export { default as Checkbox } from '$lib/components/Form/Checkbox.svelte';
+export { default as Icon } from '$lib/components/Icon/Icon.svelte';
+export { default as IconButton } from '$lib/components/IconButton/IconButton.svelte';
+export { default as Input } from '$lib/components/Form/Input.svelte';
+export { default as Label } from '$lib/components/Form/Label.svelte';
+export { default as Logo } from '$lib/components/Logo/Logo.svelte';
 export * from '$lib/types.js';
diff --git a/src/lib/internal/Child.svelte b/src/lib/internal/Child.svelte
new file mode 100644
index 0000000..439b738
--- /dev/null
+++ b/src/lib/internal/Child.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ContextKey } from '$lib/constants.js';
+	import { withPrefix } from '$lib/utils.js';
+	import { getContext, type Snippet } from 'svelte';
+
+	type ContextType = { register: (key: ContextKey, snippet: Snippet) => void };
+	type Props = {
+		for: ContextKey;
+		as: ContextKey;
+		children: Snippet;
+	};
+
+	const { for: key, as, children }: Props = $props();
+	const context = getContext<ContextType>(withPrefix(key));
+	if (context) {
+		context.register(as, children);
+	} else {
+		console.log('Unable to find context for key:', key);
+	}
+</script>
diff --git a/src/lib/internal/InternalButton.svelte b/src/lib/internal/InternalButton.svelte
index 106266e..03637a4 100644
--- a/src/lib/internal/InternalButton.svelte
+++ b/src/lib/internal/InternalButton.svelte
@@ -3,6 +3,7 @@
 	import { cleanClass } from '$lib/utils.js';
 	import { Button as ButtonPrimitive } from 'bits-ui';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 
 	const buttonVariants = tv({
@@ -95,19 +96,21 @@
 
 	const classList = $derived(
 		cleanClass(
-			buttonVariants({
-				shape,
-				fullWidth,
-				textPadding: icon ? undefined : size,
-				textSize: size,
-				iconSize: icon ? size : undefined,
-				roundedSize: shape === 'semi-round' ? size : undefined,
-				filledColor: variant === 'filled' ? color : undefined,
-				outlineColor: variant === 'outline' ? color : undefined,
-				heroColor: variant === 'hero' ? color : undefined,
-				ghostColor: variant === 'ghost' ? color : undefined,
-			}),
-			className,
+			twMerge(
+				buttonVariants({
+					shape,
+					fullWidth,
+					textPadding: icon ? undefined : size,
+					textSize: size,
+					iconSize: icon ? size : undefined,
+					roundedSize: shape === 'semi-round' ? size : undefined,
+					filledColor: variant === 'filled' ? color : undefined,
+					outlineColor: variant === 'outline' ? color : undefined,
+					heroColor: variant === 'hero' ? color : undefined,
+					ghostColor: variant === 'ghost' ? color : undefined,
+				}),
+				className,
+			),
 		),
 	);
 </script>
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 079dfb2..4e794b6 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -3,6 +3,7 @@ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'giant';
 export type Shape = 'rectangle' | 'semi-round' | 'round';
+export type Variants = 'filled' | 'outline' | 'ghost' | 'hero';
 
 type ButtonOrAnchor =
 	| ({ href?: never } & HTMLButtonAttributes)
@@ -13,13 +14,25 @@ type ButtonBaseProps = {
 	color?: Color;
 	size?: Size;
 	shape?: Shape;
-	variant?: 'filled' | 'outline' | 'ghost' | 'hero';
+	variant?: Variants;
 } & ButtonOrAnchor;
 
-export type IconButtonProps = ButtonBaseProps & {
-	/** icon from `@mdi/js` (svg string) */
+export type IconProps = {
 	icon: string;
+	title?: string;
+	description?: string;
+	size?: string;
+	color?: Color | 'currentColor' | string;
+	flipped?: boolean;
+	flopped?: boolean;
+	spin?: boolean;
+	class?: string;
+	viewBox?: string;
+	strokeWidth?: number;
+	strokeColor?: string;
 };
+
+export type IconButtonProps = ButtonBaseProps & IconProps;
 export type ButtonProps = ButtonBaseProps & { fullWidth?: boolean };
 export type InternalButtonProps = ButtonProps & {
 	/** when true, button width to height ratio is 1:1 */
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 7c42b9d..1ec1c5c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,3 +1,5 @@
+import type { ContextKey } from '$lib/constants.js';
+
 export const cleanClass = (...classNames: unknown[]) => {
 	return classNames
 		.filter((className) => {
@@ -9,3 +11,5 @@ export const cleanClass = (...classNames: unknown[]) => {
 		})
 		.join(' ');
 };
+
+export const withPrefix = (key: ContextKey) => `immich-ui-${key}`;
diff --git a/src/routes/examples/card/+page.svelte b/src/routes/examples/card/+page.svelte
index f6d717f..728bf06 100644
--- a/src/routes/examples/card/+page.svelte
+++ b/src/routes/examples/card/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
+	import Lorem from '$docs/components/Lorem.svelte';
+	import { colors } from '$docs/constants.js';
 	import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from '@immich/ui';
 </script>
 
@@ -8,13 +10,9 @@
 		<div class="flex flex-col gap-4">
 			<section class="flex flex-col gap-4">
 				<Card>
-					<CardBody>
-						<p>
-							Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam maxime illo sequi
-							ipsam possimus rem harum nostrum esse itaque vero blanditiis eius sit ducimus
-							doloremque, omnis, assumenda mollitia officia aliquid.
-						</p>
-					</CardBody>
+					<CardHeader>
+						<CardTitle>Title</CardTitle>
+					</CardHeader>
 				</Card>
 
 				<Card>
@@ -22,11 +20,7 @@
 						<CardTitle>Card with title</CardTitle>
 					</CardHeader>
 					<CardBody>
-						<p>
-							Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam maxime illo sequi
-							ipsam possimus rem harum nostrum esse itaque vero blanditiis eius sit ducimus
-							doloremque, omnis, assumenda mollitia officia aliquid.
-						</p>
+						<Lorem />
 					</CardBody>
 				</Card>
 
@@ -35,11 +29,7 @@
 						<CardTitle>Card with title and footer</CardTitle>
 					</CardHeader>
 					<CardBody>
-						<p>
-							Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam maxime illo sequi
-							ipsam possimus rem harum nostrum esse itaque vero blanditiis eius sit ducimus
-							doloremque, omnis, assumenda mollitia officia aliquid.
-						</p>
+						<Lorem />
 					</CardBody>
 					<CardFooter>Footer goes here</CardFooter>
 				</Card>
@@ -50,14 +40,62 @@
 						<CardDescription>This is the description</CardDescription>
 					</CardHeader>
 					<CardBody>
-						<p>
-							Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam maxime illo sequi
-							ipsam possimus rem harum nostrum esse itaque vero blanditiis eius sit ducimus
-							doloremque, omnis, assumenda mollitia officia aliquid.
-						</p>
+						<Lorem />
 					</CardBody>
 					<CardFooter>Footer</CardFooter>
 				</Card>
+
+				<div class="flex flex-wrap gap-4">
+					{#each colors as color}
+						<Card {color} variant="filled">
+							<CardHeader>
+								<CardTitle class="capitalize">{color}</CardTitle>
+							</CardHeader>
+							<CardBody>
+								<Lorem />
+							</CardBody>
+						</Card>
+					{/each}
+				</div>
+
+				<div class="flex flex-wrap gap-4">
+					{#each colors as color}
+						<Card {color} variant="filled">
+							<CardHeader>
+								<CardTitle class="capitalize">{color}</CardTitle>
+							</CardHeader>
+							<CardBody>
+								<Lorem />
+							</CardBody>
+						</Card>
+					{/each}
+				</div>
+
+				<div class="flex flex-wrap gap-4">
+					{#each colors as color}
+						<Card {color} expandable variant="outline">
+							<CardHeader>
+								<CardTitle class="capitalize">{color}</CardTitle>
+							</CardHeader>
+							<CardBody>
+								<Lorem />
+							</CardBody>
+						</Card>
+					{/each}
+				</div>
+
+				<div class="flex flex-wrap gap-4">
+					{#each colors as color}
+						<Card {color} expandable variant="filled">
+							<CardHeader>
+								<CardTitle class="capitalize">{color}</CardTitle>
+							</CardHeader>
+							<CardBody>
+								<Lorem />
+							</CardBody>
+						</Card>
+					{/each}
+				</div>
 			</section>
 		</div>
 	{/snippet}