diff --git a/frontend/src/metabase/components/Calendar.info.js b/frontend/src/metabase/components/Calendar.info.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa1577bd87a907ed833aa3b6ecc4e70508cff258
--- /dev/null
+++ b/frontend/src/metabase/components/Calendar.info.js
@@ -0,0 +1,29 @@
+import React from "react";
+import moment from "moment";
+import Calendar from "./Calendar";
+
+export const component = Calendar;
+
+export const description = `For when gregorian time is your need, a calendar is your friend indeed`;
+
+const onChange = () => ({});
+
+export const examples = {
+  default: <Calendar onChange={onChange} />,
+  "With a selected date": <Calendar onChange={onChange} selected={moment()} />,
+  "With a date range": (
+    <Calendar
+      selected={moment()}
+      selectedEnd={moment().add(10, "days")}
+      onChange={onChange}
+    />
+  ),
+  "Dual with a date range": (
+    <Calendar
+      isDual
+      selected={moment()}
+      selectedEnd={moment().add(1, "month")}
+      onChange={onChange}
+    />
+  ),
+};