diff --git a/.changeset/cold-trains-visit.md b/.changeset/cold-trains-visit.md
new file mode 100644
index 0000000000..d8a6a9f41c
--- /dev/null
+++ b/.changeset/cold-trains-visit.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Feature: DateInput - supports single and ranged calendar date inputs
diff --git a/package.json b/package.json
index 856c0b2519..b3650776cb 100644
--- a/package.json
+++ b/package.json
@@ -113,4 +113,4 @@
 		}
 	},
 	"packageManager": "pnpm@8.15.9+sha512.499434c9d8fdd1a2794ebf4552b3b25c0a633abcee5bb15e7b5de90f32f47b513aca98cd5cfd001c31f0db454bc3804edccd578501e4ca293a6816166bbd9f81"
-}
+}
\ No newline at end of file
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
new file mode 100644
index 0000000000..369651f511
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
@@ -0,0 +1,46 @@
+<script context="module">
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'Atoms/inputs/DateInput',
+		argTypes: {},
+		args: {
+			title: 'Date Input',
+			name: 'DateInput',
+			omitGroup: []
+		}
+	};
+</script>
+
+<script>
+	import { Template, Story } from '@storybook/addon-svelte-csf';
+	import DateInput from './DateInput.svelte';
+	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
+	const inputStore = getInputContext();
+
+	// Mock "today"
+	import MockDate from 'mockdate';
+	MockDate.set('2024-12-30');
+</script>
+
+<Template let:args>
+	<DateInput {...args} />
+</Template>
+
+<Story name="Basic Usage" let:args>
+	<h1>
+		Input Store:
+		<h2>value: {$inputStore.dateInput.value}</h2>
+		<h2>start: {$inputStore.dateInput.start}</h2>
+		<h2>end: {$inputStore.dateInput.end}</h2>
+	</h1>
+	<DateInput {...args} name="dateInput" />
+</Story>
+<Story name="dateInput_range" let:args>
+	<h1>
+		Input Store:
+		<h2>value: {$inputStore.dateInput_range.value}</h2>
+		<h2>start: {$inputStore.dateInput_range.start}</h2>
+		<h2>end: {$inputStore.dateInput_range.end}</h2>
+	</h1>
+	<DateInput {...args} name="dateInput_range" range />
+</Story>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
new file mode 100644
index 0000000000..0543d6faf4
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
@@ -0,0 +1,128 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import DateInput from './_DateInput.svelte';
+	import { Query } from '@evidence-dev/sdk/usql';
+	import { getQueryFunction } from '@evidence-dev/component-utilities/buildQuery';
+	import { getLocalTimeZone } from '@internationalized/date';
+	import HiddenInPrint from '../shared/HiddenInPrint.svelte';
+	import { page } from '$app/stores';
+	import QueryLoad from '$lib/atoms/query-load/QueryLoad.svelte';
+	import { Skeleton } from '$lib/atoms/skeletons/index.js';
+	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
+	import { toBoolean } from '../../../utils.js';
+	import { dateToYYYYMMDD, formatDateString } from './helpers.js';
+
+	const inputs = getInputContext();
+
+	/** @type {string} */
+	export let name;
+	/** @type {string | undefined} */
+	export let title;
+	/** @type {boolean} */
+	export let hideDuringPrint = true;
+
+	/** @type {string | Date | undefined} */
+	export let start;
+	/** @type {string | Date | undefined} */
+	export let end;
+
+	/** @type {Query | string | undefined} */
+	export let data;
+	/** @type {string | undefined} */
+	export let dates;
+	/** @type {[]string | undefined} */
+	export let presetRanges;
+	/** @type {string | undefined} */
+	export let defaultValue;
+	/** @type {boolean} */
+	export let range = false;
+
+	$: range = toBoolean(range);
+
+	const exec = getQueryFunction();
+	let query;
+	$: if (data && dates) {
+		const source = typeof data === 'string' ? data : `(${data.text})`;
+		query = Query.create(
+			`SELECT min(${dates}) as start, max(${dates}) as end FROM ${source}`,
+			exec,
+			{
+				initialData: $page?.data?.data[`DateInput-${name}_data`],
+				knownColumns: $page?.data?.data[`DateInput-${name}_columns`],
+				disableCache: true,
+				noResolve: false,
+				id: `DateInput-${name}`
+			}
+		);
+		query.fetch();
+	}
+
+	$: startString = formatDateString(start || $query?.[0].start || new Date(0));
+	$: endString = formatDateString(end || $query?.[0].end || new Date());
+
+	$: if ((query && $query.dataLoaded) || !query) {
+		if (range) {
+			$inputs[name] = { value: undefined, start: startString, end: endString };
+		} else {
+			$inputs[name] = { value: startString, start: startString, end: undefined };
+		}
+	}
+
+	let currentDate = dateToYYYYMMDD(new Date(Date.now()));
+
+	let selectedDateInput;
+	$: if (selectedDateInput && (selectedDateInput.start || selectedDateInput.end) && range) {
+		$inputs[name] = {
+			value: undefined,
+			start: dateToYYYYMMDD(selectedDateInput.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
+			end: dateToYYYYMMDD(selectedDateInput.end?.toDate(getLocalTimeZone()) ?? new Date())
+		};
+	} else if (selectedDateInput && selectedDateInput && !range) {
+		$inputs[name] = {
+			value: dateToYYYYMMDD(selectedDateInput.toDate(getLocalTimeZone()) ?? new Date(0)),
+			start: dateToYYYYMMDD(selectedDateInput.toDate(getLocalTimeZone()) ?? new Date(0)),
+			end: undefined
+		};
+	}
+</script>
+
+<HiddenInPrint enabled={hideDuringPrint}>
+	<div class="mt-2 mb-4 ml-0 mr-2 inline-block">
+		{#if title && range}
+			<span class="text-sm text-gray-500 block mb-1">{title}</span>
+		{/if}
+
+		{#if $query?.error}
+			<span
+				class="group inline-flex items-center relative cursor-help cursor-helpfont-sans px-1 border border-red-200 py-[1px] bg-red-50 rounded"
+			>
+				<span class="inline font-sans font-medium text-xs text-red-600">error</span>
+				<span
+					class="hidden text-white font-sans group-hover:inline absolute -top-1 left-[105%] text-sm z-10 px-2 py-1 bg-gray-800/80 leading-relaxed min-w-[150px] w-max max-w-[400px] rounded-md"
+				>
+					{$query.error}
+				</span>
+			</span>
+		{:else}
+			<QueryLoad data={query} let:loaded>
+				<svelte:fragment slot="skeleton">
+					<Skeleton class="h-8 w-72" />
+				</svelte:fragment>
+				<DateInput
+					bind:selectedDateInput
+					start={startString}
+					end={endString}
+					loaded={loaded?.ready ?? true}
+					{presetRanges}
+					{defaultValue}
+					{range}
+					{currentDate}
+					{title}
+				/>
+			</QueryLoad>
+		{/if}
+	</div>
+</HiddenInPrint>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-range/_DateRange.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
similarity index 56%
rename from packages/ui/core-components/src/lib/atoms/inputs/date-range/_DateRange.svelte
rename to packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
index 28ee4e4135..300e142af0 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-range/_DateRange.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -14,6 +14,9 @@
 	import * as Select from '$lib/atoms/shadcn/select/index.js';
 	import * as Popover from '$lib/atoms/shadcn/popover/index.js';
 	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
+	import { Calendar } from '$lib/atoms/shadcn/calendar/index.js';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { CalendarEvent as CalendarIcon } from '@steeze-ui/tabler-icons';
 
 	function YYYYMMDDToCalendar(yyyymmdd) {
 		const pieces = yyyymmdd.split('-');
@@ -29,7 +32,7 @@
 	});
 
 	/** @type {import('bits-ui').DateRange | undefined} */
-	export let selectedDateRange = undefined;
+	export let selectedDateInput = undefined;
 	/** @type {string} */
 	export let start;
 	/** @type {string} */
@@ -39,6 +42,10 @@
 	export let presetRanges;
 	/** @type {string] | undefined} */
 	export let defaultValue;
+	/** @type {boolean} */
+	export let range = false;
+	/** @type {string} */
+	export let title;
 
 	/** @type { { label: string, group: string, range: import('bits-ui').DateRange }[] } */
 	$: presets = [
@@ -176,13 +183,17 @@
 				lowerCaseNoSpaceString(typeof v === 'string' ? v : v.label)
 		);
 		if (!targetPreset) return;
-		selectedDateRange = targetPreset.range ?? targetPreset.value;
 		selectedPreset = targetPreset;
+		if (range) {
+			selectedDateInput = targetPreset.range ?? targetPreset.value;
+		} else {
+			selectedDateInput = targetPreset.range;
+		}
 	}
 
 	$: if (
 		typeof defaultValue === 'string' &&
-		!selectedDateRange &&
+		!selectedDateInput &&
 		!selectedPreset &&
 		presets.length
 	)
@@ -193,129 +204,159 @@
 
 	function updateDateRange(start, end) {
 		if (selectedPreset) return;
-		selectedDateRange = { start, end };
-	}
 
+		if (range) {
+			selectedDateInput = { start, end };
+		} else {
+			selectedDateInput = start;
+		}
+	}
 	$: updateDateRange(calendarStart, calendarEnd);
 </script>
 
