Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Top

Top Drawer Command Bar for React

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

Framework
UI library

A command bar that drops from the top: a large search field and four commands, each with its shortcut in a Kbd. The drawer's title is visually hidden, since the field leads the panel.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

All 22 drawer examples