Skip to content

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

Free

Top Drawer Quick Actions for React

A top Quick Actions drawer with six buttons in three columns: New File, Upload, Download, Share, Settings, and More.

Quick Actions drops from the top. Six outline buttons sit in three columns: New File, Upload, Download, Share, Settings, and More, each an icon over a label.

Use it for common actions at the top of a phone screen. If one action is the primary one, a Button in the page is clearer. In React, Base UI does not perform the action.

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 render={<Button variant="outline" />}>
    <ZapIcon aria-hidden="true" data-icon="inline-start" />
    Quick Actions
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Quick Actions</DrawerTitle>
      <DrawerDescription>
        Perform common actions quickly from here
      </DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      <div className="mx-auto grid max-w-2xl grid-cols-3 gap-4">
        <Button className="h-20 flex-col gap-2" variant="outline">
          <PlusIcon aria-hidden="true" className="size-6" />
          <span className="text-xs">New File</span>
        </Button>
        <Button className="h-20 flex-col gap-2" variant="outline">
          <UploadIcon aria-hidden="true" className="size-6" />
          <span className="text-xs">Upload</span>
        </Button>
        <Button className="h-20 flex-col gap-2" variant="outline">
          <DownloadIcon aria-hidden="true" className="size-6" />
          <span className="text-xs">Download</span>
        </Button>
        <Button className="h-20 flex-col gap-2" variant="outline">
          <Share2Icon aria-hidden="true" className="size-6" />
          <span className="text-xs">Share</span>
        </Button>
        <Button className="h-20 flex-col gap-2" variant="outline">
{/* The rest of the file is under Installation. */}

FAQ

How is the grid laid out?

A grid grid-cols-3 gap-4, capped at max-w-2xl and centered with mx-auto. Each button is h-20 flex-col, so the icon sits over the label.

What do screen readers hear for each action?

The label, such as New File or Upload. The icons are aria-hidden.

Do the actions do anything?

Not yet: they're outline Buttons with no handler. Run each action from its button, and close the drawer once it starts: Pass open to Drawer; onOpenChange receives the next boolean.

Why do New File and More share an icon?

Both use the plus icon in this demo. Give More its own icon, such as an ellipsis, so the two don't look alike.

How does Quick Actions open the drawer?

An outline button opens the drawer. Its text, Quick Actions, is the accessible name. The Button goes in the render prop of DrawerTrigger. The bolt icon before it is aria-hidden.

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". The rest is on the Drawer page.

Button

Sets variant="outline". The rest is on the Button page.

All 22 drawer examples