({
diff --git a/apps/www/components/examples/index.tsx b/apps/www/components/examples/index.tsx
index df457426ff2..c68a24f75be 100644
--- a/apps/www/components/examples/index.tsx
+++ b/apps/www/components/examples/index.tsx
@@ -17,22 +17,22 @@ 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"
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 { 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,
@@ -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 = {
<>
-
-
-
-### Date Range Picker
-
-
-
-
-
-## With Presets
-
-
-
-
+You can use the `` 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
new file mode 100644
index 00000000000..fe12785414c
--- /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
+---
+
+
+
+
+
+## About
+
+The Combobox is built using a composition of the `` and the `` components.
+
+## Installation
+
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/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 (
+
+
+
+
+
+
+
+ No framework found.
+
+ {frameworks.map((framework) => (
+ {
+ setValue(currentValue === value ? "" : currentValue)
+ setOpen(false)
+ }}
+ >
+
+ {framework.label}
+
+ ))}
+
+
+
+
+ )
+}
+```
+
+## Examples
+
+### Combobox
+
+
+
+
+
+### Popover
+
+
+
+
+
+### Dropdown menu
+
+
+
+
diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
index d634fd5175e..f8638462b5a 100644
--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -120,20 +120,6 @@ export function CommandMenu() {
}
```
-### Combobox
+## Combobox
-
-
-
-
-### Popover
-
-
-
-
-
-### Dropdown menu
-
-
-
-
+You can use the `` 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
+---
+
+
+
+
+
+## About
+
+The Date Picker is built using a composition of the `` and the `` 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()
+
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+```
+
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
+
+## Examples
+
+### Date Picker
+
+
+
+
+
+### Date Range Picker
+
+
+
+
+
+### With Presets
+
+
+
+