diff --git a/package.json b/package.json
index 82d02a2..91d5695 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
 		"@fontsource/geist-mono": "^5.0.3",
 		"@fontsource/geist-sans": "^5.0.3",
 		"@poppanator/sveltekit-svg": "4.2.1",
+		"@pyncz/tailwind-mask-image": "^2.0.0",
 		"@sveltejs/adapter-static": "^3.0.2",
 		"@sveltejs/kit": "^2.5.18",
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 165c468..e1b7b35 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,6 +39,9 @@ importers:
       '@poppanator/sveltekit-svg':
         specifier: 4.2.1
         version: 4.2.1(rollup@4.19.0)(svelte@4.2.18)(svgo@3.3.2)(vite@5.3.4)
+      '@pyncz/tailwind-mask-image':
+        specifier: ^2.0.0
+        version: 2.0.0
       '@sveltejs/adapter-static':
         specifier: ^3.0.2
         version: 3.0.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.4))(svelte@4.2.18)(vite@5.3.4))
@@ -319,6 +322,9 @@ packages:
       svgo: '>=3.x'
       vite: '>=4.x'
 
+  '@pyncz/tailwind-mask-image@2.0.0':
+    resolution: {integrity: sha512-BN52RPSp56VIA25ZpLD3SEigwADTrQ6a3Kq8x94rbhU6YP1HpvRjSYtnFenEfGw2nzESvFsNdYT6KKP+JuS73w==}
+
   '@rollup/pluginutils@5.1.0':
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -1747,6 +1753,8 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
+  '@pyncz/tailwind-mask-image@2.0.0': {}
+
   '@rollup/pluginutils@5.1.0(rollup@4.19.0)':
     dependencies:
       '@types/estree': 1.0.5
diff --git a/src/lib/components/shared/demo.svelte b/src/lib/components/shared/demo.svelte
index 2c040bb..bfacafa 100644
--- a/src/lib/components/shared/demo.svelte
+++ b/src/lib/components/shared/demo.svelte
@@ -70,7 +70,7 @@
 		</p>
 	{/if}
 	<div
-		class="group relative mt-4 w-full overflow-x-auto rounded-xl border border-gray-alpha-400 bg-background-100 md:overflow-visible xl:mt-7"
+		class="group relative mt-4 overflow-x-auto rounded-xl border border-gray-alpha-400 bg-background-100 xl:mt-7"
 	>
 		<section id="component-demo" class={cn('w-full p-6', class_name)}>
 			<slot></slot>
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
index b207642..0bd9620 100644
--- a/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -1,24 +1,66 @@
 <script lang="ts">
 	import { cn } from '$lib/utils.js';
 	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { onMount } from 'svelte';
 
 	type $$Props = TabsPrimitive.ListProps & {
 		variant?: 'default' | 'secondary';
+		/** When `true`, masks either edge of the scrollable content to indicate there is more content to the user @default true */
+		mask_overflow?: boolean;
 	};
 
 	let class_name: $$Props['class'] = undefined;
 	export let variant: $$Props['variant'] = 'default';
 	export { class_name as class };
+	export let mask_overflow: $$Props['mask_overflow'] = true;
+
+	let el: HTMLDivElement;
+
+	let pre_mask = false;
+	let post_mask = false;
+
+	// When the tabs are scrolled it will determine whether or not to show the mask at the end
+	function handle_mask() {
+		if (el.offsetWidth + el.scrollLeft < el.scrollWidth - 10) {
+			post_mask = true;
+		} else {
+			post_mask = false;
+		}
+
+		if (el.scrollLeft == 0) {
+			pre_mask = false;
+		} else {
+			pre_mask = true;
+		}
+	}
+
+	onMount(() => {
+		handle_mask(); // initially determine mask state
+		el.addEventListener('scroll', handle_mask);
+
+		return () => {
+			el.removeEventListener('scroll', handle_mask);
+		};
+	});
 </script>
 
-<!-- TODO: Add a no-scrollbar class. -->
+<svelte:window on:resize={handle_mask} />
+
+<!-- Make sure you have the `no-scrollbar` class in your tailwind.config file -->
 <TabsPrimitive.List
 	data-variant={variant}
