+
{Example}
diff --git a/apps/www/components/examples/command/combobox.tsx b/apps/www/components/examples/command/combobox.tsx
new file mode 100644
index 0000000000..c90f2c2f1a
--- /dev/null
+++ b/apps/www/components/examples/command/combobox.tsx
@@ -0,0 +1,90 @@
+"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 CommandCombobox() {
+ 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}
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/apps/www/components/examples/command/demo.tsx b/apps/www/components/examples/command/demo.tsx
new file mode 100644
index 0000000000..b2baff109f
--- /dev/null
+++ b/apps/www/components/examples/command/demo.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import {
+ Calculator,
+ Calendar,
+ CreditCard,
+ Settings,
+ Smile,
+ User,
+} from "lucide-react"
+
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ CommandShortcut,
+} from "@/components/ui/command"
+
+export function CommandDemo() {
+ return (
+
+
+
+ No results found.
+
+
+
+ Calendar
+
+
+
+ Search Emoji
+
+
+
+ Calculator
+
+
+
+
+
+
+ Profile
+ ⌘P
+
+
+
+ Billing
+ ⌘B
+
+
+
+ Settings
+ ⌘S
+
+
+
+
+ )
+}
diff --git a/apps/www/components/examples/command/dialog.tsx b/apps/www/components/examples/command/dialog.tsx
new file mode 100644
index 0000000000..967174deff
--- /dev/null
+++ b/apps/www/components/examples/command/dialog.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+import {
+ Calculator,
+ Calendar,
+ CreditCard,
+ Settings,
+ Smile,
+ User,
+} from "lucide-react"
+
+import {
+ CommandDialog,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ CommandShortcut,
+} from "@/components/ui/command"
+
+export function CommandDialogDemo() {
+ const [open, setOpen] = React.useState(false)
+
+ React.useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ if (e.key === "j" && e.metaKey) {
+ setOpen((open) => !open)
+ }
+ }
+
+ document.addEventListener("keydown", down)
+ return () => document.removeEventListener("keydown", down)
+ }, [])
+
+ return (
+ <>
+
+ Press{" "}
+
+ ⌘J
+
+
+
+
+
+ No results found.
+
+
+
+ Calendar
+
+
+
+ Search Emoji
+
+
+
+ Calculator
+
+
+
+
+
+
+ Profile
+ ⌘P
+
+
+
+ Billing
+ ⌘B
+
+
+
+ Settings
+ ⌘S
+
+
+
+
+
+ )
+}
diff --git a/apps/www/components/examples/command/dropdown-menu.tsx b/apps/www/components/examples/command/dropdown-menu.tsx
new file mode 100644
index 0000000000..6423a6a706
--- /dev/null
+++ b/apps/www/components/examples/command/dropdown-menu.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+import { Calendar, MoreHorizontal, Pen, Tags, Trash, User } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+const labels = [
+ "feature",
+ "bug",
+ "enhancement",
+ "documentation",
+ "design",
+ "question",
+ "maintenance",
+]
+
+export function CommandDropdownMenu() {
+ const [label, setLabel] = React.useState("feature")
+ const [open, setOpen] = React.useState(false)
+
+ return (
+
+
+
+ {label}
+
+ Create a new project
+
+
+
+
+
+
+ Actions
+
+
+
+ Assign to...
+
+
+
+ Set due date...
+
+
+
+
+
+ Apply label
+
+
+
+
+
+ No label found.
+
+ {labels.map((label) => (
+ {
+ setLabel(value)
+ setOpen(false)
+ }}
+ >
+ {label}
+
+ ))}
+
+
+
+
+
+
+
+
+ Delete
+ ⌘⌫
+
+
+
+
+
+ )
+}
diff --git a/apps/www/components/examples/command/popover.tsx b/apps/www/components/examples/command/popover.tsx
new file mode 100644
index 0000000000..1500534dff
--- /dev/null
+++ b/apps/www/components/examples/command/popover.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import * as React from "react"
+import {
+ ArrowUpCircle,
+ CheckCircle2,
+ Circle,
+ HelpCircle,
+ LucideIcon,
+ XCircle,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+
+type Status = {
+ value: string
+ label: string
+ icon: LucideIcon
+}
+
+const statuses: Status[] = [
+ {
+ value: "backlog",
+ label: "Backlog",
+ icon: HelpCircle,
+ },
+ {
+ value: "todo",
+ label: "Todo",
+ icon: Circle,
+ },
+ {
+ value: "in progress",
+ label: "In Progress",
+ icon: ArrowUpCircle,
+ },
+ {
+ value: "done",
+ label: "Done",
+ icon: CheckCircle2,
+ },
+ {
+ value: "canceled",
+ label: "Canceled",
+ icon: XCircle,
+ },
+]
+
+export function CommandPopover() {
+ const [open, setOpen] = React.useState(false)
+ const [selectedStatus, setSelectedStatus] = React.useState
(
+ null
+ )
+
+ return (
+
+
Status
+
+
+
+
+
+
+
+
+ No results found.
+
+ {statuses.map((status) => (
+ {
+ setSelectedStatus(
+ statuses.find((priority) => priority.value === value) ||
+ null
+ )
+ setOpen(false)
+ }}
+ >
+
+ {status.label}
+
+ ))}
+
+
+
+
+
+
{items.map((item, index) => (
-
+
{item.title}
@@ -46,7 +46,7 @@ export function DocsSidebarNavItems({
key={index}
href={item.href}
className={cn(
- "flex w-full items-center rounded-md p-2 hover:underline",
+ "group flex w-full items-center rounded-md py-1.5 px-2 hover:bg-slate-50 dark:hover:bg-slate-800",
item.disabled && "cursor-not-allowed opacity-60",
{
"bg-slate-100 dark:bg-slate-800": pathname === item.href,
@@ -56,6 +56,11 @@ export function DocsSidebarNavItems({
rel={item.external ? "noreferrer" : ""}
>
{item.title}
+ {item.label && (
+
+ {item.label}
+
+ )}
) : (
-
-
-
+
+
+