How to style the overlay and items not focusable?

[arkmech]

I am looking at the docs: https://github.com/pacocoursey/cmdk#dialog-cmdk-dialog-cmdk-overlay

But I still don't understand how to style the overlay. For example, I am using tailwind.

Do I just add tailwind classnames like this:

<Command.Dialog cmdk-overlay="bg-gray-500">
</ Command.Dialog>

It seems that my focus is always stuck on the <Command.Input />, Arrowing up and down can not focus onto the <Command.Item />

[joaom00]

In the next release, you will be able to pass a className to the Overlay with overlayClassName prop. In the meantime, you need to use a CSS file to style.

[cmdk-overlay] {
  /* styles */
}

About the focus on the CommandItem it would be very annoying to remove the focus from the input every time you browse through the items. If you want to type again in input you would have to use your mouse.

You can style the CommandItem when selected with data-selected attribute. See an example

[arkmech]

Looking forward to it! yeah would be cool if https://www.npmjs.com/package/tailwindcss-radix would work for data-selected on this Component API too