diff --git a/.changeset/whole-beans-hide.md b/.changeset/whole-beans-hide.md
new file mode 100644
index 00000000..565c58e5
--- /dev/null
+++ b/.changeset/whole-beans-hide.md
@@ -0,0 +1,5 @@
+---
+"@ainsleydev/sveltekit-helper": minor
+---
+
+Adding notification components
diff --git a/packages/sveltekit-helper/package.json b/packages/sveltekit-helper/package.json
index 2e805652..69d9e43a 100644
--- a/packages/sveltekit-helper/package.json
+++ b/packages/sveltekit-helper/package.json
@@ -38,6 +38,11 @@
 			"svelte": "./dist/components/payload/index.js",
 			"default": "./dist/components/payload/index.js"
 		},
+		"./components/notifications": {
+			"types": "./dist/components/notifications/index.d.ts",
+			"svelte": "./dist/components/notifications/index.js",
+			"default": "./dist/components/notifications/index.js"
+		},
 		"./utils/forms": {
 			"types": "./dist/utils/forms/index.d.ts",
 			"import": "./dist/utils/forms/index.js"
@@ -72,7 +77,8 @@
 		}
 	},
 	"dependencies": {
-		"svelte-hamburgers": "^5.0.0"
+		"svelte-hamburgers": "^5.0.0",
+		"@lucide/svelte": "^0.562.0"
 	},
 	"devDependencies": {
 		"@ainsleydev/eslint-config": "workspace:*",
diff --git a/packages/sveltekit-helper/src/components/Grid/Column.svelte b/packages/sveltekit-helper/src/components/Grid/Column.svelte
index 3f0240e8..4f77a344 100644
--- a/packages/sveltekit-helper/src/components/Grid/Column.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Column.svelte
@@ -15,6 +15,10 @@ const { ...restProps } = $props();
 		Content
 	</Column>
 	```
+
+	CSS Custom Properties:
+	- `--col-gap`: Horizontal padding on desktop (default: 1rem)
+	- `--col-gap-mobile`: Horizontal padding on mobile (default: var(--col-gap, 0.5rem))
 -->
 <div class="col" {...restProps}>
 	<slot />
diff --git a/packages/sveltekit-helper/src/components/Grid/Container.svelte b/packages/sveltekit-helper/src/components/Grid/Container.svelte
index d4679403..bdf572d0 100644
--- a/packages/sveltekit-helper/src/components/Grid/Container.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Container.svelte
@@ -7,6 +7,28 @@ const { ...restProps } = $props();
 
 	Centre content such as rows & columns horizontally with predefined max-width.
 	Uses CSS Grid to provide breakout and full-width layout options.
+
+	@example
+	```svelte
+	<Container>
+		<Row>
+			<Column class="col-12">Content</Column>
+		</Row>
+	</Container>
+	```
+
+	@example
+	```svelte
+	<Container>
+		<div class="breakout">Full breakout content</div>
+		<div class="full-width">Full width content</div>
+	</Container>
+	```
+
+	CSS Custom Properties:
+	- `--container-max-width`: Maximum content width (default: 1328px)
+	- `--container-breakout-max-width`: Maximum breakout width (default: 1500px)
+	- `--container-padding`: Horizontal padding (default: 1rem)
 -->
 <div class="container" {...restProps}>
 	<slot />
diff --git a/packages/sveltekit-helper/src/components/Grid/Row.svelte b/packages/sveltekit-helper/src/components/Grid/Row.svelte
index cdeb558b..2b53f0ea 100644
--- a/packages/sveltekit-helper/src/components/Grid/Row.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Row.svelte
@@ -26,6 +26,10 @@ const { noGaps = false, ...restProps }: RowProps = $props();
 		<Column></Column>
 	</Row>
 	```
+
+	CSS Custom Properties:
+	- `--row-gap`: Gap between columns (default: 1rem)
+	- `--row-gap-mobile`: Gap on mobile screens (default: var(--row-gap, 0.5rem))
 -->
 <div class="row" class:row--no-gaps={noGaps} {...restProps}>
 	<slot />
diff --git a/packages/sveltekit-helper/src/components/Hamburger.svelte b/packages/sveltekit-helper/src/components/Hamburger.svelte
index b63874bc..cee65c41 100644
--- a/packages/sveltekit-helper/src/components/Hamburger.svelte
+++ b/packages/sveltekit-helper/src/components/Hamburger.svelte
@@ -40,6 +40,15 @@ export type HamburgerProps = {
 	```svelte
 	<Hamburger gap="1rem">
 	```
+
+	CSS Custom Properties:
+	- `--hamburger-gap`: Distance from top and right edges (default: 0.8rem)
+	- `--hamburger-z-index`: Stacking order (default: 10000)
+	- `--hamburger-colour`: Icon color (default: var(--colour-base-light))
+	- `--hamburger-layer-width`: Width of each line (default: 24px)
+	- `--hamburger-layer-height`: Height of each line (default: 2px)
+	- `--hamburger-layer-spacing`: Gap between lines (default: 5px)
+	- `--hamburger-border-radius`: Rounding of lines (default: 2px)
 -->
 <div class="hamburger-wrapper {className}" style="--hamburger-gap: {gap}" aria-label="Toggle Menu">
 	<SvelteHamburger
diff --git a/packages/sveltekit-helper/src/components/Sidebar.svelte b/packages/sveltekit-helper/src/components/Sidebar.svelte
index 1c815331..5baf6819 100644
--- a/packages/sveltekit-helper/src/components/Sidebar.svelte
+++ b/packages/sveltekit-helper/src/components/Sidebar.svelte
@@ -135,6 +135,21 @@ export type SidebarProps = {
 		<nav>...</nav>
 	</Sidebar>
 	```
+
+	CSS Custom Properties:
+	- `--sidebar-width`: Mobile sidebar width (default: 50vw)
+	- `--sidebar-min-width`: Minimum sidebar width (default: 270px)
+	- `--sidebar-top`: Desktop sticky position from top (default: 160px)
+	- `--sidebar-overlay-opacity`: Overlay opacity when open (default: 0.3)
+	- `--sidebar-background`: Sidebar background color (default: var(--colour-base-black))
+	- `--sidebar-border-colour`: Border color (default: rgba(255, 255, 255, 0.1))
+	- `--sidebar-overlay-colour`: Overlay background color (default: var(--colour-grey-900))
+	- `--sidebar-inner-padding`: Content padding (default: 2rem 1.8rem 0 1.8rem)
+	- `--sidebar-toggle-background`: Toggle button background (default: var(--colour-base-black))
+	- `--sidebar-toggle-colour`: Toggle button text color (default: var(--colour-base-light))
+	- `--sidebar-toggle-padding`: Toggle button padding (default: 0.25rem 1.5rem)
+	- `--sidebar-toggle-radius`: Toggle button border radius (default: 0.375rem)
+	- `--sidebar-toggle-font-size`: Toggle button font size (default: 0.9rem)
 -->
 <aside
 	class="sidebar sidebar--{toggleStyle} sidebar--{position} {className}"
diff --git a/packages/sveltekit-helper/src/components/index.ts b/packages/sveltekit-helper/src/components/index.ts
index e9ec2b0b..29060bb5 100644
--- a/packages/sveltekit-helper/src/components/index.ts
+++ b/packages/sveltekit-helper/src/components/index.ts
@@ -1,2 +1,4 @@
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as Hamburger } from './Hamburger.svelte';
+export { Alert, Notice } from './notifications';
+export type { AlertProps, AlertType, NoticeProps, NoticeType } from './notifications';
diff --git a/packages/sveltekit-helper/src/components/notifications/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
new file mode 100644
index 00000000..b289e747
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
@@ -0,0 +1,167 @@
+<script lang="ts" module>
+import type { Icon as IconType } from '@lucide/svelte';
+import type { Snippet } from 'svelte';
+
+export type AlertType = 'info' | 'warning' | 'success' | 'error';
+
+export type AlertProps = {
+	type?: AlertType;
+	title?: string;
+	children?: Snippet;
+	visible?: boolean;
+	dismiss?: boolean;
+	icon?: typeof IconType;
+};
+</script>
+
+<script lang="ts">
+	import { X } from '@lucide/svelte'
+	import { fade } from 'svelte/transition'
+
+	import { alertIcons } from './alertIcons.js'
+
+	let {
+		type = 'info',
+		title = '',
+		children,
+		visible = $bindable(true),
+		dismiss = false,
+		icon: customIcon,
+		...restProps
+	}: AlertProps = $props()
+
+	const iconDetail = $derived(alertIcons[type])
+	const Icon = $derived(customIcon || iconDetail.icon)
+	const hide = () => (visible = false)
+	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite')
+</script>
+
+<!--
+	@component
+
+	Full-width alert component for displaying important messages with optional body text.
+	Supports title, children content, and custom icons with dismissible functionality.
+
+	@example
+	```svelte
+	<Alert type="info" title="New features available">
+		Check out the latest updates in your dashboard.
+	</Alert>
+
+	<Alert type="warning" title="Maintenance scheduled" dismiss />
+
+	<Alert type="error" title="Payment failed" dismiss>
+		Your card was declined. Please update your payment method.
+	</Alert>
+	```
+
+	CSS Custom Properties:
+	- `--_alert-gap`: Gap between icon and content (default: 12px)
+	- `--_alert-padding`: Internal padding (default: 24px)
+	- `--_alert-border-radius`: Border radius (default: 6px)
+	- `--_alert-bg`: Background color (default: rgba(255, 255, 255, 0.02))
+	- `--_alert-content-gap`: Gap between title and text (default: 8px)
+	- `--_alert-title-font-weight`: Title font weight (default: var(--font-weight-semibold))
+	- `--_alert-title-colour`: Title text color (default: rgba(255, 255, 255, 1))
+	- `--_alert-text-line-height`: Text line height (default: 1.4)
+	- `--_alert-text-colour`: Text color (default: rgba(255, 255, 255, 50%))
+	- `--_alert-icon-colour`: Icon color (set automatically based on type)
+-->
+{#if visible}
+	<div
+		class="alert alert--{type}"
+		role="alert"
+		aria-live={ariaLive}
+		aria-atomic="true"
+		style="--_alert-icon-colour: {iconDetail.colour}"
+		transition:fade={{ duration: 300 }}
+		{...restProps}
+	>
+		<!-- Icon -->
+		<figure class="alert__icon">
+			<Icon size={24} color={iconDetail.colour} strokeWidth={1.2}></Icon>
+		</figure>
+		<!-- Content -->
+		<div class="alert__content">
+			{#if title}
+				<p class="alert__title">
+					{title}
+				</p>
+			{/if}
+			{#if children}
+				<p class="alert__text">
+					{@render children()}
+				</p>
+			{/if}
+		</div>
+		<!-- Dismiss -->
+		{#if dismiss}
+			<button class="alert__dismiss" onclick={hide} aria-label="Close Alert">
+				<X size={24} color={iconDetail.colour} />
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style lang="scss">
+	@use '../../scss' as a;
+
+	.alert {
+		$self: &;
+
+		position: relative;
+		display: flex;
+		gap: var(--_alert-gap, a.$size-12);
+		width: 100%;
+		border-radius: var(--_alert-border-radius, 6px);
+		padding: var(--_alert-padding, a.$size-24);
+		background-color: var(--_alert-bg, rgba(255, 255, 255, 0.02));
+
+		&__icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 0;
+			flex-shrink: 0;
+		}
+
+		&__content {
+			display: grid;
+			gap: var(--_alert-content-gap, a.$size-8);
+		}
+
+		&__title {
+			font-weight: var(--_alert-title-font-weight, var(--font-weight-semibold));
+			margin: 0;
+			line-height: 1;
+			color: var(--_alert-title-colour, rgba(255, 255, 255, 1));
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		&__text {
+			margin: 0;
+			line-height: var(--_alert-text-line-height, 1.4);
+			color: var(--_alert-text-colour, rgba(255, 255, 255, 50%));
+		}
+
+		&__dismiss {
+			cursor: pointer;
+			margin-left: auto;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: none;
+			border: none;
+			padding: 0;
+			color: var(--_alert-icon-colour);
+		}
+
+		:global(svg) {
+			min-width: 1.4rem;
+			min-height: 1.4rem;
+		}
+	}
+</style>
diff --git a/packages/sveltekit-helper/src/components/notifications/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
new file mode 100644
index 00000000..6ba41baa
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
@@ -0,0 +1,133 @@
+<script lang="ts" module>
+import type { Icon as IconType } from '@lucide/svelte';
+
+export type NoticeType = 'info' | 'warning' | 'success' | 'error';
+
+export type NoticeProps = {
+	type?: NoticeType;
+	title: string;
+	visible?: boolean;
+	dismiss?: boolean;
+	icon?: typeof IconType;
+};
+</script>
+
+<script lang="ts">
+	import { X } from '@lucide/svelte'
+	import { fade } from 'svelte/transition'
+
+	import { alertIcons } from './alertIcons'
+
+	let {
+		type = 'info',
+		title = '',
+		visible = $bindable(true),
+		dismiss = false,
+		icon: customIcon,
+		...restProps
+	}: NoticeProps = $props()
+
+	const iconDetail = $derived(alertIcons[type])
+	const Icon = $derived(customIcon || iconDetail.icon)
+	const hide = () => (visible = false)
+	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite')
+</script>
+
+<!--
+	@component
+
+	Inline notification component for displaying brief messages with icons.
+	Compact design suitable for inline alerts, badges, or status indicators.
+
+	@example
+	```svelte
+	<Notice type="success" title="Upload complete" />
+	<Notice type="warning" title="Session expiring" dismiss />
+	<Notice type="error" title="Connection failed" icon={CustomIcon} />
+	```
+
+	CSS Custom Properties:
+	- `--_notice-gap`: Gap between icon and title (default: 12px)
+	- `--_notice-padding`: Internal padding (default: 0.8rem 12px)
+	- `--_notice-border-radius`: Border radius (default: 6px)
+	- `--_notice-bg`: Background color (default: rgba(255, 255, 255, 0.025))
+	- `--_notice-font-size`: Title font size (default: 1rem)
+	- `--_notice-title-colour`: Title text color (default: rgba(255, 255, 255, 1))
+	- `--_notice-icon-colour`: Icon color (set automatically based on type)
+-->
+{#if visible}
+	<div
+		class="notice notice--{type}"
+		role="alert"
+		aria-live={ariaLive}
+		aria-atomic="true"
+		style="--_notice-icon-colour: {iconDetail.colour}"
+		transition:fade={{ duration: 300 }}
+		{...restProps}
+	>
+		<!-- Icon -->
+		<figure class="notice__icon">
+			<Icon size={20} color={iconDetail.colour} strokeWidth={1.2}></Icon>
+		</figure>
+		<!-- Title -->
+		<p class="notice__title">
+			{title}
+		</p>
+		<!-- Dismiss -->
+		{#if dismiss}
+			<button class="notice__dismiss" onclick={hide} aria-label="Close Notice">
+				<X size={20} color={iconDetail.colour} />
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style lang="scss">
+	@use '../../scss' as a;
+
+	.notice {
+		$self: &;
+
+		position: relative;
+		display: inline-flex;
+		width: auto;
+		gap: var(--_notice-gap, a.$size-12);
+		padding: var(--_notice-padding, 0.8rem a.$size-12);
+		border-radius: var(--_notice-border-radius, a.$border-radius-6);
+		background-color: var(--_notice-bg, rgba(255, 255, 255, 0.025));
+		align-items: center;
+
+		&__icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 0;
+			flex-shrink: 0;
+		}
+
+		&__title {
+			margin: 0;
+			font-size: var(--_notice-font-size, 1rem);
+			font-weight: var(--font-weight-medium);
+			color: var(--_notice-title-colour, rgba(255, 255, 255, 1));
+			line-height: 1;
+		}
+
+		&__dismiss {
+			cursor: pointer;
+			margin-left: auto;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: none;
+			border: none;
+			padding: 0;
+			color: var(--_notice-icon-colour);
+		}
+
+		:global(svg) {
+			min-width: 1.4rem;
+			min-height: 1.4rem;
+		}
+	}
+</style>
diff --git a/packages/sveltekit-helper/src/components/notifications/alertIcons.ts b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
new file mode 100644
index 00000000..0ee817b7
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
@@ -0,0 +1,24 @@
+import { CircleCheck, CircleX, type Icon as IconType, Info, TriangleAlert } from '@lucide/svelte';
+
+/**
+ * Notification type variants
+ */
+type NotificationType = 'info' | 'warning' | 'success' | 'error';
+
+/**
+ * Icon configuration for notification types
+ */
+type IconDetail = {
+	icon: typeof IconType;
+	colour: string;
+};
+
+/**
+ * Icon mapping for notification types
+ */
+export const alertIcons: Record<NotificationType, IconDetail> = {
+	info: { icon: Info, colour: 'var(--colour-semantic-info)' },
+	success: { icon: CircleCheck, colour: 'var(--colour-semantic-success)' },
+	warning: { icon: TriangleAlert, colour: 'var(--colour-semantic-warning)' },
+	error: { icon: CircleX, colour: 'var(--colour-semantic-error)' },
+};
diff --git a/packages/sveltekit-helper/src/components/notifications/index.ts b/packages/sveltekit-helper/src/components/notifications/index.ts
new file mode 100644
index 00000000..e841ddda
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/notifications/index.ts
@@ -0,0 +1,4 @@
+export { default as Alert } from './Alert.svelte';
+export { default as Notice } from './Notice.svelte';
+export type { AlertProps, AlertType } from './Alert.svelte';
+export type { NoticeProps, NoticeType } from './Notice.svelte';
diff --git a/packages/sveltekit-helper/src/scss/_border-radius.scss b/packages/sveltekit-helper/src/scss/_border-radius.scss
new file mode 100644
index 00000000..05b2d2f9
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_border-radius.scss
@@ -0,0 +1,21 @@
+@use 'sass:map';
+
+$border-radius-2: 2px;
+$border-radius-4: 4px;
+$border-radius-6: 6px;
+$border-radius-8: 8px;
+$border-radius-12: 12px;
+$border-radius-16: 16px;
+$border-radius-32: 32px;
+$border-radius-full: 9999999px;
+
+$border-radius: (
+	'2': $border-radius-2,
+	'4': $border-radius-4,
+	'6': $border-radius-6,
+	'8': $border-radius-8,
+	'12': $border-radius-12,
+	'16': $border-radius-16,
+	'32': $border-radius-32,
+	'full': $border-radius-full,
+);
diff --git a/packages/sveltekit-helper/src/scss/_breakpoints.scss b/packages/sveltekit-helper/src/scss/_breakpoints.scss
new file mode 100644
index 00000000..08125240
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_breakpoints.scss
@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+$breakpoints: (
+	'small': 320,
+	'mobile': 568,
+	'tablet': 768,
+	'desktop': 1024,
+	'wide': 1280,
+	'ultrawide': 1920,
+);
diff --git a/packages/sveltekit-helper/src/scss/_functions.scss b/packages/sveltekit-helper/src/scss/_functions.scss
new file mode 100644
index 00000000..4b0bf07a
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_functions.scss
@@ -0,0 +1,6 @@
+@use 'sass:math';
+
+@function px-to-rem($value) {
+	$remValue: math.div($value, 16) + rem;
+	@return $remValue;
+}
diff --git a/packages/sveltekit-helper/src/scss/_index.scss b/packages/sveltekit-helper/src/scss/_index.scss
new file mode 100644
index 00000000..578ba5a3
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_index.scss
@@ -0,0 +1,5 @@
+@forward 'breakpoints';
+@forward 'border-radius';
+@forward 'functions';
+@forward 'sizes';
+@forward 'mixins';
diff --git a/packages/sveltekit-helper/src/scss/_mixins.scss b/packages/sveltekit-helper/src/scss/_mixins.scss
new file mode 100644
index 00000000..eeb45fc3
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_mixins.scss
@@ -0,0 +1,155 @@
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:map';
+@use 'breakpoints';
+
+// Media Queries
+// ==========================================================================
+
+@mixin mq($size) {
+	@if map.has-key(breakpoints.$breakpoints, $size) {
+		$breakpoint: map.get(breakpoints.$breakpoints, $size);
+		@media screen and (min-width: $breakpoint * 1px) {
+			@content;
+		}
+	} @else if meta.type-of($size) == number {
+		@if math.is-unitless($size) {
+			@error 'When using a number with @mq() make sure to include a unit';
+		} @else {
+			@media screen and (min-width: $size) {
+				@content;
+			}
+		}
+	} @else {
+		@error 'The keyword #{$size} is not in the $breakpoints map';
+	}
+}
+
+@mixin mq-max($size) {
+	@if map.has-key(breakpoints.$breakpoints, $size) {
+		$breakpoint: map.get(breakpoints.$breakpoints, $size);
+		@media screen and (max-width: $breakpoint * 1px) {
+			@content;
+		}
+	} @else if meta.type-of($size) == number {
+		@if math.is-unitless($size) {
+			@error 'When using a number with @mq() make sure to include a unit';
+		} @else {
+			@media screen and (max-width: $size) {
+				@content;
+			}
+		}
+	} @else {
+		@error 'The keyword #{$size} is not in the $breakpoints map';
+	}
+}
+
+@mixin media-small-phones {
+	@media (width <= 350px) {
+		@content;
+	}
+}
+
+//// Pixel to REM Converter
+//// ==========================================================================
+//
+//// @author Ainsley Clark
+//// @param {Number} $pxValue - Pixel amount to convert
+//// @param {String} $property [font-size] - Property to convert
+//// @param {Number} $standard-size - Initial base rem size
+//@mixin px-to-rem($pxValue, $property: 'font-size', $standard-size: 16) {
+//	#{$property}: $pxValue + px;
+//	#{$property}: $pxValue / å $standard-size + rem;
+//}
+
+// Type
+// ==========================================================================
+
+@mixin ellipsis($lines) {
+	display: -webkit-box;
+	-webkit-line-clamp: $lines;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+@function strip-unit($value) {
+	@return math.div($value, $value * 0 + 1);
+}
+
+// Usage:
+// @include fluid-type(34px, 98px);
+@mixin fluid-type($min-font-size, $max-font-size) {
+	$u1: math.unit($type-fluid-start-size);
+	$u2: math.unit($type-fluid-end-size);
+	$u3: math.unit($min-font-size);
+	$u4: math.unit($max-font-size);
+
+	@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+		& {
+			font-size: $min-font-size;
+
+			@media screen and (min-width: $type-fluid-start-size) {
+				font-size: calc(
+					#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
+						(
+							(100vw - #{$type-fluid-start-size}) /
+								#{strip-unit($type-fluid-end-size - $type-fluid-start-size)}
+						)
+				);
+			}
+
+			@media screen and (min-width: $type-fluid-end-size) {
+				font-size: $max-font-size;
+			}
+		}
+	}
+}
+
+// Landscape Mixin
+// ==========================================================================
+
+@mixin landscape {
+	@media screen and (orientation: landscape) {
+		@content;
+	}
+}
+
+// Browser
+// ==========================================================================
+
+@mixin ie11 {
+	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+		@content;
+	}
+}
+
+@mixin ie11andedge {
+	// stylelint-disable-next-line media-feature-name-no-unknown
+	@media screen and (min-device-pixel-ratio: 0) and (-ms-high-contrast: none),
+		(-ms-high-contrast: active) {
+		@content;
+	}
+}
+
+@mixin firefox {
+	// stylelint-disable-next-line media-feature-name-no-unknown
+	@media screen and (min-device-pixel-ratio: 0) and (resolution >= 0.001dpcm) {
+		@content;
+	}
+}
+
+@mixin safari {
+	@media not all and (resolution >= 0.001dpcm) {
+		@supports (-webkit-appearance: none) {
+			@content;
+		}
+	}
+}
+
+// Full Height
+// ==========================================================================
+
+@mixin full-height {
+	height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
+	height: 100svh;
+}
diff --git a/packages/sveltekit-helper/src/scss/_sizes.scss b/packages/sveltekit-helper/src/scss/_sizes.scss
new file mode 100644
index 00000000..31904cdf
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_sizes.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use 'functions' as f;
+
+$size-2: f.px-to-rem(2);
+$size-4: f.px-to-rem(4);
+$size-8: f.px-to-rem(8);
+$size-12: f.px-to-rem(12);
+$size-16: f.px-to-rem(16);
+$size-24: f.px-to-rem(24);
+$size-32: f.px-to-rem(32);
+$size-40: f.px-to-rem(40);
+$size-48: f.px-to-rem(48);
+
+$sizes: (
+	'0': 0,
+	'2': $size-2,
+	'4': $size-4,
+	'8': $size-8,
+	'12': $size-12,
+	'16': $size-16,
+	'24': $size-24,
+	'32': $size-32,
+	'40': $size-40,
+	'48': $size-48,
+);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49c83d10..de38618d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -249,6 +249,9 @@ importers:
 
   packages/sveltekit-helper:
     dependencies:
+      '@lucide/svelte':
+        specifier: ^0.562.0
+        version: 0.562.0(svelte@5.43.6)
       svelte-hamburgers:
         specifier: ^5.0.0
         version: 5.0.0(svelte@5.43.6)
@@ -1727,6 +1730,11 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@lucide/svelte@0.562.0':
+    resolution: {integrity: sha512-wDMULwtTFN2Sc/TFBm6gfuVCNb4Y5P9LDrwxNnUbV52+IEU7NXZmvxwXoz+vrrpad6Xupq+Hw5eUlqIHEGhouw==}
+    peerDependencies:
+      svelte: ^5
+
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -8787,6 +8795,10 @@ snapshots:
   '@libsql/win32-x64-msvc@0.4.7':
     optional: true
 
+  '@lucide/svelte@0.562.0(svelte@5.43.6)':
+    dependencies:
+      svelte: 5.43.6
+
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.28.4