Skip to content

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

Free

Top Drawer Search Bar for Ark UI

A top Search drawer with a search field, Recent Searches, and Quick Access shortcuts under it.

Search drops from the top with a large search field. Recent Searches lists Project files and Team documents, and Quick Access lists My Projects and Recent Files.

Use it when search should cover the screen from the top. A small field in the header can open a Popover. In React, Ark UI does not run the search.

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

Anatomy

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

Usage

<Drawer swipeDirection="up">
  <DrawerTrigger asChild>
    <Button variant="outline">
      <SearchIcon aria-hidden="true" data-icon="inline-start" />
      Search
    </Button>
  </DrawerTrigger>
  <DrawerContent showBar={false}>
    <DrawerTitle className="sr-only">Search</DrawerTitle>
    <div className="flex flex-col gap-4 p-4">
      <InputGroup className="h-12">
        <InputGroupInput
          aria-label="Search"
          className="text-base"
          placeholder="Search for files, folders, or content..."
          type="search"
        />
        <InputGroupAddon>
          <SearchIcon aria-hidden="true" className="size-5" />
        </InputGroupAddon>
      </InputGroup>
      <div className="flex flex-col gap-2">
        <h3 className="font-medium text-muted-foreground text-xs uppercase">
          Recent Searches
        </h3>
        <div className="flex flex-col gap-1">
          <Button className="justify-start" size="sm" variant="ghost">
            <ClockIcon aria-hidden="true" data-icon="inline-start" />
            Project files
          </Button>
          <Button className="justify-start" size="sm" variant="ghost">
{/* The rest of the file is under Installation. */}

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.

API Reference

Drawer

Sets swipeDirection="up", asChild and showBar={false}. The rest is on the Drawer page.

Button

Sets variant="outline", size="sm" and variant="ghost". The rest is on the Button page.

Input Group

Sets aria-label="Search", placeholder="Search for files, folders, or content..." and type="search". The rest is on the Input Group page.

All 22 drawer examples