+	bind:el
 	class={cn(
-		'group inline-flex w-full flex-wrap items-baseline gap-3 overflow-hidden overflow-x-auto p-1 text-gray-900 data-[variant=default]:[box-shadow:_0_-1px_0_var(--accents-2)_inset;]',
+		'group flex w-full items-baseline gap-3 overflow-hidden overflow-x-auto p-1 text-gray-900 no-scrollbar data-[variant=default]:[box-shadow:_0_-1px_0_var(--accents-2)_inset;]',
+		{
+			'mask-linear mask-dir-to-r mask-from-0 mask-to-100 mask-point-to-[15%]':
+				mask_overflow && pre_mask,
+			'mask-linear mask-dir-to-l mask-from-0 mask-to-100 mask-point-to-[15%]':
+				mask_overflow && post_mask
+		},
 		class_name
 	)}
 	{...$$restProps}
 >
-	<slot />
+	<slot></slot>
 </TabsPrimitive.List>
diff --git a/src/routes/tabs/+page.svelte b/src/routes/tabs/+page.svelte
index 9f7e5f4..999d4f4 100644
--- a/src/routes/tabs/+page.svelte
+++ b/src/routes/tabs/+page.svelte
@@ -5,6 +5,8 @@
 	import default_code from './default.svelte?raw';
 	import DisableSpecificTabs from './disable-specific-tabs.svelte';
 	import disable_specific_tabs_code from './disable-specific-tabs.svelte?raw';
+	import Overflow from './overflow-tabs.svelte';
+	import overflow_code from './overflow-tabs.svelte?raw';
 	import Secondary from './secondary.svelte';
 	import secondary_code from './secondary.svelte?raw';
 	import WithIcons from './with-icons.svelte';
@@ -29,4 +31,8 @@
 	<Demo id="secondary" code={secondary_code}>
 		<Secondary />
 	</Demo>
+
+	<Demo id="overflow" code={overflow_code}>
+		<Overflow />
+	</Demo>
 </PageWrapper>
diff --git a/src/routes/tabs/overflow-tabs.svelte b/src/routes/tabs/overflow-tabs.svelte
new file mode 100644
index 0000000..1869860
--- /dev/null
+++ b/src/routes/tabs/overflow-tabs.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Tabs from '$lib/components/ui/tabs';
+
+	const tabs = [
+		{ title: 'Apple', value: 'apple' },
+		{ title: 'Banana', value: 'banana' },
+		{ title: 'Orange', value: 'orange' },
+		{ title: 'Strawberry', value: 'strawberry' },
+		{ title: 'Mango', value: 'mango' },
+		{ title: 'Pineapple', value: 'pineapple' },
+		{ title: 'Grape', value: 'grape' },
+		{ title: 'Watermelon', value: 'watermelon' },
+		{ title: 'Peach', value: 'peach' },
+		{ title: 'Kiwi', value: 'kiwi' },
+		{ title: 'Cherry', value: 'cherry' },
+		{ title: 'Blueberry', value: 'blueberry' },
+		{ title: 'Pear', value: 'pear' },
+		{ title: 'Plum', value: 'plum' },
+		{ title: 'Raspberry', value: 'raspberry' }
+	];
+</script>
+
+<Tabs.Root value="apple">
+	<Tabs.List>
+		{#each tabs as { title, value }}
+			<Tabs.Trigger {value}>{title}</Tabs.Trigger>
+		{/each}
+	</Tabs.List>
+</Tabs.Root>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d46a88f..5dd801d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,3 +1,4 @@
+import mask from '@pyncz/tailwind-mask-image';
 import typography from '@tailwindcss/typography';
 import type { Config } from 'tailwindcss';
 import { fontFamily } from 'tailwindcss/defaultTheme';
@@ -156,7 +157,22 @@ const config: Config = {
 			}
 		}
 	},
-	plugins: [typography]
+	plugins: [
+		typography,
+		mask,
+		function ({ addUtilities }) {
+			const newUtilities = {
+				'.no-scrollbar': {
+					'-ms-overflow-style': 'none',
+					'scrollbar-width': 'none',
+					'&::-webkit-scrollbar': {
+						display: 'none'
+					}
+				}
+			};
+			addUtilities(newUtilities);
+		}
+	]
 };
 
 export default config;