From d548bcdeec61a2592378c5f1806dd551acbd8a95 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Wed, 3 May 2023 12:34:05 +0400
Subject: [PATCH 1/2] docs(www): move combobox to its own page

---
 apps/www/components/component-example.tsx     |  10 +-
 apps/www/components/copy-button.tsx           |   2 +-
 .../combobox.tsx => combobox/demo.tsx}        |   2 +-
 .../{command => combobox}/dropdown-menu.tsx   |   2 +-
 .../{command => combobox}/popover.tsx         |   2 +-
 apps/www/components/examples/index.tsx        |  12 +-
 apps/www/components/mdx-components.tsx        |   2 +-
 apps/www/config/docs.ts                       |   5 +
 apps/www/content/docs/components/combobox.mdx | 132 ++++++++++++++++++
 apps/www/content/docs/components/command.mdx  |  16 +--
 10 files changed, 157 insertions(+), 28 deletions(-)
 rename apps/www/components/examples/{command/combobox.tsx => combobox/demo.tsx} (98%)
 rename apps/www/components/examples/{command => combobox}/dropdown-menu.tsx (98%)
 rename apps/www/components/examples/{command => combobox}/popover.tsx (98%)
 create mode 100644 apps/www/content/docs/components/combobox.mdx

diff --git a/apps/www/components/component-example.tsx b/apps/www/components/component-example.tsx
index 9bc083bdb8a..666fe02883f 100644
--- a/apps/www/components/component-example.tsx
+++ b/apps/www/components/component-example.tsx
@@ -42,7 +42,7 @@ export function ComponentExample({
       className={cn("group relative my-4 flex flex-col space-y-2", className)}
       {...props}
     >
-      <Tabs defaultValue="preview" className="mr-auto w-full">
+      <Tabs defaultValue="preview" className="relative mr-auto w-full">
         <div className="flex items-center justify-between pb-3">
           <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
             <TabsTrigger
@@ -62,9 +62,15 @@ export function ComponentExample({
             <CopyWithClassNames
               value={codeString}
               classNames={extractedClassNames}
+              className="absolute right-4 top-20"
             />
           ) : (
-            codeString && <CopyButton value={codeString} />
+            codeString && (
+              <CopyButton
+                value={codeString}
+                className="absolute right-4 top-20"
+              />
+            )
           )}
         </div>
         <TabsContent value="preview" className="rounded-md border">
diff --git a/apps/www/components/copy-button.tsx b/apps/www/components/copy-button.tsx
index 01a117e613d..8e37984bf1d 100644
--- a/apps/www/components/copy-button.tsx
+++ b/apps/www/components/copy-button.tsx
@@ -115,7 +115,7 @@ export function CopyWithClassNames({
         )}
         <span className="sr-only">Copy</span>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => copyToClipboard(value)}>
           <Icons.react className="mr-2 h-4 w-4" />
           <span>Component</span>
diff --git a/apps/www/components/examples/command/combobox.tsx b/apps/www/components/examples/combobox/demo.tsx
similarity index 98%
rename from apps/www/components/examples/command/combobox.tsx
rename to apps/www/components/examples/combobox/demo.tsx
index c90f2c2f1aa..212b5e3ad62 100644
--- a/apps/www/components/examples/command/combobox.tsx
+++ b/apps/www/components/examples/combobox/demo.tsx
@@ -41,7 +41,7 @@ const frameworks = [
   },
 ]
 
