Components
Loading preview...
Launch a set of actions as a full-screen overlay.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/command-menuimport { Button } from "@/components/ui/button-1";
import { CommandMenu } from "@/components/ui/command-menu";
import React, { useState } from "react";
export default function DefaultDemo() {
const [open, setOpen] = useState<boolean>(false);
function callback(): void {
// no op
}
return (
<>
<Button onClick={() => setOpen(true)}>Open Command Menu</Button>
<CommandMenu.Root open={open} setOpen={setOpen}>
<CommandMenu.Input placeholder="What do you need?" />
<CommandMenu.List>
<CommandMenu.Item callback={callback}>Item 1</CommandMenu.Item>
<CommandMenu.Item callback={callback}>Item 2</CommandMenu.Item>
<CommandMenu.Item callback={callback}>Item 3</CommandMenu.Item>
<CommandMenu.Group heading="Group 1">
<CommandMenu.Item callback={callback}>
Grouped Item 1
</CommandMenu.Item>
<CommandMenu.Item callback={callback}>
Grouped Item 2
</CommandMenu.Item>
</CommandMenu.Group>
</CommandMenu.List>
</CommandMenu.Root>
</>
);
}