-<div class="flex">
+<div class="flex bg-[white]">
 	<Popover.Root openFocus>
 		<Popover.Trigger asChild let:builder>
 			<Button
 				variant="outline"
 				size="sm"
 				class={cn(
-					'flex justify-start rounded-r-none border-r-0 text-left font-normal',
-					!selectedDateRange && 'text-gray-400'
+					`flex justify-start ${range ? 'border-r rounded-r-none text-left' : 'text-center'} font-normal`,
+					!selectedDateInput && 'text-gray-400'
 				)}
 				builders={[builder]}
 				disabled={!loaded}
 			>
-				<span class="hidden sm:inline">
+				<span class="hidden sm:flex font-medium items-center">
 					{#if !loaded}
 						Loading...
-					{:else if selectedDateRange && selectedDateRange.start}
-						{#if selectedDateRange.end}
-							{dfMedium.format(selectedDateRange.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
-								selectedDateRange.end.toDate(getLocalTimeZone())
+					{:else if selectedDateInput && !range}
+						{#if title}
+							{title}
+							<Separator oritentation="vertical" class="mx-2 h-4 w-[1px]" />
+						{/if}
+						{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}
+						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-[1.8px] text-gray-700" />
+					{:else if selectedDateInput && selectedDateInput.start}
+						{#if selectedDateInput.end}
+							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfMedium.format(
+								selectedDateInput.end.toDate(getLocalTimeZone())
 							)}
 						{:else}
-							{dfMedium.format(selectedDateRange.start.toDate(getLocalTimeZone()))}
+							{dfMedium.format(selectedDateInput.start.toDate(getLocalTimeZone()))}
 						{/if}
 					{:else if placeholder}
 						{dfMedium.format(placeholder.toDate(getLocalTimeZone()))}
 					{:else}
-						Date Range
+						Date Input
 					{/if}
 				</span>
-				<span class="sm:hidden">
+				<span class="sm:hidden flex items-center">
 					{#if !loaded}
 						Loading...
-					{:else if selectedDateRange && selectedDateRange.start}
-						{#if selectedDateRange.end}
-							{dfShort.format(selectedDateRange.start.toDate(getLocalTimeZone()))} - {dfShort.format(
-								selectedDateRange.end.toDate(getLocalTimeZone())
+					{:else if selectedDateInput && !range}
+						{dfShort.format(selectedDateInput.toDate(getLocalTimeZone()))}
+						<Icon src={CalendarIcon} class="ml-2 h-4 w-4 mb-[2px] stroke-[1.8px] text-gray-700" />
+					{:else if selectedDateInput && selectedDateInput.start}
+						{#if selectedDateInput.end}
+							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))} - {dfShort.format(
+								selectedDateInput.end.toDate(getLocalTimeZone())
 							)}
 						{:else}
-							{dfShort.format(selectedDateRange.start.toDate(getLocalTimeZone()))}
+							{dfShort.format(selectedDateInput.start.toDate(getLocalTimeZone()))}
 						{/if}
 					{:else if placeholder}
 						{dfShort.format(placeholder.toDate(getLocalTimeZone()))}
 					{:else}
-						Date Range
+						Date Input
 					{/if}
 				</span>
 			</Button>
 		</Popover.Trigger>
 		<Popover.Content class="w-auto select-none p-0" align="start">
-			<RangeCalendar
-				bind:selectedDateRange
-				bind:placeholder
-				initialFocus
-				numberOfMonths={1}
-				onValueChange={(value) => {
-					selectedPreset = undefined;
-					selectedDateRange = value;
-				}}
-				minValue={calendarStart}
-				maxValue={calendarEnd}
-			/>
+			{#if range}
+				<RangeCalendar
+					bind:selectedDateInput
+					bind:placeholder
+					initialFocus
+					numberOfMonths={1}
+					onValueChange={(value) => {
+						selectedPreset = undefined;
+						selectedDateInput = value;
+					}}
+					minValue={calendarStart}
+					maxValue={calendarEnd}
+				/>
+			{:else}
+				<Calendar
+					bind:selectedDateInput
+					bind:placeholder
+					initialFocus
+					numberOfMonths={1}
+					onValueChange={(value) => {
+						selectedPreset = undefined;
+						selectedDateInput = value;
+					}}
+					minValue={calendarStart}
+					maxValue={calendarEnd}
+				/>
+			{/if}
 		</Popover.Content>
 	</Popover.Root>
-
-	<Select.Root
-		onSelectedChange={(v) => {
-			v.range = v.value;
-			applyPreset(v);
-		}}
-		bind:selected={selectedPreset}
-		disabled={!loaded}
-	>
-		<Select.Trigger class="h-8 w-40 rounded-l-none px-3 text-xs font-medium" sameWidth>
-			{#if selectedPreset}
-				{selectedPreset.label}
+	{#if range}
+		<Select.Root
+			onSelectedChange={(v) => {
+				v.range = v.value;
+				applyPreset(v);
+			}}
+			bind:selected={selectedPreset}
+			disabled={!loaded}
+		>
+			<Select.Trigger class="h-8 w-40 rounded-l-none px-3 text-xs font-medium" sameWidth>
+				{#if selectedPreset}
+					{selectedPreset.label}
+				{:else}
+					<span class="hidden sm:inline"> Select a Range </span>
+					<span class="sm:hidden"> Range </span>
+				{/if}
+			</Select.Trigger>
+			{#if presets && presets.length === 0}
+				<Select.Content class="text-sm text-center">
+					<p>No Valid Presets</p>
+				</Select.Content>
 			{:else}
-				<span class="hidden sm:inline"> Select a Range </span>
-				<span class="sm:hidden"> Range </span>
+				<Select.Content>
+					{#each presets.filter((d) => d.group === 'Days') as preset}
+						<Select.Item value={preset.range} label={preset.label} class="text-xs"
+							>{preset.label}</Select.Item
+						>
+					{/each}
+					{#if groupExists('Months')}
+						<Separator orientation="horizontal" />
+					{/if}
+					{#each presets.filter((d) => d.group === 'Months') as preset}
+						<Select.Item value={preset.range} label={preset.label} class="text-xs"
+							>{preset.label}</Select.Item
+						>
+					{/each}
+					{#if groupExists('Last')}
+						<Separator orientation="horizontal" />
+					{/if}
+					{#each presets.filter((d) => d.group === 'Last') as preset}
+						<Select.Item value={preset.range} label={preset.label} class="text-xs"
+							>{preset.label}</Select.Item
+						>
+					{/each}
+					{#if groupExists('To Date')}
+						<Separator orientation="horizontal" />
+					{/if}
+					{#each presets.filter((d) => d.group === 'To Date') as preset}
+						<Select.Item value={preset.range} label={preset.label} class="text-xs"
+							>{preset.label}</Select.Item
+						>
+					{/each}
+				</Select.Content>
 			{/if}
-		</Select.Trigger>
-		{#if presets && presets.length === 0}
-			<Select.Content class="text-sm text-center">
-				<p>No Valid Presets</p>
-			</Select.Content>
-		{:else}
-			<Select.Content>
-				{#each presets.filter((d) => d.group === 'Days') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#if groupExists('Months')}
-					<Separator orientation="horizontal" />
-				{/if}
-				{#each presets.filter((d) => d.group === 'Months') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#if groupExists('Last')}
-					<Separator orientation="horizontal" />
-				{/if}
-				{#each presets.filter((d) => d.group === 'Last') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-				{#if groupExists('To Date')}
-					<Separator orientation="horizontal" />
-				{/if}
-				{#each presets.filter((d) => d.group === 'To Date') as preset}
-					<Select.Item value={preset.range} label={preset.label} class="text-xs"
-						>{preset.label}</Select.Item
-					>
-				{/each}
-			</Select.Content>
-		{/if}
-	</Select.Root>
+		</Select.Root>
+	{/if}
 </div>
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/helpers.js b/packages/ui/core-components/src/lib/atoms/inputs/date-input/helpers.js
new file mode 100644
index 0000000000..302f3a74e1
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/helpers.js
@@ -0,0 +1,17 @@
+const YYYYMMDD = /^\d{4}-\d{2}-\d{2}$/;
+
+function dateToYYYYMMDD(date) {
+	return date.toISOString().split('T')[0];
+}
+
+function formatDateString(date) {
+	if (typeof date === 'string' && YYYYMMDD.test(date)) {
+		return date;
+	} else if (date instanceof Date) {
+		return dateToYYYYMMDD(date);
+	} else {
+		return dateToYYYYMMDD(new Date());
+	}
+}
+
+export { dateToYYYYMMDD, formatDateString };
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/index.js b/packages/ui/core-components/src/lib/atoms/inputs/date-input/index.js
new file mode 100644
index 0000000000..966031e43a
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/index.js
@@ -0,0 +1 @@
+export { default as DateInput } from './DateInput.svelte';
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.stories.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.stories.svelte
index d591d58f60..68df33b211 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.stories.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.stories.svelte
@@ -14,6 +14,8 @@
 <script>
 	import { Template, Story } from '@storybook/addon-svelte-csf';
 	import DateRange from './DateRange.svelte';
+	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
+	const inputStore = getInputContext();
 
 	// Mock "today"
 	import MockDate from 'mockdate';
@@ -25,7 +27,8 @@
 </Template>
 
 <Story name="Basic Usage" let:args>
-	<DateRange {...args} />
+	<DateRange {...args} name="dateRange" />
+	<h1>Input Store: {$inputStore.dateRange.start} - {$inputStore.dateRange.end}</h1>
 </Story>
 
 <Story name="Single presetRanges" args={{ presetRanges: 'last7Days' }} />
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
index 6fdb7bcd96..e0f0cefe94 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
+++ b/packages/ui/core-components/src/lib/atoms/inputs/date-range/DateRange.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script>
-	import DateRange from './_DateRange.svelte';
+	import DateInput from '../date-input/_DateInput.svelte';
 	import { Query } from '@evidence-dev/sdk/usql';
 	import { getQueryFunction } from '@evidence-dev/component-utilities/buildQuery';
 	import { getLocalTimeZone } from '@internationalized/date';
@@ -12,10 +12,7 @@
 	import QueryLoad from '$lib/atoms/query-load/QueryLoad.svelte';
 	import { Skeleton } from '$lib/atoms/skeletons/index.js';
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
-
-	function dateToYYYYMMDD(date) {
-		return date.toISOString().split('T')[0];
-	}
+	import { dateToYYYYMMDD, formatDateString } from '../date-input/helpers.js';
 
 	const inputs = getInputContext();
 	/** @type {string} */
@@ -39,6 +36,9 @@
 	/** @type {string | undefined} */
 	export let defaultValue;
 
+	/** @type {boolean} */
+	let range = true;
+
 	const exec = getQueryFunction();
 	let query;
 	$: if (data && dates) {
@@ -57,33 +57,18 @@
 		query.fetch();
 	}
 
-	const YYYYMMDD = /^\d{4}-\d{2}-\d{2}$/;
-	$: startString =
-		typeof start === 'string' && YYYYMMDD.test(start)
-			? start
-			: start instanceof Date
-				? dateToYYYYMMDD(start)
-				: $query?.[0].start instanceof Date
-					? dateToYYYYMMDD($query?.[0].start)
-					: dateToYYYYMMDD(new Date(0));
-	$: endString =
-		typeof end === 'string' && YYYYMMDD.test(end)
-			? end
-			: end instanceof Date
-				? dateToYYYYMMDD(end)
-				: $query?.[0].end instanceof Date
-					? dateToYYYYMMDD($query?.[0].end)
-					: dateToYYYYMMDD(new Date());
+	$: startString = formatDateString(start || $query?.[0].start || new Date(0));
+	$: endString = formatDateString(end || $query?.[0].end || new Date());
 
 	$: if ((query && $query.dataLoaded) || !query) {
 		$inputs[name] = { start: startString, end: endString };
 	}
 
-	let selectedDateRange;
-	$: if (selectedDateRange && (selectedDateRange.start || selectedDateRange.end)) {
+	let selectedDateInput;
+	$: if (selectedDateInput && (selectedDateInput.start || selectedDateInput.end)) {
 		$inputs[name] = {
-			start: dateToYYYYMMDD(selectedDateRange.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
-			end: dateToYYYYMMDD(selectedDateRange.end?.toDate(getLocalTimeZone()) ?? new Date())
+			start: dateToYYYYMMDD(selectedDateInput.start?.toDate(getLocalTimeZone()) ?? new Date(0)),
+			end: dateToYYYYMMDD(selectedDateInput.end?.toDate(getLocalTimeZone()) ?? new Date())
 		};
 	}
 </script>
@@ -111,13 +96,14 @@
 					<Skeleton class="h-8 w-72" />
 				</svelte:fragment>
 
-				<DateRange
-					bind:selectedDateRange
+				<DateInput
+					bind:selectedDateInput
 					start={startString}
 					end={endString}
 					loaded={loaded?.ready ?? true}
 					{presetRanges}
 					{defaultValue}
+					{range}
 				/>
 			</QueryLoad>
 		{/if}
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/index.js b/packages/ui/core-components/src/lib/atoms/inputs/index.js
index b3e72e168b..2abde54a92 100644
--- a/packages/ui/core-components/src/lib/atoms/inputs/index.js
+++ b/packages/ui/core-components/src/lib/atoms/inputs/index.js
@@ -4,3 +4,4 @@ export * from './button-group';
 export * from './date-range';
 export * from './checkbox';
 export * from './slider';
+export * from './date-input';
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-cell.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-cell.svelte
new file mode 100644
index 0000000000..4403358207
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-cell.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	export let date;
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Cell
+	{date}
+	class={cn(
+		'[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Cell>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-day.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-day.svelte
new file mode 100644
index 0000000000..abeb09d3f1
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-day.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/atoms/shadcn/button';
+	import { cn } from '$lib/utils.js';
+
+	export let date;
+	export let month;
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Day
+	on:click
+	{date}
+	{month}
+	class={cn(
+		buttonVariants({ variant: 'ghost' }),
+		'h-9 w-9 p-0 font-normal ',
+		// Today
+		'[&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:border-dashed  [&[data-today]:not([data-selected])]:text-gray-900',
+		// Selected
+		'data-[selected]:bg-gray-900 data-[selected]:text-white data-[selected]:hover:bg-gray-900 data-[selected]:hover:text-white data-[selected]:focus:bg-gray-900 data-[selected]:focus:text-white',
+		// Disabled
+		'data-[disabled]:text-gray-500 data-[disabled]:opacity-50',
+		// Unavailable
+		'data-[unavailable]:text-red-50 data-[unavailable]:line-through',
+		// Outside months
+		'data-[outside-month]:pointer-events-none data-[outside-month]:text-gray-500 data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-gray-100/50 [&[data-outside-month][data-selected]]:text-gray-500 [&[data-outside-month][data-selected]]:opacity-30',
+		className
+	)}
+	{...$$restProps}
+	let:selected
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {selected} {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</CalendarPrimitive.Day>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-body.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-body.svelte
new file mode 100644
index 0000000000..1c8f671e1d
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-body.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridBody>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-head.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-head.svelte
new file mode 100644
index 0000000000..13714ca75d
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-head.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridHead>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-row.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-row.svelte
new file mode 100644
index 0000000000..defc4def5b
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid-row.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridRow class={cn('flex', className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridRow>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid.svelte
new file mode 100644
index 0000000000..d2061c88e3
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-grid.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Grid class={cn('w-full border-collapse space-y-1', className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.Grid>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-head-cell.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-head-cell.svelte
new file mode 100644
index 0000000000..6cec056385
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-head-cell.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.HeadCell
+	class={cn('text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal', className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.HeadCell>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-header.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-header.svelte
new file mode 100644
index 0000000000..81084dc5e2
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-header.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Header
+	class={cn('relative flex w-full items-center justify-between pt-1', className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Header>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-heading.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-heading.svelte
new file mode 100644
index 0000000000..5f2dfc1a8c
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-heading.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Heading
+	let:headingValue
+	class={cn('text-sm font-medium', className)}
+	{...$$restProps}
+>
+	<slot {headingValue}>
+		{headingValue}
+	</slot>
+</CalendarPrimitive.Heading>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-months.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-months.svelte
new file mode 100644
index 0000000000..840829065f
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-months.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { cn } from '$lib/utils.js';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn('mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0', className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-next-button.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-next-button.svelte
new file mode 100644
index 0000000000..1c8f7c610f
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-next-button.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { ChevronRight } from '@steeze-ui/radix-icons';
+	import { buttonVariants } from '$lib/atoms/shadcn/button';
+	import { cn } from '$lib/utils';
+
+	let className = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.NextButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: 'ghost' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<Icon src={ChevronRight} class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.NextButton>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-prev-button.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-prev-button.svelte
new file mode 100644
index 0000000000..455cc094cc
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar-prev-button.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { ChevronLeft } from '@steeze-ui/radix-icons';
+	import { buttonVariants } from '$lib/atoms/shadcn/button';
+	import { cn } from '$lib/utils';
+
+	/** @type {string | undefined | null} */
+	let className = undefined;
+
+	export { className as class };
+</script>
+
+<CalendarPrimitive.PrevButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: 'ghost' }),
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<Icon src={ChevronLeft} class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.PrevButton>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar.svelte
new file mode 100644
index 0000000000..8f15743787
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/calendar.svelte
@@ -0,0 +1,177 @@
+<script>
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import {
+		Day,
+		Cell,
+		Grid,
+		Header,
+		Months,
+		GridRow,
+		Heading,
+		GridBody,
+		GridHead,
+		HeadCell,
+		NextButton,
+		PrevButton
+	} from './index.js';
+	import * as Select from '../select/index.js';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { DateFormatter, getLocalTimeZone } from '@internationalized/date';
+
+	import { cn } from '$lib/utils.js';
+
+	/** @type {import("bits-ui").DateRange | undefined} */
+	let value = undefined;
+	/** @type {DateValue | undefined} */
+	let placeholder = undefined;
+	/** @type {{ start: DateValue; end: DateValue; } | undefined} */
+	let selectedDateInput = undefined;
+	/** @type {'short' | 'long' | undefined} */
+	let weekdayFormat = 'short';
+	/** @type {DateValue | undefined} */
+	let startValue = undefined;
+	/** @type {CalendarDate | undefined} */
+	let minValue = undefined;
+	/** @type {CalendarDate | undefined} */
+	let maxValue = undefined;
+
+	/** @type {string | undefined | null} */
+	let className = undefined;
+
+	const monthOptions = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	].map((month, i) => ({ value: i + 1, label: month }));
+
+	const monthFmt = new DateFormatter('en-US', {
+		month: 'long'
+	});
+
+	$: yearOptions = Array.from({ length: 100 }, (_, i) => ({
+		label: String(new Date().getFullYear() - i),
+		value: new Date().getFullYear() - i
+	})).filter(({ value }) => !(minValue?.year > value || value > maxValue?.year));
+
+	$: defaultYear = placeholder
+		? { value: placeholder.year, label: String(placeholder.year) }
+		: undefined;
+
+	$: defaultMonth = placeholder
+		? { value: placeholder.month, label: monthFmt.format(placeholder.toDate(getLocalTimeZone())) }
+		: undefined;
+
+	export {
+		className as class,
+		value,
+		placeholder,
+		weekdayFormat,
+		startValue,
+		selectedDateInput,
+		minValue,
+		maxValue
+	};
+</script>
+
+<CalendarPrimitive.Root
+	bind:value
+	bind:placeholder
+	bind:startValue
+	bind:selectedDateInput
+	{minValue}
+	{maxValue}
+	{weekdayFormat}
+	class={cn('p-3', className)}
+	{...$$restProps}
+	on:keydown
+	let:months
+	let:weekdays
+>
+	<Header>
+		<PrevButton />
+		<Heading class="flex items-center justify-between font-normal text-gray-700 group">
+			<Select.Root
+				selected={defaultMonth}
+				items={monthOptions}
+				onSelectedChange={(v) => {
+					if (!v || !placeholder) return;
+					if (v.value === placeholder?.month) return;
+					placeholder = placeholder.set({ month: v.value });
+				}}
+			>
+				<SelectPrimitive.Trigger
+					aria-label="Select month"
+					class="text-sm pr-1 pl-2 py-1 rounded-tl rounded-bl border-r border-white transition-colors duration-200 group-hover:bg-gray-100 group-hover:border-gray-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400"
+				>
+					<Select.Value placeholder="Select month" />
+				</SelectPrimitive.Trigger>
+				<Select.Content class="max-h-[200px] overflow-y-auto !w-[118px]">
+					{#each monthOptions as { value, label }}
+						<Select.Item {value} {label}>
+							{label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<Select.Root
+				selected={defaultYear}
+				items={yearOptions}
+				onSelectedChange={(v) => {
+					if (!v || !placeholder) return;
+					if (v.value === placeholder?.year) return;
+					placeholder = placeholder.set({ year: v.value });
+				}}
+			>
+				<SelectPrimitive.Trigger
+					aria-label="Select year"
+					class=" pr-2 pl-1 py-1 rounded-tr rounded-br text-sm group-hover:bg-gray-100 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400"
+				>
+					<Select.Value placeholder="Select year" />
+				</SelectPrimitive.Trigger>
+				<Select.Content class="max-h-[200px] overflow-y-auto !w-[79px]">
+					{#each yearOptions as { value, label }}
+						<Select.Item {value} {label}>
+							{label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</Heading>
+		<NextButton />
+	</Header>
+	<Months>
+		{#each months as month}
+			<Grid>
+				<GridHead>
+					<GridRow class="flex">
+						{#each weekdays as weekday}
+							<HeadCell>
+								{weekday.slice(0, 2)}
+							</HeadCell>
+						{/each}
+					</GridRow>
+				</GridHead>
+				<GridBody>
+					{#each month.weeks as weekDates}
+						<GridRow class="mt-2 w-full">
+							{#each weekDates as date}
+								<Cell {date}>
+									<Day {date} month={month.value} />
+								</Cell>
+							{/each}
+						</GridRow>
+					{/each}
+				</GridBody>
+			</Grid>
+		{/each}
+	</Months>
+</CalendarPrimitive.Root>
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/calendar/index.js b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/index.js
new file mode 100644
index 0000000000..5d60fa56eb
--- /dev/null
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/calendar/index.js
@@ -0,0 +1,30 @@
+import Root from './calendar.svelte';
+import Cell from './calendar-cell.svelte';
+import Day from './calendar-day.svelte';
+import Grid from './calendar-grid.svelte';
+import Header from './calendar-header.svelte';
+import Months from './calendar-months.svelte';
+import GridRow from './calendar-grid-row.svelte';
+import Heading from './calendar-heading.svelte';
+import GridBody from './calendar-grid-body.svelte';
+import GridHead from './calendar-grid-head.svelte';
+import HeadCell from './calendar-head-cell.svelte';
+import NextButton from './calendar-next-button.svelte';
+import PrevButton from './calendar-prev-button.svelte';
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar
+};
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar.svelte
index 79a3e07bcf..3e96699df3 100644
--- a/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar.svelte
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar.svelte
@@ -15,7 +15,7 @@
 	/** @type {DateValue | undefined} */
 	let placeholder = undefined;
 	/** @type {{ start: DateValue; end: DateValue; } | undefined} */
-	let selectedDateRange = undefined;
+	let selectedDateInput = undefined;
 	/** @type {'short' | 'long' | undefined} */
 	let weekdayFormat = 'short';
 	/** @type {DateValue | undefined} */
@@ -66,7 +66,7 @@
 		placeholder,
 		weekdayFormat,
 		startValue,
-		selectedDateRange,
+		selectedDateInput,
 		minValue,
 		maxValue
 	};
@@ -76,7 +76,7 @@
 	bind:value
 	bind:placeholder
 	bind:startValue
-	bind:selectedDateRange
+	bind:selectedDateInput
 	{minValue}
 	{maxValue}
 	{weekdayFormat}
diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte
index 134a69fa7c..cf4be36e53 100644
--- a/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte
+++ b/packages/ui/core-components/src/lib/atoms/shadcn/select/select-trigger.svelte
@@ -6,7 +6,6 @@
 
 	/** @type {string | undefined | null} */
 	let className = undefined;
-
 	export { className as class };
 </script>
 
diff --git a/sites/docs/components/DocTab.svelte b/sites/docs/components/DocTab.svelte
index 9dce689588..9ee18d1800 100644
--- a/sites/docs/components/DocTab.svelte
+++ b/sites/docs/components/DocTab.svelte
@@ -5,11 +5,9 @@
 	let activeTab = 'preview';
 
 	const tabs = ['preview', 'code'];
-	let tabButtons = [];
 
-	function setTab(tab, index) {
+	function setTab(tab) {
 		activeTab = tab;
-		updateActiveBorder(index);
 	}
 
 	const [send, receive] = crossfade({
@@ -21,15 +19,14 @@
 <div class="doc-tab mt-2">
 	<div class="flex justify-end">
 		<div class="flex gap-1 bg-gray-100 rounded-md p-1 shadow-inner">
-			{#each tabs as tab, index}
+			{#each tabs as tab}
 				<div class="relative">
 					<button
 						class="relative z-10 py-1 px-2 transition-colors duration-300 text-xs font-medium ease-in-out capitalize tracking-wide focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400 rounded-md hover:text-gray-950 {activeTab ===
 						tab
 							? 'text-gray-950'
 							: 'text-gray-600'}"
-						on:click={() => setTab(tab, index)}
-						bind:this={tabButtons[index]}
+						on:click={() => setTab(tab)}
 					>
 						{tab}
 					</button>
@@ -51,7 +48,9 @@
 			class={activeTab !== 'preview' ? 'h-[0px]' : 'mb-3 mt-2'}
 			class:invisible={activeTab !== 'preview'}
 		>
-			<slot name="preview" />
+			<div>
+				<slot name="preview" />
+			</div>
 		</div>
 		<div
 			class="overflow-auto md-preview {activeTab !== 'code' ? 'h-[0px]' : 'mt-2'}"
@@ -66,5 +65,7 @@
 	/* Styles codeblocks inside doctabs */
 	:global(.md-preview > div:first-of-type) {
 		margin: 0;
+		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+			var(--tw-shadow);
 	}
 </style>
diff --git a/sites/docs/pages/components/date-input/index.md b/sites/docs/pages/components/date-input/index.md
new file mode 100644
index 0000000000..95a41d7cd8
--- /dev/null
+++ b/sites/docs/pages/components/date-input/index.md
@@ -0,0 +1,301 @@
+---
+title: Date Input
+sidebar_position: 1
+description: A date input component allows the user to select a date or a range of dates. The selected dates can be used as inputs to queries or components.
+queries: 
+- orders_by_day.sql
+---
+
+A date input component allows the user to select a date or a range of dates. The selected dates can be used as inputs to queries or components.
+
+To see how to filter a query using an input component, see [Filters](/core-concepts/filters).
+
+```sql filtered_query
+select 
+*
+from ${orders_by_day}
+where day > '${inputs.date_filtering_a_query.value}'
+```
+
+<DocTab>
+    <div slot='preview'>
+            <DateInput
+                name=date_filtering_a_query
+                title='Sales After'
+                data={orders_by_day}
+                dates=day
+            />
+
+            <BarChart
+                data={filtered_query}
+                x=day
+                y=sales
+            />
+    </div>
+
+````markdown
+
+```sql filtered_query
+select 
+    *
+from ${orders_by_day}
+where day > '${inputs.range_filtering_a_query.value}'
+```
+
+<DateInput
+    name=date_filtering_a_query
+    data={orders_by_day}
+    dates=day
+/>
+
+<BarChart
+    data={filtered_query}
+    x=day
+    y=sales
+/>
+````
+</DocTab>
+
+## Examples
+
+### Using Date Input from a Query
+
+The Date selected can be accessed through the `inputs.[name].value` 
+
+<DocTab>
+    <div slot='preview'>
+            <DateInput
+                name=date_input_from_query
+                data={orders_by_day}
+                dates=day
+            />
+
+            Date Selected: {inputs.date_input_from_query.value}
+    </div>
+
+````markdown
+<DateInput
+    name=date_range_from_query
+    data={orders_by_day}
+    dates=day
+/>
+
+Date Selected: {inputs.date_input_from_query.value}
+````
+</DocTab>
+
+### With a Title
+
+<DocTab>
+    <div slot='preview'>
+            <DateInput
+                name=date_range_with_title
+                data={orders_by_day}
+                dates=day
+                title="Select a Date Input"
+            />
+    </div>
+
+```markdown
+<DateInput
+    name=date_range_with_title
+    data={orders_by_day}
+    dates=day
+    title="Select a Date Input"/>
+```
+</DocTab>
+
+## Date Range
+
+Creates a date picker for selecting a date range to filter queries, with selectable preset date options.
+
+### Filtering a Query with Range Calendar
+
+The Date selected can be accessed through the `inputs.[name].start` & `inputs.[name].end`
+
+```sql filtered_query_ranged
+select 
+    *
+from ${orders_by_day}
+where day between '${inputs.range_filtering_a_query.start}' and '${inputs.range_filtering_a_query.end}'
+```
+
+<DocTab>
+    <div slot='preview'>
+            <DateInput
+                name=range_filtering_a_query
+                data={orders_by_day}
+                dates=day
+                title='Date Range'
+                range
+            />
+
+        <LineChart
+            data={filtered_query_ranged}
+            x=day
+            y=sales
+        />
+    </div>
+
+````markdown
+
+```sql filtered_query_ranged
+select 
+    *
+from ${orders_by_day}
+where day between '${inputs.range_filtering_a_query.start}' - '${inputs.range_filtering_a_query.end}'
+```
+
+<DateInput
+    name=range_filtering_a_query
+    data={orders_by_day}
+    dates=day
+    title='Date Range'
+    range
+/>
+
+<LineChart
+    data={filtered_query_ranged}
+    x=day
+    y=sales
+/>
+````
+</DocTab>
+
+### Default Value for Preset Ranges
+
+<DocTab>
+    <div slot='preview'>
+            <DateInput defaultValue={'Last 7 Days'} range/>
+    </div>
+
+````svelte
+<DateInput
+    name=name_of_date_range
+    defaultValue={'Last 7 Days'}
+    range
+/>
+````
+</DocTab>
+
+### Customizing Single Preset Ranges
+
+<DocTab>
+    <div slot='preview'>
+            <DateInput presetRanges={'Last 7 Days'} range/>
+    </div>
+
+```svelte
+<DateInput
+    name=name_of_date_range
+    range
+    presetRanges={'Last 7 Days'}
+/>
+```
+</DocTab>
+
+### Customizing Multiple Preset Ranges
+
+<DocTab>
+    <div slot='preview'>
+            <DateInput presetRanges={['Last 7 Days', 'Last 3 Months', 'Year to Date', 'All Time']} range/>
+    </div>
+
+````svelte
+<DateInput
+    name=name_of_date_range
+    range
+    presetRanges={['Last 7 Days', 'Last 3 Months', 'Year to Date', 'All Time']}
+/>
+````
+</DocTab>
+
+### Manually Specifying a Range
+
+<DocTab>
+    <div slot='preview'>
+            <DateInput
+                name=manual_date_range
+                start=2019-01-01
+                end=2019-12-31
+                range
+            />
+    </div>
+
+```markdown
+<DateInput
+    name=manual_date_range
+    start=2019-01-01
+    end=2019-12-31
+    range
+/>
+```
+</DocTab>
+
+## Options
+
+<PropListing 
+    name="name"
+    description="Name of the DateInput, used to reference the selected values elsewhere as {`{inputs.name.start`} or {`inputs.name.end`}"
+    required=true
+    options="string"
+/>
+<PropListing 
+    name="data"
+    description="Query name, wrapped in curly braces"
+    options="query name"
+/>
+<PropListing 
+    name="range"
+    description="toggles between a ranged and single input calendar"
+    options={["true", "false"]}
+    default=false
+/>
+<PropListing 
+    name="dates"
+    description="Column name from the query containing Date Input to span"
+    options="column name"
+/>
+<PropListing 
+    name="start"
+    description="A manually specified start date to use for the range"
+    options="string formatted YYYY-MM-DD"
+/>
+<PropListing 
+    name="end"
+    description="A manually specified end date to use for the range"
+    options="string formatted YYYY-MM-DD"
+/>
+<PropListing 
+    name="title"
+    options="string"
+>
+
+Title to display in the Date Input component
+
+</PropListing>
+<PropListing 
+    name="presetRanges"
+    options= "string | array of values e.g. {`{['Last 7 Days', 'Last 30 Days']}`}"
+    default=undefined
+>
+
+Customize "Select a Range" drop down, by including present range options. **Range options**: `'Last 7 Days'` `'Last 30 Days'` `'Last 90 Days'` `'Last 3 Months'` `'Last 6 Months'` `'Last 12 Months'` `'Last Month'` `'Last Year'` `'Month to Date'` `'Year to Date'` `'All Time'`
+
+</PropListing>
+<PropListing 
+    name="defaultValue"
+    options= "string e.g. {'Last 7 Days'} or {'Last 6 Months'}"
+    default=undefined
+>
+
+
+Accepts preset in string format to apply default value in Date Input picker. **Range options**: `'Last 7 Days'` `'Last 30 Days'` `'Last 90 Days'` `'Last 3 Months'` `'Last 6 Months'` `'Last 12 Months'` `'Last Month'` `'Last Year'` `'Month to Date'` `'Year to Date'` `'All Time'`
+
+</PropListing>
+<PropListing 
+    name="hideDuringPrint"
+    description="Hide the component when the report is printed"
+    options={["true", "false"]}
+    default="true"
+/>
diff --git a/vercel.json b/vercel.json
index d929a27d4c..94e729fd85 100644
--- a/vercel.json
+++ b/vercel.json
@@ -45,6 +45,11 @@
 			"source": "/guides/updating-your-project",
 			"destination": "/guides/updating-your-app/",
 			"permanent": true
+		},
+		{
+			"source": "/components/date-range/",
+			"destination": "/components/date-input/",
+			"permanent": true
 		}
 	]
 }