Command

Fast, composable, unstyled command menu for React.

Preview

No results found.

Suggestions

Calendar

Search Emoji

Launch

Settings

Profile⌘P

Mail⌘B

Settings⌘S

Code

import Command from '@dinui/react/command'
import {
  IconCalendarMonth,
  IconFaceId,
  IconMail,
  IconRocket,
  IconSettings,
  IconUser,
} from '@tabler/icons-react'

export default function CommandDemo() {
  return (
    <Command className="rounded-lg border shadow-md bg-bg--contrast">
      <Command.Input placeholder="Type a command or search..." />

      <Command.List>
        <Command.Empty>No results found.</Command.Empty>

        <Command.Group heading="Suggestions">
          <Command.Item>
            <Command.Item.LeftIcon>
              <IconCalendarMonth />
            </Command.Item.LeftIcon>
            <span>Calendar</span>
          </Command.Item>

          <Command.Item>
            <Command.Item.LeftIcon>
              <IconFaceId />
            </Command.Item.LeftIcon>
            <span>Search Emoji</span>
          </Command.Item>

          <Command.Item>
            <Command.Item.LeftIcon>
              <IconRocket />
            </Command.Item.LeftIcon>
            <span>Launch</span>
          </Command.Item>
        </Command.Group>

        <Command.Separator />

        <Command.Group heading="Settings">
          <Command.Item>
            <Command.Item.LeftIcon>
              <IconUser />
            </Command.Item.LeftIcon>
            <span>Profile</span>
            <Command.Item.Shortcut>⌘P</Command.Item.Shortcut>
          </Command.Item>

          <Command.Item>
            <Command.Item.LeftIcon>
              <IconMail />
            </Command.Item.LeftIcon>
            <span>Mail</span>
            <Command.Item.Shortcut>⌘B</Command.Item.Shortcut>
          </Command.Item>

          <Command.Item>
            <Command.Item.LeftIcon>
              <IconSettings />
            </Command.Item.LeftIcon>
            <span>Settings</span>
            <Command.Item.Shortcut>⌘S</Command.Item.Shortcut>
          </Command.Item>
        </Command.Group>
      </Command.List>
    </Command>
  )
}

About

The <Command /> component uses the cmdk component by pacocoursey.

Dialog

Preview

Press ⌘J

Code

'use client'

import Command from '@dinui/react/command'
import Dialog from '@dinui/react/dialog'
import {
  IconCalendarMonth,
  IconFaceId,
  IconMail,
  IconRocket,
  IconSettings,
  IconUser,
} from '@tabler/icons-react'
import * as React from 'react'

export default function CommandDialogDemo() {
  const [open, setOpen] = React.useState(false)

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }

    document.addEventListener('keydown', down)
    return () => document.removeEventListener('keydown', down)
  }, [])

  return (
    <>
      <p className="text-sm text-fg-weaker">
        Press{' '}
        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/50 px-1.5 font-mono text-[0.625rem] font-medium">
          <span className="text-xs">⌘</span>J
        </kbd>
      </p>

      <Dialog open={open} onOpenChange={setOpen}>
        <Dialog.Content className="p-0" closeButtonProps={{ className: 'top-1 right-1' }}>
          <Command>
            <Command.Input placeholder="Type a command or search..." />

            <Command.List>
              <Command.Empty>No results found.</Command.Empty>
              <Command.Group heading="Suggestions">
                <Command.Item>
                  <Command.Item.LeftIcon>
                    <IconCalendarMonth />
                  </Command.Item.LeftIcon>
                  <span>Calendar</span>
                </Command.Item>
                <Command.Item>
                  <Command.Item.LeftIcon>
                    <IconFaceId />
                  </Command.Item.LeftIcon>
                  <span>Search Emoji</span>
                </Command.Item>
                <Command.Item>
                  <Command.Item.LeftIcon>
                    <IconRocket />
                  </Command.Item.LeftIcon>
                  <span>Launch</span>
                </Command.Item>
              </Command.Group>
              <Command.Separator />
              <Command.Group heading="Settings">
                <Command.Item>
                  <Command.Item.LeftIcon>
                    <IconUser />
                  </Command.Item.LeftIcon>
                  <span>Profile</span>
                  <Command.Item.Shortcut>⌘P</Command.Item.Shortcut>
                </Command.Item>
                <Command.Item>
                  <Command.Item.LeftIcon>
                    <IconMail />
                  </Command.Item.LeftIcon>
                  <span>Mail</span>
                  <Command.Item.Shortcut>⌘B</Command.Item.Shortcut>
                </Command.Item>
                <Command.Item>
                  <Command.Item.LeftIcon>
                    <IconSettings />
                  </Command.Item.LeftIcon>
                  <span>Settings</span>
                  <Command.Item.Shortcut>⌘S</Command.Item.Shortcut>
                </Command.Item>
              </Command.Group>
            </Command.List>
          </Command>
        </Dialog.Content>
      </Dialog>
    </>
  )
}

Combobox

