diff --git a/apps/web/examples/datepicker/datepicker.value.tsx b/apps/web/examples/datepicker/datepicker.value.tsx
new file mode 100644
index 000000000..8acc94453
--- /dev/null
+++ b/apps/web/examples/datepicker/datepicker.value.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Button, Datepicker } from "flowbite-react";
+import { useState } from "react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { Button, Datepicker } from "flowbite-react";
+import { useState } from "react";
+
+export function Component() {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Datepicker value={selectedDate} onChange={setSelectedDate} />
+      <div className="flex gap-2">
+        <Button size="xs" onClick={() => setSelectedDate(new Date())}>
+          Set to Today
+        </Button>
+        <Button size="xs" onClick={() => setSelectedDate(null)}>
+          Clear
+        </Button>
+      </div>
+      {selectedDate && (
+        <p className="text-sm text-gray-500">
+          Selected: {selectedDate.toLocaleDateString()}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+
+export function Component() {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Datepicker value={selectedDate} onChange={setSelectedDate} />
+      <div className="flex gap-2">
+        <Button size="xs" onClick={() => setSelectedDate(new Date())}>
+          Set to Today
+        </Button>
+        <Button size="xs" onClick={() => setSelectedDate(null)}>
+          Clear
+        </Button>
+      </div>
+      {selectedDate && <p className="text-sm text-gray-500">Selected: {selectedDate.toLocaleDateString()}</p>}
+    </div>
+  );
+}
+
+export const value: CodeData = {
+  type: "single",
+  code: {
+    fileName: "index",
+    language: "tsx",
+    code,
+  },
+  githubSlug: "datepicker/datepicker.value.tsx",
+  component: <Component />,
+};
diff --git a/apps/web/examples/datepicker/index.ts b/apps/web/examples/datepicker/index.ts
index efdb2945f..f477842dc 100644
--- a/apps/web/examples/datepicker/index.ts
+++ b/apps/web/examples/datepicker/index.ts
@@ -5,4 +5,5 @@ export { filter } from "./datepicker.filter";
 export { range } from "./datepicker.range";
 export { root } from "./datepicker.root";
 export { title } from "./datepicker.title";
+export { value } from "./datepicker.value";
 export { weekStart } from "./datepicker.weekStart";