diff --git a/.changeset/sixty-chairs-tell.md b/.changeset/sixty-chairs-tell.md
new file mode 100644
index 000000000..982f38e19
--- /dev/null
+++ b/.changeset/sixty-chairs-tell.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: date picker context issue
diff --git a/src/lib/bits/calendar/components/calendar-cell.svelte b/src/lib/bits/calendar/components/calendar-cell.svelte
index 07d8a59bf..1e9a4064b 100644
--- a/src/lib/bits/calendar/components/calendar-cell.svelte
+++ b/src/lib/bits/calendar/components/calendar-cell.svelte
@@ -10,11 +10,11 @@
 
 	const {
 		helpers: { isDateDisabled, isDateUnavailable },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
 	$: attrs = {
-		...getAttrs("cell"),
+		...getCalendarAttrs("cell"),
 		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
 		"data-disabled": $isDateDisabled(date) ? "" : undefined,
 		role: "gridcell"
diff --git a/src/lib/bits/calendar/components/calendar-day.svelte b/src/lib/bits/calendar/components/calendar-day.svelte
index 3fe8d479e..9377fff41 100644
--- a/src/lib/bits/calendar/components/calendar-day.svelte
+++ b/src/lib/bits/calendar/components/calendar-day.svelte
@@ -15,10 +15,10 @@
 	const {
 		elements: { cell },
 		helpers: { isDateDisabled, isDateUnavailable, isDateSelected },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("day");
+	const attrs = getCalendarAttrs("day");
 	const dispatch = createDispatcher();
 
 	$: builder = $cell(date, month);
diff --git a/src/lib/bits/calendar/components/calendar-grid-body.svelte b/src/lib/bits/calendar/components/calendar-grid-body.svelte
index 316b2216d..196ad99dd 100644
--- a/src/lib/bits/calendar/components/calendar-grid-body.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid-body.svelte
@@ -5,9 +5,9 @@
 	type $$Props = GridBodyProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
-	const attrs = getAttrs("grid-body");
+	const attrs = getCalendarAttrs("grid-body");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/calendar/components/calendar-grid-head.svelte b/src/lib/bits/calendar/components/calendar-grid-head.svelte
index 641142d25..728b0415f 100644
--- a/src/lib/bits/calendar/components/calendar-grid-head.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid-head.svelte
@@ -6,10 +6,10 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
 	const attrs = {
-		...getAttrs("grid-head"),
+		...getCalendarAttrs("grid-head"),
 		"aria-hidden": true
 	};
 </script>
diff --git a/src/lib/bits/calendar/components/calendar-grid-row.svelte b/src/lib/bits/calendar/components/calendar-grid-row.svelte
index 811ebd41a..f6dd01a84 100644
--- a/src/lib/bits/calendar/components/calendar-grid-row.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid-row.svelte
@@ -7,9 +7,9 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
-	const attrs = getAttrs("grid-row");
+	const attrs = getCalendarAttrs("grid-row");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/calendar/components/calendar-grid.svelte b/src/lib/bits/calendar/components/calendar-grid.svelte
index faa3a1bce..49512ead4 100644
--- a/src/lib/bits/calendar/components/calendar-grid.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid.svelte
@@ -10,10 +10,10 @@
 
 	const {
 		elements: { grid },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("grid");
+	const attrs = getCalendarAttrs("grid");
 
 	$: builder = $grid;
 	$: Object.assign(builder, attrs);
diff --git a/src/lib/bits/calendar/components/calendar-head-cell.svelte b/src/lib/bits/calendar/components/calendar-head-cell.svelte
index 2ee7e8978..76543b524 100644
--- a/src/lib/bits/calendar/components/calendar-head-cell.svelte
+++ b/src/lib/bits/calendar/components/calendar-head-cell.svelte
@@ -5,9 +5,9 @@
 	type $$Props = HeadCellProps;
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
-	const attrs = getAttrs("head-cell");
+	const attrs = getCalendarAttrs("head-cell");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/calendar/components/calendar-header.svelte b/src/lib/bits/calendar/components/calendar-header.svelte
index 92ad4808b..5ab8a92db 100644
--- a/src/lib/bits/calendar/components/calendar-header.svelte
+++ b/src/lib/bits/calendar/components/calendar-header.svelte
@@ -6,9 +6,9 @@
 	export let asChild: $$Props["asChild"] = false;
 	export let el: $$Props["el"] = undefined;
 
-	const { getAttrs } = getCtx();
+	const { getCalendarAttrs } = getCtx();
 
-	const attrs = getAttrs("header");
+	const attrs = getCalendarAttrs("header");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/calendar/components/calendar-heading.svelte b/src/lib/bits/calendar/components/calendar-heading.svelte
index 27d3a77a8..59a14f94e 100644
--- a/src/lib/bits/calendar/components/calendar-heading.svelte
+++ b/src/lib/bits/calendar/components/calendar-heading.svelte
@@ -11,10 +11,10 @@
 	const {
 		elements: { heading },
 		states: { headingValue },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("heading");
+	const attrs = getCalendarAttrs("heading");
 
 	$: builder = $heading;
 	$: Object.assign(builder, attrs);
diff --git a/src/lib/bits/calendar/components/calendar-next-button.svelte b/src/lib/bits/calendar/components/calendar-next-button.svelte
index f8bd47d07..b0a9aa04b 100644
--- a/src/lib/bits/calendar/components/calendar-next-button.svelte
+++ b/src/lib/bits/calendar/components/calendar-next-button.svelte
@@ -12,10 +12,10 @@
 
 	const {
 		elements: { nextButton },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("next-button");
+	const attrs = getCalendarAttrs("next-button");
 
 	$: builder = $nextButton;
 	$: Object.assign(builder, attrs);
diff --git a/src/lib/bits/calendar/components/calendar-prev-button.svelte b/src/lib/bits/calendar/components/calendar-prev-button.svelte
index a7947989e..bebeb24a7 100644
--- a/src/lib/bits/calendar/components/calendar-prev-button.svelte
+++ b/src/lib/bits/calendar/components/calendar-prev-button.svelte
@@ -12,10 +12,10 @@
 
 	const {
 		elements: { prevButton },
-		getAttrs
+		getCalendarAttrs
 	} = getCtx();
 
-	const attrs = getAttrs("prev-button");
+	const attrs = getCalendarAttrs("prev-button");
 
 	$: builder = $prevButton;
 	$: Object.assign(builder, attrs);
diff --git a/src/lib/bits/calendar/components/calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte
index 0c0389fda..105de5a31 100644
--- a/src/lib/bits/calendar/components/calendar.svelte
+++ b/src/lib/bits/calendar/components/calendar.svelte
@@ -50,7 +50,7 @@
 		},
 		updateOption,
 		ids,
-		getAttrs
+		getCalendarAttrs
 	} = setCtx({
 		defaultPlaceholder: placeholder,
 		defaultValue: value,
@@ -119,7 +119,7 @@
 	$: updateOption("weekdayFormat", weekdayFormat);
 	$: updateOption("numberOfMonths", numberOfMonths);
 
-	const attrs = getAttrs("root");
+	const attrs = getCalendarAttrs("root");
 
 	$: builder = $calendar;
 	$: Object.assign(builder, attrs);
diff --git a/src/lib/bits/calendar/ctx.ts b/src/lib/bits/calendar/ctx.ts
index 967d291e9..e18c90daa 100644
--- a/src/lib/bits/calendar/ctx.ts
+++ b/src/lib/bits/calendar/ctx.ts
@@ -26,9 +26,10 @@ type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 
 export function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Multiple>) {
 	const { NAME, PARTS } = getCalendarData();
-	const getAttrs = createBitAttrs(NAME, PARTS);
+	const getCalendarAttrs = createBitAttrs(NAME, PARTS);
+	console.log(getCalendarAttrs);
 
-	const calendar = { ...createCalendar(removeUndefined(props)), getAttrs };
+	const calendar = { ...createCalendar(removeUndefined(props)), getCalendarAttrs };
 
 	setContext(NAME, calendar);
 
@@ -40,5 +41,8 @@ export function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Mult
 
 export function getCtx() {
 	const { NAME } = getCalendarData();
-	return getContext<GetReturn>(NAME);
+
+	const ctx = getContext<GetReturn>(NAME);
+	console.log(ctx);
+	return ctx;
 }
diff --git a/src/lib/bits/date-picker/components/date-picker-grid-body.svelte b/src/lib/bits/date-picker/components/date-picker-grid-body.svelte
new file mode 100644
index 000000000..196ad99dd
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-grid-body.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridBodyProps } from "../types.js";
+
+	type $$Props = GridBodyProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("grid-body");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tbody bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</tbody>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-grid-head.svelte b/src/lib/bits/date-picker/components/date-picker-grid-head.svelte
new file mode 100644
index 000000000..728b0415f
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-grid-head.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridHeadProps } from "../types.js";
+
+	type $$Props = GridHeadProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = {
+		...getCalendarAttrs("grid-head"),
+		"aria-hidden": true
+	};
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<thead bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</thead>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-grid-row.svelte b/src/lib/bits/date-picker/components/date-picker-grid-row.svelte
new file mode 100644
index 000000000..f6dd01a84
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-grid-row.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridRowProps } from "../types.js";
+
+	type $$Props = GridRowProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("grid-row");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tr bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</tr>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-head-cell.svelte b/src/lib/bits/date-picker/components/date-picker-head-cell.svelte
new file mode 100644
index 000000000..76543b524
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-head-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { HeadCellProps } from "../types.js";
+
+	type $$Props = HeadCellProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("head-cell");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<th bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</th>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-header.svelte b/src/lib/bits/date-picker/components/date-picker-header.svelte
new file mode 100644
index 000000000..5ab8a92db
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { HeaderProps } from "../types.js";
+
+	type $$Props = HeaderProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("header");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<header bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</header>
+{/if}
diff --git a/src/lib/bits/date-picker/index.ts b/src/lib/bits/date-picker/index.ts
index 993ef26e7..e47cf0da6 100644
--- a/src/lib/bits/date-picker/index.ts
+++ b/src/lib/bits/date-picker/index.ts
@@ -8,11 +8,11 @@ export { default as Label } from "./components/date-picker-label.svelte";
 export { default as Segment } from "./components/date-picker-segment.svelte";
 export { default as Trigger } from "./components/date-picker-trigger.svelte";
 export { default as Root } from "./components/date-picker.svelte";
-export { default as GridBody } from "$lib/bits/calendar/components/calendar-grid-body.svelte";
-export { default as GridHead } from "$lib/bits/calendar/components/calendar-grid-head.svelte";
-export { default as GridRow } from "$lib/bits/calendar/components/calendar-grid-row.svelte";
-export { default as HeadCell } from "$lib/bits/calendar/components/calendar-head-cell.svelte";
-export { default as Header } from "$lib/bits/calendar/components/calendar-header.svelte";
+export { default as GridBody } from "./components/date-picker-grid-body.svelte";
+export { default as GridHead } from "./components/date-picker-grid-head.svelte";
+export { default as GridRow } from "./components/date-picker-grid-row.svelte";
+export { default as HeadCell } from "./components/date-picker-head-cell.svelte";
+export { default as Header } from "./components/date-picker-header.svelte";
 export { default as Cell } from "./components/date-picker-cell.svelte";
 export { default as Day } from "./components/date-picker-day.svelte";
 export { default as Grid } from "./components/date-picker-grid.svelte";
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-grid-body.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-grid-body.svelte
new file mode 100644
index 000000000..bb2801f0c
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-grid-body.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridBodyProps } from "../types.js";
+
+	type $$Props = GridBodyProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("grid-body");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tbody bind:this={el} {...$$restProps} {...attrs}>
+		<slot />
+	</tbody>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-grid-head.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-grid-head.svelte
new file mode 100644
index 000000000..eb83df1be
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-grid-head.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridHeadProps } from "../types.js";
+
+	type $$Props = GridHeadProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = { ...getCalendarAttrs("grid-head"), "aria-hidden": true };
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<thead bind:this={el} {...$$restProps} {...attrs}>
+		<slot />
+	</thead>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-grid-row.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-grid-row.svelte
new file mode 100644
index 000000000..32d4124d1
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-grid-row.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { GridRowProps } from "../types.js";
+
+	type $$Props = GridRowProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("grid-row");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tr bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</tr>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-head-cell.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-head-cell.svelte
new file mode 100644
index 000000000..0e8b4c0a6
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-head-cell.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { HeadCellProps } from "../types.js";
+
+	type $$Props = HeadCellProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("head-cell");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<th bind:this={el} {...$$restProps} {...attrs}>
+		<slot />
+	</th>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-header.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-header.svelte
new file mode 100644
index 000000000..5ab8a92db
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { getCtx } from "../ctx.js";
+	import type { HeaderProps } from "../types.js";
+
+	type $$Props = HeaderProps;
+	export let asChild: $$Props["asChild"] = false;
+	export let el: $$Props["el"] = undefined;
+
+	const { getCalendarAttrs } = getCtx();
+
+	const attrs = getCalendarAttrs("header");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<header bind:this={el} {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</header>
+{/if}
diff --git a/src/lib/bits/date-range-picker/index.ts b/src/lib/bits/date-range-picker/index.ts
index 53be1db8d..d50e1ad52 100644
--- a/src/lib/bits/date-range-picker/index.ts
+++ b/src/lib/bits/date-range-picker/index.ts
@@ -14,10 +14,10 @@ export { default as Segment } from "./components/date-range-picker-segment.svelt
 export { default as Trigger } from "./components/date-range-picker-trigger.svelte";
 export { default as Root } from "./components/date-range-picker.svelte";
 export { default as Grid } from "./components/date-range-picker-grid.svelte";
-export { default as GridBody } from "$lib/bits/range-calendar/components/range-calendar-grid-body.svelte";
-export { default as GridHead } from "$lib/bits/range-calendar/components/range-calendar-grid-head.svelte";
-export { default as GridRow } from "$lib/bits/range-calendar/components/range-calendar-grid-row.svelte";
-export { default as HeadCell } from "$lib/bits/range-calendar/components/range-calendar-head-cell.svelte";
-export { default as Header } from "$lib/bits/range-calendar/components/range-calendar-header.svelte";
+export { default as GridBody } from "./components/date-range-picker-grid-body.svelte";
+export { default as GridHead } from "./components/date-range-picker-grid-head.svelte";
+export { default as GridRow } from "./components/date-range-picker-grid-row.svelte";
+export { default as HeadCell } from "./components/date-range-picker-head-cell.svelte";
+export { default as Header } from "./components/date-range-picker-header.svelte";
 
 export type * from "./types.js";