You can use the <Command /> component as a combobox. See the Combobox page for more information.

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add command

   yarn

   yarn dlx @dinui/cli@latest add command

   pnpm

   pnpm dlx @dinui/cli@latest add command

   bun

   bunx @dinui/cli@latest add command

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-slot @tabler/icons-react cmdk tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-slot @tabler/icons-react cmdk tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-slot @tabler/icons-react cmdk tailwind-variants type-fest

   bun

   bun add @radix-ui/react-slot @tabler/icons-react cmdk tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import { Slot } from '@radix-ui/react-slot'
   import { IconCircle, IconSearch } from '@tabler/icons-react'
   import * as CommandPrimitive from 'cmdk'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const command = tv({
     slots: {
       root: 'flex h-full w-full flex-col overflow-hidden rounded-md',
       input: [
         'h-10 w-full text-sm outline-none bg-transparent',
         'placeholder:text-fg-weaker',
         'disabled:cursor-not-allowed disabled:opacity-50',
       ],
       inputWrapper: 'flex items-center border-b px-3',
       inputIcon: 'mr-2 size-4 shrink-0 text-fg-weaker',
       list: 'overflow-y-auto overflow-x-hidden',
       empty: 'py-6 text-center text-sm text-fg-weaker',
       group: [
         'overflow-hidden p-1',
         '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-fg-weaker',
       ],
       separator: '-mx-1 h-px bg-border',
       item: [
         'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
         'transition aria-selected:bg-bg--active',
         'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
       ],
       itemLeftIcon: 'size-[1.125rem] mr-2',
       itemShortcut: 'ml-auto text-xs tracking-widest text-fg-weaker',
     },
   })
   
   const CommandRoot = forwardRef<
     React.ElementRef<typeof CommandPrimitive.Command>,
     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Command>
   >((props, ref) => {
     const { root } = command()
   
     return (
       <CommandPrimitive.Command
         {...props}
         ref={ref}
         className={root({ className: props.className })}
       />
     )
   })
   CommandRoot.displayName = CommandPrimitive.Command.displayName
   
   const CommandInput = forwardRef<
     React.ElementRef<typeof CommandPrimitive.Command.Input>,
     Merge<
       React.ComponentPropsWithoutRef<typeof CommandPrimitive.Command.Input>,
       {
         wrapperProps?: React.ComponentProps<'div'>
         iconProps?: React.ComponentProps<typeof IconSearch>
       }
     >
   >(({ wrapperProps, iconProps, ...props }, ref) => {
     const { input, inputWrapper, inputIcon } = command()
   
     return (
       <div {...wrapperProps} className={inputWrapper({ className: wrapperProps?.className })}>
         <IconSearch {...iconProps} className={inputIcon({ className: iconProps?.className })} />
         <CommandPrimitive.Command.Input
           {...props}
           ref={ref}
           className={input({ className: props.className })}
         />
       </div>
     )
   })
   CommandInput.displayName = CommandPrimitive.Command.Input.displayName
   
   const CommandList = forwardRef<
     React.ElementRef<typeof CommandPrimitive.Command.List>,
     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Command.List>
   >((props, ref) => {
     const { list } = command()
   
     return (
       <CommandPrimitive.Command.List
         {...props}
         ref={ref}
         className={list({
           className: props.className,
         })}
       />
     )
   })
   CommandList.displayName = CommandPrimitive.Command.displayName
   
   const CommandEmpty = forwardRef<
     React.ElementRef<typeof CommandPrimitive.Command.Empty>,
     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Command.Empty>
   >((props, ref) => {
     const { empty } = command()
   
     return (
       <CommandPrimitive.Command.Empty
         {...props}
         ref={ref}
         className={empty({ className: props.className })}
       />
     )
   })
   CommandEmpty.displayName = CommandPrimitive.Command.Empty.displayName
   
   const CommandGroup = forwardRef<
     React.ElementRef<typeof CommandPrimitive.Command.Group>,
     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Command.Group>
   >((props, ref) => {
     const { group } = command()
   
     return (
       <CommandPrimitive.Command.Group
         {...props}
         ref={ref}
         className={group({ className: props.className })}
       />
     )
   })
   CommandGroup.displayName = CommandPrimitive.Command.Group.displayName
   
   const CommandSeparator = forwardRef<
     React.ElementRef<typeof CommandPrimitive.Command.Separator>,
     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Command.Separator>
   >((props, ref) => {
     const { separator } = command()
   
     return (
       <CommandPrimitive.Command.Separator
         {...props}
         ref={ref}
         className={separator({ className: props.className })}
       />
     )
   })
   CommandSeparator.displayName = CommandPrimitive.Command.Separator.displayName
   
   const CommandItem = forwardRef<
     React.ElementRef<typeof CommandPrimitive.Command.Item>,
     React.ComponentPropsWithoutRef<typeof CommandPrimitive.Command.Item>
   >((props, ref) => {
     const { item } = command()
   
     return (
       <CommandPrimitive.Command.Item
         {...props}
         ref={ref}
         className={item({ className: props.className })}
       />
     )
   })
   
   CommandItem.displayName = CommandPrimitive.Command.Item.displayName
   
   const CommandItemLeftIcon = forwardRef<
     React.ComponentRef<typeof IconCircle>,
     React.ComponentPropsWithoutRef<typeof IconCircle>
   >((props, ref) => {
     const { itemLeftIcon } = command()
   
     return (
       <Slot
         {...(props as React.HTMLAttributes<HTMLElement>)}
         ref={ref as React.ForwardedRef<HTMLElement>}
         className={itemLeftIcon({ className: props.className })}
       >
         {props.children ?? <IconCircle />}
       </Slot>
     )
   })
   CommandItemLeftIcon.displayName = 'CommandItemLeftIcon'
   
   const CommandItemShortcut = forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
     (props, ref) => {
       const { itemShortcut } = command()
   
       return <span {...props} ref={ref} className={itemShortcut({ className: props.className })} />
     },
   )
   CommandItemShortcut.displayName = 'CommandItemShortcut'
   
   const Command = Object.assign(CommandRoot, {
     Input: CommandInput,
     List: CommandList,
     Empty: CommandEmpty,
     Separator: CommandSeparator,
     Group: CommandGroup,
     Item: Object.assign(CommandItem, {
       LeftIcon: CommandItemLeftIcon,
       Shortcut: CommandItemShortcut,
     }),
   })
   
   export default Command
   export { command, CommandPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.