Bento

Bento Command

Pronew

A command palette lit from above. The query types itself and the selection follows hover.

Esc

Actions

Deploy to productionD

Deploy a previewP

Roll back last deployR

Everything is a keystroke

Deploy, preview or roll back from one palette, without leaving the keyboard.

Installation

npx shadcn@latest add @blank-pro/bento-command

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { BentoCommand } from "@/components/ui/bento-command"

<BentoCommand
  query="deploy"
  heading="Actions"
  items={[
    { label: "Deploy to production", shortcut: "D", icon: <RocketIcon /> },
    { label: "Roll back last deploy", shortcut: "R", icon: <Undo2Icon /> },
  ]}
/>

The query types out once the card is half in view, then the actions appear with the first one selected. Hovering the card moves the selection to the second action, the way a press of the down arrow would. The light above the palette takes the card's --bento-light.