export const title = "Command menu components"
export const description = "Powerful and customizable React command menu components built for modern applications and websites. These command menus are built using React Aria and styled with Tailwind CSS."
export const links = {
    rac: "https://react-spectrum.adobe.com/react-aria/Autocomplete.html"
}

<PreviewAndCode title="Command menu example" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-actions" cliCommand="npx untitledui@latest add command-menus/command-menu-actions">
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-actions"  dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuActions" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this command menu component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add command-menu
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/command-menu" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the command menu components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Command menu examples

Below are examples and variations of this command menu component:

### Users {{ tocOnly:true }}

<PreviewAndCode title="Users" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-users" cliCommand="npx untitledui@latest add command-menus/command-menu-users">
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-users" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuUsers" />
    </TabPanel>
</PreviewAndCode>

### Users stacked {{ tocOnly:true }}

<PreviewAndCode title="Users stacked" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-users-stacked" cliCommand="npx untitledui@latest add command-menus/command-menu-users-stacked">
    <ResizablePreview enable id="preview" className="h-[800px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-users-stacked" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuUsersStacked" />
    </TabPanel>
</PreviewAndCode>

### Actions {{ tocOnly:true }}

<PreviewAndCode title="Actions" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-actions" cliCommand="npx untitledui@latest add command-menus/command-menu-actions">
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-actions" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuActions" />
    </TabPanel>
</PreviewAndCode>

### Actions stacked {{ tocOnly:true }}

<PreviewAndCode title="Actions stacked" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-actions-stacked" cliCommand="npx untitledui@latest add command-menus/command-menu-actions-stacked">
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-actions-stacked" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuActionsStacked" />
    </TabPanel>
</PreviewAndCode>

### Empty state {{ tocOnly:true }}

<PreviewAndCode title="Empty state" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-empty-state" cliCommand="npx untitledui@latest add command-menus/command-menu-empty-state">
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-empty-state" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuEmptyState" />
    </TabPanel>
</PreviewAndCode>

### Users menu {{ tocOnly:true }}

<PreviewAndCode title="Users menu" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-users-menu" cliCommand="npx untitledui@latest add command-menus/command-menu-users-menu">
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-users-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuUsersMenu" />
    </TabPanel>
</PreviewAndCode>

### Users menu stacked {{ tocOnly:true }}

<PreviewAndCode title="Users menu stacked" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-users-menu-stacked" cliCommand="npx untitledui@latest add command-menus/command-menu-users-menu-stacked">
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-users-menu-stacked" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuUsersMenuStacked" />
    </TabPanel>
</PreviewAndCode>

### Integrations menu {{ tocOnly:true }}

<PreviewAndCode title="Integrations menu" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-integrations-menu" cliCommand="npx untitledui@latest add command-menus/command-menu-integrations-menu">
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-integrations-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuIntegrationsMenu" />
    </TabPanel>
</PreviewAndCode>

### Integrations menu stacked {{ tocOnly:true }}

<PreviewAndCode title="Integrations menu stacked" isPublic={false} iframeSrc="/react/iframe/command-menus/command-menu-integrations-menu-stacked" cliCommand="npx untitledui@latest add command-menus/command-menu-integrations-menu-stacked">
    <ResizablePreview enable id="preview" className="h-[680px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/command-menus/command-menu-integrations-menu-stacked" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="command-menus/CommandMenuIntegrationsMenuStacked" />
    </TabPanel>
</PreviewAndCode>