Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Top Drawer Command Bar for Vue

A top command bar with a search field and four commands, each showing its keyboard shortcut.

UI library: Ark UI

Command Bar drops from the top with a search field. Create new project, Open file, Search everywhere, and Settings each show a shortcut.

Use it for a few commands at the top of a phone layout. A full command menu belongs in Command. In Vue, Ark UI does not run the command.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer swipeDirection="up">
  <DrawerTrigger :asChild="true">
    <Button variant="outline">
      <CommandIcon aria-hidden="true" data-icon="inline-start" />Command Bar
    </Button>
  </DrawerTrigger>
  <DrawerContent :showBar="false">
    <DrawerTitle class="sr-only">Command Bar</DrawerTitle>
    <div class="flex flex-col gap-4 p-4">
      <InputGroup class="h-12">
        <InputGroupInput
          aria-label="Command"
          class="text-base"
          placeholder="Type a command or search..."
          type="search"
        />
        <InputGroupAddon>
          <CommandIcon aria-hidden="true" class="size-5" />
        </InputGroupAddon>
      </InputGroup>
      <div class="flex flex-col gap-1">
        <Button
          v-for="command in COMMANDS"
          class="justify-between"
          :key="command.label"
          size="sm"
          variant="ghost"
        >
          {{ command.label }}<Kbd>{{ command.shortcut }}</Kbd>
        </Button>
      </div>
<!-- The rest of the file is under Installation. -->

FAQ

How is the command field built?

An Input Group, h-12, with an InputGroupInput of type="search" and aria-label="Command", and an InputGroupAddon holding the command icon after the input in the markup.

How are the commands listed?

From a static array of four: Create new project, Open file, Search everywhere and Settings. Each is a ghost Button with its label at the start and its shortcut in a Kbd at the end.

Does typing filter the commands?

Not in this demo: the field is uncontrolled. For a filterable list with arrow-key navigation, use a Command menu inside the drawer.

Do the shortcuts work?

No, the Kbds only show them. Register the key handlers yourself, and open the drawer from ⌘K if that's the shortcut you show.

Why is the title hidden?

DrawerTitle names the dialog for assistive tech, so every drawer renders one; give it sr-only when the design has no visible heading. Here it reads Command Bar and has sr-only.

How does the drawer open from the top?

swipeDirection="up" on Drawer puts it on the top edge. The prop names the swipe that closes the drawer, so up docks it at the top; leave it out for a bottom drawer.

API Reference

Drawer

Sets swipeDirection="up" and asChild. The rest is on the Drawer page.

Button

Sets variant="outline", v-for="command in COMMANDS", key="command.label", size="sm" and variant="ghost". The rest is on the Button page.

Input Group

Sets aria-label="Command", placeholder="Type a command or search..." and type="search". The rest is on the Input Group page.

Kbd

No extra props in this demo. The rest is on the Kbd page.

All 22 drawer examples