Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Top

Top Drawer Search Bar for React

A top drawer with a large search field above Recent Searches and Quick Access shortcuts.

Framework
UI library

Search that drops from the top: a large search field, then Recent Searches and Quick Access, each a short list of ghost buttons with an icon. 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 search field built?

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

What's under the field?

Recent Searches, with Project files and Team documents, and Quick Access, with My Projects and Recent Files. Each section has a small uppercase heading.

Does typing show results?

Not in this demo: the field is uncontrolled. Keep the query in state and replace the two sections with matching results as people type.

Do the recent searches run anything?

No, they're ghost buttons with a clock, folder or file icon and no handler. Fill the field with the search, or open the place, from each one.

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 Search 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