diff --git a/packages/showcase/src/sections/inputs-advanced.tsx b/packages/showcase/src/sections/inputs-advanced.tsx
index 604c4f1..e94b0b0 100644
--- a/packages/showcase/src/sections/inputs-advanced.tsx
+++ b/packages/showcase/src/sections/inputs-advanced.tsx
@@ -1,5 +1,6 @@
 import { Form } from "pettyui/form";
 import { DatePicker } from "pettyui/date-picker";
+import { Calendar } from "pettyui/calendar";
 import { ComponentDemo } from "../component-demo";
 
 /** Form demo with validation and error display. */
@@ -42,7 +43,19 @@ function DatePickerDemo() {
         <DatePicker.Input placeholder="Pick a date" class="w-full px-3 py-1.5 text-sm rounded focus:outline-none" />
         <DatePicker.Trigger class="px-2 text-gray-400 hover:text-gray-600">📅</DatePicker.Trigger>
       </div>
-      <DatePicker.Content class="absolute top-full mt-1 border border-gray-200 rounded bg-white shadow-lg z-10 p-2" />
+      <DatePicker.Content class="absolute top-full mt-1 border border-gray-200 rounded bg-white shadow-lg z-10 p-2">
+        <Calendar class="w-64">
+          <Calendar.Header class="flex items-center justify-between mb-2">
+            <Calendar.PrevButton class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 text-sm">‹</Calendar.PrevButton>
+            <Calendar.Heading class="text-sm font-semibold text-gray-800" />
+            <Calendar.NextButton class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 text-sm">›</Calendar.NextButton>
+          </Calendar.Header>
+          <Calendar.Grid class="w-full border-collapse">
+            <Calendar.GridHead class="[&_th]:text-xs [&_th]:text-gray-400 [&_th]:font-medium [&_th]:pb-1 [&_th]:text-center" />
+            <Calendar.GridBody class="[&_td]:text-center [&_td]:p-0.5 [&_td]:text-sm [&_td]:rounded [&_td]:cursor-pointer [&_td:hover]:bg-indigo-50 [&_td[data-selected]]:bg-indigo-600 [&_td[data-selected]]:text-white [&_td[data-today]]:font-bold [&_td[data-outside-month]]:text-gray-300" />
+          </Calendar.Grid>
+        </Calendar>
+      </DatePicker.Content>
     </DatePicker>
   );
   return content;
diff --git a/packages/showcase/vite.config.ts b/packages/showcase/vite.config.ts
index 3dc2e65..79db4fb 100644
--- a/packages/showcase/vite.config.ts
+++ b/packages/showcase/vite.config.ts
@@ -7,6 +7,7 @@ export default defineConfig({
   plugins: [solid(), tailwindcss()],
   resolve: {
     conditions: ["solid", "browser", "module", "import"],
+    dedupe: ["solid-js"],
     alias: {
       "pettyui": path.resolve(__dirname, "../core/src/components"),
     },