diff --git a/src/routes/examples/[component]/+page.svelte b/src/docs/components/DualThemeLayout.svelte
similarity index 67%
rename from src/routes/examples/[component]/+page.svelte
rename to src/docs/components/DualThemeLayout.svelte
index 0bac892..ab1d0e9 100644
--- a/src/routes/examples/[component]/+page.svelte
+++ b/src/docs/components/DualThemeLayout.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
-	import { Theme, DisplayOption } from '$docs/constants.js';
-	import { routes } from '$docs/routes.js';
+	import { DisplayOption, Theme } from '$docs/constants.js';
 	import { Icon } from '$lib/index.js';
 	import { mdiCompare, mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		name: string;
+		component: Snippet<[{ theme: Theme }]>;
+	};
+
+	const { name, component }: Props = $props();
 
 	const themes = [DisplayOption.Both, DisplayOption.Light, DisplayOption.Dark];
 	const themeIcons: Record<DisplayOption, string> = {
@@ -14,8 +21,6 @@
 	let displayOption = $state<DisplayOption>(DisplayOption.Both);
 	let themeIcon = $derived(themeIcons[displayOption]);
 
-	const { data } = $props();
-	const route = $derived(routes.find((route) => route.link === data.link));
 	const displayThemes = $derived<Theme[]>(
 		displayOption === 'both'
 			? [Theme.Light, Theme.Dark]
@@ -47,22 +52,16 @@
 		<div class="flex items-center gap-2">
 			<a href="/" class="underline">Home</a>
 			<span>/</span>
-			<span class="capitalize">{data.component}</span>
+			<span class="capitalize">{name}</span>
 		</div>
 	</nav>
 
-	{#if route}
-		<div class="grid grow grid-cols-1 {displayThemes.length === 2 ? 'md:grid-cols-2' : ''}">
-			{#each displayThemes as theme}
-				<div class="flex flex-col gap-4 {theme} h-full bg-light p-8">
-					<h2 class="text-2xl capitalize text-dark">{theme}</h2>
-					<route.component {theme}></route.component>
-				</div>
-			{/each}
-		</div>
-	{:else}
-		<div class="p-8">
-			<h2 class="text-xl">No examples found for {data.component}</h2>
-		</div>
-	{/if}
+	<div class="grid grow grid-cols-1 {displayThemes.length === 2 ? 'md:grid-cols-2' : ''}">
+		{#each displayThemes as theme}
+			<div class="flex flex-col gap-4 {theme} h-full bg-light p-8">
+				<h2 class="text-2xl capitalize text-dark">{theme}</h2>
+				{@render component({ theme })}
+			</div>
+		{/each}
+	</div>
 </div>
diff --git a/src/docs/constants.ts b/src/docs/constants.ts
index f53cf48..743a928 100644
--- a/src/docs/constants.ts
+++ b/src/docs/constants.ts
@@ -14,3 +14,13 @@ export enum Theme {
 	Light = 'light',
 	Dark = 'dark',
 }
+
+type Route = { name: string; link: string };
+
+export const routes: Route[] = [
+	{ name: 'Button', link: '/examples/button' },
+	{ name: 'Checkbox', link: '/examples/checkbox' },
+	{ name: 'Card', link: '/examples/card' },
+	{ name: 'IconButton', link: '/examples/icon-button' },
+	{ name: 'Logo', link: '/examples/logo' },
+];
diff --git a/src/docs/examples/ButtonExamples.svelte b/src/docs/examples/ButtonExamples.svelte
deleted file mode 100644
index 1b639a4..0000000
--- a/src/docs/examples/ButtonExamples.svelte
+++ /dev/null
@@ -1,122 +0,0 @@
-<script lang="ts">
-	import Button from '$lib/components/Button.svelte';
-	import Card from '$lib/components/Card.svelte';
-	import CardBody from '$lib/components/CardBody.svelte';
-	import CardHeader from '$lib/components/CardHeader.svelte';
-	import CardTitle from '$lib/components/CardTitle.svelte';
-	import type { Color, Shape, Size } from '$lib/types.js';
-
-	const colors: Color[] = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
-	const sizes: Size[] = ['tiny', 'small', 'medium', 'large', 'giant'];
-	const shapes: Shape[] = ['rectangle', 'semi-round', 'round'];
-</script>
-
-<div class="flex flex-col gap-4">
-	<Card>
-		<CardHeader>
-			<CardTitle>Shapes</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each shapes as shape}
-					<Button {shape} class="capitalize">{shape}</Button>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Colors</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<Button {color} class="capitalize">{color}</Button>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Outline</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<Button variant="outline" {color}>Button</Button>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Ghost</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<Button variant="ghost" {color}>Button</Button>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Hero</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<Button variant="hero" {color}>Button</Button>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Disabled</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<Button {color} disabled>Button</Button>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Sizes</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each sizes as size}
-					<div>
-						<Button {size} class="capitalize">{size}</Button>
-					</div>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Full width</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-col gap-4">
-				{#each colors as color}
-					<div>
-						<Button fullWidth {color}>Button</Button>
-					</div>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-</div>
diff --git a/src/docs/examples/CardExamples.svelte b/src/docs/examples/CardExamples.svelte
deleted file mode 100644
index d3cf6db..0000000
--- a/src/docs/examples/CardExamples.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-	import Card from '$lib/components/Card.svelte';
-	import CardBody from '$lib/components/CardBody.svelte';
-	import CardDescription from '$lib/components/CardDescription.svelte';
-	import CardFooter from '$lib/components/CardFooter.svelte';
-	import CardHeader from '$lib/components/CardHeader.svelte';
-	import CardTitle from '$lib/components/CardTitle.svelte';
-</script>
-
-<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>
-		</Card>
-
-		<Card>
-			<CardHeader>
-				<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>
-			</CardBody>
-		</Card>
-
-		<Card>
-			<CardHeader>
-				<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>
-			</CardBody>
-			<CardFooter>Footer goes here</CardFooter>
-		</Card>
-
-		<Card>
-			<CardHeader>
-				<CardTitle>Card with title, description, and footer</CardTitle>
-				<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>
-			</CardBody>
-			<CardFooter>Footer</CardFooter>
-		</Card>
-	</section>
-</div>
diff --git a/src/docs/examples/CheckboxExamples.svelte b/src/docs/examples/CheckboxExamples.svelte
deleted file mode 100644
index 798ea54..0000000
--- a/src/docs/examples/CheckboxExamples.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-	import Checkbox from '$lib/components/Checkbox.svelte';
-	import Card from '$lib/components/Card.svelte';
-	import CardBody from '$lib/components/CardBody.svelte';
-	import CardHeader from '$lib/components/CardHeader.svelte';
-	import CardTitle from '$lib/components/CardTitle.svelte';
-	import type { Color, Shape, Size } from '$lib/types.js';
-
-	const colors: Color[] = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
-	const sizes: Size[] = ['tiny', 'small', 'medium'];
-	const shapes: Shape[] = ['rectangle', 'semi-round', 'round'];
-</script>
-
-<div class="flex flex-col gap-4">
-	<Card>
-		<CardHeader>
-			<CardTitle>Colors</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-col gap-4">
-				{#each colors as color}
-					<div class="flex gap-4">
-						<Checkbox checked {color} />
-						<Checkbox {color} />
-						<Checkbox checked="indeterminate" {color} />
-					</div>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Sizes</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-col gap-4">
-				{#each sizes as size}
-					<div class="flex gap-4">
-						<Checkbox checked {size} />
-						<Checkbox {size} />
-						<Checkbox checked="indeterminate" {size} />
-					</div>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Shapes</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-col gap-4">
-				{#each shapes as shape}
-					<div class="flex gap-4">
-						<Checkbox checked {shape} />
-						<Checkbox {shape} />
-						<Checkbox checked="indeterminate" {shape} />
-					</div>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-</div>
diff --git a/src/docs/examples/Example.svelte b/src/docs/examples/Example.svelte
deleted file mode 100644
index a08b098..0000000
--- a/src/docs/examples/Example.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	type Props = {
-		children: Snippet;
-	};
-
-	const { children }: Props = $props();
-</script>
-
-<h1 class="text-xl">Examples</h1>
-<hr class="my-2" />
-
-{@render children()}
diff --git a/src/docs/examples/IconButtonExamples.svelte b/src/docs/examples/IconButtonExamples.svelte
deleted file mode 100644
index 5cef3ea..0000000
--- a/src/docs/examples/IconButtonExamples.svelte
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts">
-	import { IconButton, Card, CardBody, CardHeader, CardTitle } from '@immich/ui';
-	import type { Color, Shape, Size } from '@immich/ui';
-	import { mdiMagnify } from '@mdi/js';
-
-	const colors: Color[] = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
-	const sizes: Size[] = ['tiny', 'small', 'medium', 'large', 'giant'];
-	const shapes: Shape[] = ['rectangle', 'semi-round', 'round'];
-	const icon = mdiMagnify;
-</script>
-
-<div class="flex flex-col gap-4">
-	<Card>
-		<CardHeader>
-			<CardTitle>Shapes</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each shapes as shape}
-					<IconButton {icon} {shape} />
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Colors</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<IconButton {icon} {color}></IconButton>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Outline</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<IconButton {icon} variant="outline" {color}></IconButton>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Ghost</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<IconButton {icon} variant="ghost" {color}></IconButton>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Hero</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<IconButton {icon} variant="hero" {color}></IconButton>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Disabled</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each colors as color}
-					<IconButton {icon} {color} disabled></IconButton>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Sizes</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="flex flex-wrap gap-4">
-				{#each sizes as size}
-					<div>
-						<IconButton {icon} {size}></IconButton>
-					</div>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-</div>
diff --git a/src/docs/examples/LogoExamples.svelte b/src/docs/examples/LogoExamples.svelte
deleted file mode 100644
index 2b58762..0000000
--- a/src/docs/examples/LogoExamples.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-	import { sizes as defaultSizes } from '$docs/constants.js';
-	import { Card, CardBody, CardHeader, CardTitle, Logo } from '@immich/ui';
-
-	const sizes = [...defaultSizes, 'landing'] as const;
-	type Props = { theme?: 'dark' | 'light' };
-	const { theme = 'dark' }: Props = $props();
-</script>
-
-<div class="flex flex-col gap-4">
-	<Card>
-		<CardHeader>
-			<CardTitle>Logo</CardTitle>
-		</CardHeader>
-		<CardBody>
-			<div class="m-2 flex flex-col gap-2">
-				{#each sizes as size}
-					<div class="flex gap-1 rounded-xl bg-gray-300 p-2 dark:bg-gray-600">
-						<Logo {size} {theme} variant="logo"></Logo>
-						<Logo {size} {theme} variant="logo"></Logo>
-						<Logo {size} {theme} variant="logo"></Logo>
-					</div>
-				{/each}
-			</div>
-		</CardBody>
-	</Card>
-	<Card>
-		<CardHeader>
-			<CardTitle>Icon</CardTitle>
-		</CardHeader>
-		<CardBody>
-			{#each sizes as size}
-				<div>
-					<Logo {size} {theme} variant="icon"></Logo>
-				</div>
-			{/each}
-		</CardBody>
-	</Card>
-	<Card>
-		<CardHeader>
-			<CardTitle>Inline</CardTitle>
-		</CardHeader>
-		<CardBody>
-			{#each sizes as size}
-				<div>
-					<Logo {size} {theme} variant="inline"></Logo>
-				</div>
-			{/each}
-		</CardBody>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle>Stacked</CardTitle>
-		</CardHeader>
-		<CardBody>
-			{#each sizes as size}
-				<div>
-					<Logo {size} {theme} variant="stacked"></Logo>
-				</div>
-			{/each}
-		</CardBody>
-	</Card>
-</div>
diff --git a/src/docs/routes.ts b/src/docs/routes.ts
deleted file mode 100644
index 7a44e0f..0000000
--- a/src/docs/routes.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import ButtonExamples from '$docs/examples/ButtonExamples.svelte';
-import CardExamples from '$docs/examples/CardExamples.svelte';
-import CheckboxExamples from '$docs/examples/CheckboxExamples.svelte';
-import LogoExamples from '$docs/examples/LogoExamples.svelte';
-import IconButtonExamples from '$docs/examples/IconButtonExamples.svelte';
-import type { Component } from 'svelte';
-
-type Route = {
-	name: string;
-	link: string;
-	component: Component | Component<{ theme?: 'light' | 'dark' }>;
-};
-
-export const routes: Route[] = [
-	{ name: 'Button', link: '/examples/button', component: ButtonExamples },
-	{ name: 'Checkbox', link: '/examples/checkbox', component: CheckboxExamples },
-	{ name: 'Card', link: '/examples/card', component: CardExamples },
-	{ name: 'IconButton', link: '/examples/icon-button', component: IconButtonExamples },
-	{ name: 'Logo', link: '/examples/logo', component: LogoExamples },
-];
diff --git a/src/lib/components/Checkbox.svelte b/src/lib/components/Checkbox.svelte
index 4793937..23334d8 100644
--- a/src/lib/components/Checkbox.svelte
+++ b/src/lib/components/Checkbox.svelte
@@ -40,30 +40,17 @@
 			},
 			size: {
 				tiny: 'size-4',
-				small: 'size-6',
-				medium: 'size-8',
-				large: 'size-16',
-				giant: 'size-32',
+				small: 'size-5',
+				medium: 'size-6',
+				large: 'size-8',
+				giant: 'size-10',
 			},
-		},
-		compoundVariants: [
-			//
-			{ size: 'tiny', shape: 'semi-round', class: 'rounded' },
-			{ size: 'small', shape: 'semi-round', class: 'rounded-md' },
-			{ size: 'large', shape: 'semi-round', class: 'rounded-xl' },
-			{ size: 'giant', shape: 'semi-round', class: 'rounded-2xl' },
-		],
-	});
-
-	const parent = tv({
-		base: 'flex items-center justify-center text-current',
-		variants: {
-			size: {
-				tiny: 'size-4',
-				small: 'size-6',
-				medium: 'size-8',
-				large: 'size-16',
-				giant: 'size-32',
+			roundedSize: {
+				tiny: 'rounded-md',
+				small: 'rounded-md',
+				medium: 'rounded-md',
+				large: 'rounded-lg',
+				giant: 'rounded-xl',
 			},
 		},
 	});
@@ -87,12 +74,15 @@
 
 <CheckboxPrimitive.Root
 	bind:ref
-	class={cleanClass(container({ size, color, shape }), className)}
+	class={cleanClass(
+		container({ size, color, shape, roundedSize: shape === 'semi-round' ? size : undefined }),
+		className,
+	)}
 	bind:checked
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<div class={parent({ size })}>
+		<div class={cleanClass('flex items-center justify-center text-current')}>
 			{#if checked === true}
 				<Icon path={mdiCheck} size="100%" class={cleanClass(icon({ color }))} />
 			{:else if checked === 'indeterminate'}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2c6afd5..042752a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { routes } from '$docs/routes.js';
+	import { routes } from '$docs/constants.js';
 </script>
 
 <main>
diff --git a/src/routes/examples/[component]/+page.ts b/src/routes/examples/[component]/+page.ts
deleted file mode 100644
index 1e1b350..0000000
--- a/src/routes/examples/[component]/+page.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { PageLoad } from './$types.js';
-
-export const load = (({ params, url }) => {
-	return {
-		component: params.component,
-		link: url.pathname,
-	};
-}) satisfies PageLoad;
diff --git a/src/routes/examples/button/+page.svelte b/src/routes/examples/button/+page.svelte
new file mode 100644
index 0000000..07eaa5f
--- /dev/null
+++ b/src/routes/examples/button/+page.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
+	import { colors, shapes, sizes } from '$docs/constants.js';
+	import { Button, Card, CardBody, CardHeader, CardTitle } from '@immich/ui';
+</script>
+
+<DualThemeLayout name="Button">
+	{#snippet component()}
+		<div class="flex flex-col gap-4">
+			<Card>
+				<CardHeader>
+					<CardTitle>Shapes</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each shapes as shape}
+							<Button {shape} class="capitalize">{shape}</Button>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Colors</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<Button {color} class="capitalize">{color}</Button>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Outline</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<Button variant="outline" {color}>Button</Button>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Ghost</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<Button variant="ghost" {color}>Button</Button>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Hero</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<Button variant="hero" {color}>Button</Button>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Disabled</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<Button {color} disabled>Button</Button>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Sizes</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each sizes as size}
+							<div>
+								<Button {size} class="capitalize">{size}</Button>
+							</div>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Full width</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-col gap-4">
+						{#each colors as color}
+							<div>
+								<Button fullWidth {color}>Button</Button>
+							</div>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+		</div>
+	{/snippet}
+</DualThemeLayout>
diff --git a/src/routes/examples/card/+page.svelte b/src/routes/examples/card/+page.svelte
new file mode 100644
index 0000000..f6d717f
--- /dev/null
+++ b/src/routes/examples/card/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
+	import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from '@immich/ui';
+</script>
+
+<DualThemeLayout name="Card">
+	{#snippet component()}
+		<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>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<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>
+					</CardBody>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<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>
+					</CardBody>
+					<CardFooter>Footer goes here</CardFooter>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Card with title, description, and footer</CardTitle>
+						<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>
+					</CardBody>
+					<CardFooter>Footer</CardFooter>
+				</Card>
+			</section>
+		</div>
+	{/snippet}
+</DualThemeLayout>
diff --git a/src/routes/examples/checkbox/+page.svelte b/src/routes/examples/checkbox/+page.svelte
new file mode 100644
index 0000000..77770fb
--- /dev/null
+++ b/src/routes/examples/checkbox/+page.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
+	import { colors, shapes, sizes } from '$docs/constants.js';
+	import { Card, CardBody, CardHeader, CardTitle, Checkbox } from '@immich/ui';
+</script>
+
+<DualThemeLayout name="Checkbox">
+	{#snippet component()}
+		<div class="flex flex-col gap-4">
+			<Card>
+				<CardHeader>
+					<CardTitle>Colors</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-col gap-4">
+						{#each colors as color}
+							<div class="flex gap-4">
+								<Checkbox checked {color} />
+								<Checkbox {color} />
+								<Checkbox checked="indeterminate" {color} />
+							</div>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Sizes</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-col gap-4">
+						{#each sizes as size}
+							<div class="flex gap-4">
+								<Checkbox checked {size} />
+								<Checkbox {size} />
+								<Checkbox checked="indeterminate" {size} />
+							</div>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Shapes</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-col gap-4">
+						{#each shapes as shape}
+							<div class="flex gap-4">
+								<Checkbox checked {shape} />
+								<Checkbox {shape} />
+								<Checkbox checked="indeterminate" {shape} />
+							</div>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+		</div>
+	{/snippet}
+</DualThemeLayout>
diff --git a/src/routes/examples/icon-button/+page.svelte b/src/routes/examples/icon-button/+page.svelte
new file mode 100644
index 0000000..e4e177f
--- /dev/null
+++ b/src/routes/examples/icon-button/+page.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
+	import { colors, shapes, sizes } from '$docs/constants.js';
+	import { Card, CardBody, CardHeader, CardTitle, IconButton } from '@immich/ui';
+	import { mdiMagnify } from '@mdi/js';
+
+	const icon = mdiMagnify;
+</script>
+
+<DualThemeLayout name="IconButton">
+	{#snippet component()}
+		<div class="flex flex-col gap-4">
+			<Card>
+				<CardHeader>
+					<CardTitle>Shapes</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each shapes as shape}
+							<IconButton {icon} {shape} />
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Colors</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<IconButton {icon} {color}></IconButton>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Outline</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<IconButton {icon} variant="outline" {color}></IconButton>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Ghost</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<IconButton {icon} variant="ghost" {color}></IconButton>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Hero</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<IconButton {icon} variant="hero" {color}></IconButton>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Disabled</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each colors as color}
+							<IconButton {icon} {color} disabled></IconButton>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Sizes</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="flex flex-wrap gap-4">
+						{#each sizes as size}
+							<div>
+								<IconButton {icon} {size}></IconButton>
+							</div>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+		</div>
+	{/snippet}
+</DualThemeLayout>
diff --git a/src/routes/examples/logo/+page.svelte b/src/routes/examples/logo/+page.svelte
new file mode 100644
index 0000000..2548e90
--- /dev/null
+++ b/src/routes/examples/logo/+page.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
+	import { sizes } from '$docs/constants.js';
+	import { Card, CardBody, CardHeader, CardTitle, Logo } from '@immich/ui';
+</script>
+
+<DualThemeLayout name="Button">
+	{#snippet component({ theme })}
+		<div class="flex flex-col gap-4">
+			<Card>
+				<CardHeader>
+					<CardTitle>Logo</CardTitle>
+				</CardHeader>
+				<CardBody>
+					<div class="m-2 flex flex-col gap-2">
+						{#each sizes as size}
+							<div class="flex gap-1 rounded-xl bg-gray-300 p-2 dark:bg-gray-600">
+								<Logo {size} {theme} variant="logo"></Logo>
+								<Logo {size} {theme} variant="logo"></Logo>
+								<Logo {size} {theme} variant="logo"></Logo>
+							</div>
+						{/each}
+					</div>
+				</CardBody>
+			</Card>
+			<Card>
+				<CardHeader>
+					<CardTitle>Icon</CardTitle>
+				</CardHeader>
+				<CardBody>
+					{#each sizes as size}
+						<div>
+							<Logo {size} {theme} variant="icon"></Logo>
+						</div>
+					{/each}
+				</CardBody>
+			</Card>
+			<Card>
+				<CardHeader>
+					<CardTitle>Inline</CardTitle>
+				</CardHeader>
+				<CardBody>
+					{#each sizes as size}
+						<div>
+							<Logo {size} {theme} variant="inline"></Logo>
+						</div>
+					{/each}
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Stacked</CardTitle>
+				</CardHeader>
+				<CardBody>
+					{#each sizes as size}
+						<div>
+							<Logo {size} {theme} variant="stacked"></Logo>
+						</div>
+					{/each}
+				</CardBody>
+			</Card>
+		</div>
+	{/snippet}
+</DualThemeLayout>