-export function CommandCombobox() {
+export function ComboboxDemo() {
   const [open, setOpen] = React.useState(false)
   const [value, setValue] = React.useState("")
 
diff --git a/apps/www/components/examples/command/dropdown-menu.tsx b/apps/www/components/examples/combobox/dropdown-menu.tsx
similarity index 98%
rename from apps/www/components/examples/command/dropdown-menu.tsx
rename to apps/www/components/examples/combobox/dropdown-menu.tsx
index 41aebb6d5d2..35f047040f6 100644
--- a/apps/www/components/examples/command/dropdown-menu.tsx
+++ b/apps/www/components/examples/combobox/dropdown-menu.tsx
@@ -36,7 +36,7 @@ const labels = [
   "maintenance",
 ]
 
-export function CommandDropdownMenu() {
+export function ComboboxDropdownMenu() {
   const [label, setLabel] = React.useState("feature")
   const [open, setOpen] = React.useState(false)
 
diff --git a/apps/www/components/examples/command/popover.tsx b/apps/www/components/examples/combobox/popover.tsx
similarity index 98%
rename from apps/www/components/examples/command/popover.tsx
rename to apps/www/components/examples/combobox/popover.tsx
index c6455954268..53442ed08d4 100644
--- a/apps/www/components/examples/command/popover.tsx
+++ b/apps/www/components/examples/combobox/popover.tsx
@@ -60,7 +60,7 @@ const statuses: Status[] = [
   },
 ]
 
-export function CommandPopover() {
+export function ComboboxPopover() {
   const [open, setOpen] = React.useState(false)
   const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
     null
diff --git a/apps/www/components/examples/index.tsx b/apps/www/components/examples/index.tsx
index df457426ff2..0bccb8d2ae1 100644
--- a/apps/www/components/examples/index.tsx
+++ b/apps/www/components/examples/index.tsx
@@ -27,11 +27,11 @@ import { CheckboxDemo } from "@/components/examples/checkbox/demo"
 import { CheckboxDisabled } from "@/components/examples/checkbox/disabled"
 import { CheckboxWithText } from "@/components/examples/checkbox/with-text"
 import { CollapsibleDemo } from "@/components/examples/collapsible/demo"
-import { CommandCombobox } from "@/components/examples/command/combobox"
+import { ComboboxDemo } from "@/components/examples/combobox/demo"
+import { ComboboxDropdownMenu } from "@/components/examples/combobox/dropdown-menu"
+import { ComboboxPopover } from "@/components/examples/combobox/popover"
 import { CommandDemo } from "@/components/examples/command/demo"
 import { CommandDialogDemo } from "@/components/examples/command/dialog"
-import { CommandDropdownMenu } from "@/components/examples/command/dropdown-menu"
-import { CommandPopover } from "@/components/examples/command/popover"
 import { ContextMenuDemo } from "@/components/examples/context-menu/demo"
 import { DialogDemo } from "@/components/examples/dialog/demo"
 import { DropdownMenuCheckboxes } from "@/components/examples/dropdown-menu/checkboxes"
@@ -124,9 +124,9 @@ export const examples = {
   CollapsibleDemo,
   CommandDemo,
   CommandDialogDemo,
-  CommandCombobox,
-  CommandPopover,
-  CommandDropdownMenu,
+  ComboboxDemo,
+  ComboboxPopover,
+  ComboboxDropdownMenu,
   ContextMenuDemo,
   DialogDemo,
   DropdownMenuCheckboxes,
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index 7518a574fa6..4f94b119e2a 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -170,7 +170,7 @@ const components = {
       <>
         <pre
           className={cn(
-            "mb-4 mt-6 overflow-x-auto rounded-lg border py-4 data-[theme=dark]:bg-background data-[theme=light]:bg-white",
+            "mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4 data-[theme=dark]:bg-background data-[theme=light]:bg-white",
             className
           )}
           {...props}
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index 1ee0eb88765..9f598160d59 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -137,6 +137,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/collapsible",
           items: [],
         },
+        {
+          title: "Combobox",
+          href: "/docs/components/combobox",
+          items: [],
+        },
         {
           title: "Command",
           href: "/docs/components/command",
diff --git a/apps/www/content/docs/components/combobox.mdx b/apps/www/content/docs/components/combobox.mdx
new file mode 100644
index 00000000000..42e2d97fa56
--- /dev/null
+++ b/apps/www/content/docs/components/combobox.mdx
@@ -0,0 +1,132 @@
+---
+title: Combobox
+description: Autocomplete input and command palette with a list of suggestions.
+component: true
+---
+
+<ComponentExample src="/components/examples/combobox/demo.tsx">
+  <ComboboxDemo />
+</ComponentExample>
+
+## About
+
+The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
+
+## Installation
+
+See installation instructions for the [Popover](/docs/primitives/popover#installation) and the [Command](/docs/primitives/command#installation) components.
+
+## Usage
+
+```tsx
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandGroup>
+            {frameworks.map((framework) => (
+              <CommandItem
+                key={framework.value}
+                onSelect={(currentValue) => {
+                  setValue(currentValue === value ? "" : currentValue)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === framework.value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {framework.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+## Examples
+
+### Combobox
+
+<ComponentExample src="/components/examples/combobox/demo.tsx">
+  <ComboboxDemo />
+</ComponentExample>
+
+### Popover
+
+<ComponentExample src="/components/examples/combobox/popover.tsx">
+  <ComboboxPopover />
+</ComponentExample>
+
+### Dropdown menu
+
+<ComponentExample src="/components/examples/combobox/dropdown-menu.tsx">
+  <ComboboxDropdownMenu />
+</ComponentExample>
diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
index d634fd5175e..a636e90ac10 100644
--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -122,18 +122,4 @@ export function CommandMenu() {
 
 ### Combobox
 
-<ComponentExample src="/components/examples/command/combobox.tsx">
-  <CommandCombobox />
-</ComponentExample>
-
-### Popover
-
-<ComponentExample src="/components/examples/command/popover.tsx">
-  <CommandPopover />
-</ComponentExample>
-
-### Dropdown menu
-
-<ComponentExample src="/components/examples/command/dropdown-menu.tsx">
-  <CommandDropdownMenu />
-</ComponentExample>
+You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.

From 4b7c0df9a8c94f7a0b06ec12ca94dd94de06f0b9 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Wed, 3 May 2023 12:48:25 +0400
Subject: [PATCH 2/2] docs(www): move date picker to its own page

---
 .../examples/cards/components/date-picker.tsx |  4 +-
 apps/www/app/sink/page.tsx                    |  4 +-
 .../date-picker.tsx => date-picker/demo.tsx}  |  2 +-
 .../with-presets.tsx                          |  2 +-
 .../with-range.tsx}                           |  2 +-
 apps/www/components/examples/index.tsx        | 12 +--
 apps/www/config/docs.ts                       |  5 ++
 apps/www/content/docs/components/calendar.mdx | 20 +----
 apps/www/content/docs/components/combobox.mdx |  2 +-
 apps/www/content/docs/components/command.mdx  |  2 +-
 .../content/docs/components/date-picker.mdx   | 87 +++++++++++++++++++
 11 files changed, 109 insertions(+), 33 deletions(-)
 rename apps/www/components/examples/{calendar/date-picker.tsx => date-picker/demo.tsx} (96%)
 rename apps/www/components/examples/{calendar => date-picker}/with-presets.tsx (97%)
 rename apps/www/components/examples/{calendar/date-range-picker.tsx => date-picker/with-range.tsx} (97%)
 create mode 100644 apps/www/content/docs/components/date-picker.mdx

diff --git a/apps/www/app/examples/cards/components/date-picker.tsx b/apps/www/app/examples/cards/components/date-picker.tsx
index a9ea9fe0ad5..3b5ba51ff17 100644
--- a/apps/www/app/examples/cards/components/date-picker.tsx
+++ b/apps/www/app/examples/cards/components/date-picker.tsx
@@ -1,6 +1,6 @@
 import { Card, CardContent } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
-import { CalendarDateRangePicker } from "@/components/examples/calendar/date-range-picker"
+import { DatePickerWithRange } from "@/components/examples/date-picker/with-range"
 
 export function DemoDatePicker() {
   return (
@@ -10,7 +10,7 @@ export function DemoDatePicker() {
           <Label htmlFor="date" className="shrink-0">
             Pick a date
           </Label>
-          <CalendarDateRangePicker className="[&>button]:w-[260px]" />
+          <DatePickerWithRange className="[&>button]:w-[260px]" />
         </div>
       </CardContent>
     </Card>
diff --git a/apps/www/app/sink/page.tsx b/apps/www/app/sink/page.tsx
index a3a0b054022..96bf75fd901 100644
--- a/apps/www/app/sink/page.tsx
+++ b/apps/www/app/sink/page.tsx
@@ -18,12 +18,12 @@ import { ButtonLoading } from "@/components/examples/button/loading"
 import { ButtonOutline } from "@/components/examples/button/outline"
 import { ButtonSecondary } from "@/components/examples/button/secondary"
 import { ButtonWithIcon } from "@/components/examples/button/with-icon"
-import { CalendarDatePicker } from "@/components/examples/calendar/date-picker"
 import { CardDemo } from "@/components/examples/card/demo"
 import { CheckboxDemo } from "@/components/examples/checkbox/demo"
 import { CollapsibleDemo } from "@/components/examples/collapsible/demo"
 import { CommandDemo } from "@/components/examples/command/demo"
 import { ContextMenuDemo } from "@/components/examples/context-menu/demo"
+import { DatePickerDemo } from "@/components/examples/date-picker/demo"
 import { DialogDemo } from "@/components/examples/dialog/demo"
 import { DropdownMenuDemo } from "@/components/examples/dropdown-menu/demo"
 import { HoverCardDemo } from "@/components/examples/hover-card/demo"
@@ -109,7 +109,7 @@ export default function KitchenSinkPage() {
               </div>
             </ComponentWrapper>
             <ComponentWrapper>
-              <CalendarDatePicker />
+              <DatePickerDemo />
             </ComponentWrapper>
             <ComponentWrapper>
               <AccordionDemo />
diff --git a/apps/www/components/examples/calendar/date-picker.tsx b/apps/www/components/examples/date-picker/demo.tsx
similarity index 96%
rename from apps/www/components/examples/calendar/date-picker.tsx
rename to apps/www/components/examples/date-picker/demo.tsx
index a460cfdc321..5cd0ec0f690 100644
--- a/apps/www/components/examples/calendar/date-picker.tsx
+++ b/apps/www/components/examples/date-picker/demo.tsx
@@ -13,7 +13,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
-export function CalendarDatePicker() {
+export function DatePickerDemo() {
   const [date, setDate] = React.useState<Date>()
 
   return (
diff --git a/apps/www/components/examples/calendar/with-presets.tsx b/apps/www/components/examples/date-picker/with-presets.tsx
similarity index 97%
rename from apps/www/components/examples/calendar/with-presets.tsx
rename to apps/www/components/examples/date-picker/with-presets.tsx
index 37a7eb7d66d..9b1cca3be97 100644
--- a/apps/www/components/examples/calendar/with-presets.tsx
+++ b/apps/www/components/examples/date-picker/with-presets.tsx
@@ -20,7 +20,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
-export function CalendarDatePickerWithPresets() {
+export function DatePickerWithPresets() {
   const [date, setDate] = React.useState<Date>()
 
   return (
diff --git a/apps/www/components/examples/calendar/date-range-picker.tsx b/apps/www/components/examples/date-picker/with-range.tsx
similarity index 97%
rename from apps/www/components/examples/calendar/date-range-picker.tsx
rename to apps/www/components/examples/date-picker/with-range.tsx
index e938e3df3da..65d7ff2c2f8 100644
--- a/apps/www/components/examples/calendar/date-range-picker.tsx
+++ b/apps/www/components/examples/date-picker/with-range.tsx
@@ -14,7 +14,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
-export function CalendarDateRangePicker({
+export function DatePickerWithRange({
   className,
 }: React.HTMLAttributes<HTMLDivElement>) {
   const [date, setDate] = React.useState<DateRange | undefined>({
diff --git a/apps/www/components/examples/index.tsx b/apps/www/components/examples/index.tsx
index 0bccb8d2ae1..c68a24f75be 100644
--- a/apps/www/components/examples/index.tsx
+++ b/apps/www/components/examples/index.tsx
@@ -17,10 +17,7 @@ import { ButtonLoading } from "@/components/examples/button/loading"
 import { ButtonOutline } from "@/components/examples/button/outline"
 import { ButtonSecondary } from "@/components/examples/button/secondary"
 import { ButtonWithIcon } from "@/components/examples/button/with-icon"
-import { CalendarDatePicker } from "@/components/examples/calendar/date-picker"
-import { CalendarDateRangePicker } from "@/components/examples/calendar/date-range-picker"
 import { CalendarDemo } from "@/components/examples/calendar/demo"
-import { CalendarDatePickerWithPresets } from "@/components/examples/calendar/with-presets"
 import { CardDemo } from "@/components/examples/card/demo"
 import { CardWithForm } from "@/components/examples/card/with-form"
 import { CheckboxDemo } from "@/components/examples/checkbox/demo"
@@ -33,6 +30,9 @@ import { ComboboxPopover } from "@/components/examples/combobox/popover"
 import { CommandDemo } from "@/components/examples/command/demo"
 import { CommandDialogDemo } from "@/components/examples/command/dialog"
 import { ContextMenuDemo } from "@/components/examples/context-menu/demo"
+import { DatePickerDemo } from "@/components/examples/date-picker/demo"
+import { DatePickerWithPresets } from "@/components/examples/date-picker/with-presets"
+import { DatePickerWithRange } from "@/components/examples/date-picker/with-range"
 import { DialogDemo } from "@/components/examples/dialog/demo"
 import { DropdownMenuCheckboxes } from "@/components/examples/dropdown-menu/checkboxes"
 import { DropdownMenuDemo } from "@/components/examples/dropdown-menu/demo"
@@ -113,9 +113,9 @@ export const examples = {
   ButtonWithIcon,
   ButtonAsChild,
   CalendarDemo,
-  CalendarDatePicker,
-  CalendarDateRangePicker,
-  CalendarDatePickerWithPresets,
+  DatePickerDemo,
+  DatePickerWithRange,
+  DatePickerWithPresets,
   CardDemo,
   CardWithForm,
   CheckboxDemo,
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index 9f598160d59..5a9694f3cc2 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -152,6 +152,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/context-menu",
           items: [],
         },
+        {
+          title: "Date Picker",
+          href: "/docs/components/date-picker",
+          items: [],
+        },
         {
           title: "Dialog",
           href: "/docs/components/dialog",
diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx
index 53b42a5cc86..ad8e5987919 100644
--- a/apps/www/content/docs/components/calendar.mdx
+++ b/apps/www/content/docs/components/calendar.mdx
@@ -64,22 +64,6 @@ return (
 
 See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
 
-## Examples
+## Date Picker
 
-### Date Picker
-
-<ComponentExample src="/components/examples/calendar/date-picker.tsx">
-  <CalendarDatePicker />
-</ComponentExample>
-
-### Date Range Picker
-
-<ComponentExample src="/components/examples/calendar/date-range-picker.tsx">
-  <CalendarDateRangePicker />
-</ComponentExample>
-
-## With Presets
-
-<ComponentExample src="/components/examples/calendar/with-presets.tsx">
-  <CalendarDatePickerWithPresets />
-</ComponentExample>
+You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
diff --git a/apps/www/content/docs/components/combobox.mdx b/apps/www/content/docs/components/combobox.mdx
index 42e2d97fa56..fe12785414c 100644
--- a/apps/www/content/docs/components/combobox.mdx
+++ b/apps/www/content/docs/components/combobox.mdx
@@ -14,7 +14,7 @@ The Combobox is built using a composition of the `<Popover />` and the `<Command
 
 ## Installation
 
-See installation instructions for the [Popover](/docs/primitives/popover#installation) and the [Command](/docs/primitives/command#installation) components.
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
index a636e90ac10..f8638462b5a 100644
--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -120,6 +120,6 @@ export function CommandMenu() {
 }
 ```
 
-### Combobox
+## Combobox
 
 You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
diff --git a/apps/www/content/docs/components/date-picker.mdx b/apps/www/content/docs/components/date-picker.mdx
new file mode 100644
index 00000000000..02cbbda32eb
--- /dev/null
+++ b/apps/www/content/docs/components/date-picker.mdx
@@ -0,0 +1,87 @@
+---
+title: Date Picker
+description: A date picker component with range and presets.
+component: true
+---
+
+<ComponentExample src="/components/examples/date-picker/demo.tsx">
+  <DatePickerDemo />
+</ComponentExample>
+
+## About
+
+The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
+
+## Installation
+
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
+
+## Usage
+
+```tsx
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+export function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
+
+## Examples
+
+### Date Picker
+
+<ComponentExample src="/components/examples/date-picker/demo.tsx">
+  <DatePickerDemo />
+</ComponentExample>
+
+### Date Range Picker
+
+<ComponentExample src="/components/examples/date-picker/with-range.tsx">
+  <DatePickerWithRange />
+</ComponentExample>
+
+### With Presets
+
+<ComponentExample src="/components/examples/date-picker/with-presets.tsx">
+  <DatePickerWithPresets />
+</ComponentExample>